32:T56d,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; // 29.7604° N, 95.3698° W // Now we create a map object and add a layer to it. let map = L.map(container).setView([29.7604, -95.3698], 9); let osmLayer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', { attribution: 'Wikimedia maps beta | © OpenStreetMap contributors' }).addTo(map); let watersheds_L = L.geoJson(watersheds, { weight: 2, color: '#400' }).addTo(map); let layerGroup = L.geoJSON(watersheds, { onEachFeature: function (feature, layer) { layer.bindPopup('

name: '+feature.properties.WTSHNAME+'

'); } }).addTo(map); } 33:[] 30:{"title":"Adding GEOJSON with Pop-Ups of Houston Area Watershed Boundaries to Leaflet.js Map","cells":[{"id":0,"value":"md`# Adding GEOJSON with Pop-Ups of Houston Area Watershed Boundaries to Leaflet.js Map`","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":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":11,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"html`

Click on watershed polygons to bring up their name

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}