2b:T784,map = { // You'll often see Leaflet examples initializing a map like L.map('map'), // which tells the library to look for a div with the id 'map' on the page. // In Observable, we instead create a div from scratch in this cell, so it's // completely self-contained. let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); // Note that I'm yielding the container pretty early here: this allows the // div to be placed on the page. This is important, because Leaflet uses // the div's .offsetWidth and .offsetHeight to size the map. If I were // to only return the container at the end of this method, Leaflet might // get the wrong idea about the map's size. yield container; // Now we create a map object and add a layer to it. var geojsonMarkerOptions = { radius: 3, fillColor: "#ff7800", color: "#000", weight: 1, opacity: 0.5, fillOpacity: 0.2 }; let map = L.map(container).setView([29.8658, -95.7323], 13); let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Wikimedia maps beta | © OpenStreetMap contributors' }).addTo(map); // Adding the watersheds geojson let layerGroup = L.geoJSON(watersheds, { opacity: 0.5, fillOpacity: 0.15, onEachFeature: function (feature, layer) { layer.bindPopup('

name: '+feature.properties.WTSHNAME+'

'); } }).addTo(map); // Adding the damage geojson let damage_L = L.geoJson(damage, { pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, geojsonMarkerOptions); }, onEachFeature: function (feature, layer) { layer.bindPopup('

Address: '+feature.properties.LocAddr+', Water Depth:'+feature.properties.IN_DEPTH+' Damage Level:'+feature.properties.DMG_LEVEL+'

'); } }).addTo(map); } 2c:[] 2a:{"title":"GEOJSON Points & Polygons: Katy, Texas Early Modeled Flood Damage from Hurricane Harvey from FEMA to Leaflet.js Map","cells":[{"id":0,"value":"md`# GEOJSON Points & Polygons: Katy, Texas Early Modeled Flood Damage from Hurricane Harvey from FEMA to Leaflet.js Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"html`

Click on watershed polygons & damage markers to bring up watershed name, address, and innudation depth

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"html`

Original project here

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"html`

Load d3.js v5

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"html`

Import watersheds data as GEOJSON using d3.js to call a gist file

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"watersheds = d3.json(\"https://cdn.rawgit.com/JustinGOSSES/a8d5ea2bbaf572450b309884269bd8ac/raw/a3f64167d2ecc1b7680bdf2c7822f3d0c39e1d2a/HarrisCounty_Watersheds_poly.geojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"damage = d3.json(\"https://cdn.rawgit.com/JustinGOSSES/0984370555d332b74c8b634bdaaa2774/raw/2d9f028eb5c23cf2f8c4d92548306006f1ab61da/Harvey_FEMA_HCAD_Damage_reduced_katy2.geojson\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"html`

Load Leaflet.js

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"html`

Create Map with the geojson of watersheds added on top as layer

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2c","stdlib":"1","titling":"auto"}