2a:null 2b:["$","title",null,{"children":"Adding GEOJSON with Pop-Ups of Houston Area Watershed Boundaries to Leaflet.js Map | Justin Gosses | Observable"}] 30: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); } 31:[] 2e:{"id":"38ad8a44787fded2","slug":"adding-geojson-with-pop-ups-of-houston-area-watershed-bound","title":"Adding GEOJSON with Pop-Ups of Houston Area Watershed Boundaries to Leaflet.js Map","thumbnail":"11f098ac45adea6712682968b7f27b05e6ca92592603ba0af203581ed53165cd","access_level":"public","create_time":"$D2018-01-31T17:18:48.922Z","update_time":"$D2021-11-28T03:48:51.458Z","view_time":null,"first_public_time":"$D2018-01-31T18:12:34.748Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"3168f49a68f07e98","login":"justingosses","name":"Justin Gosses","avatar_url":"https://avatars-next.observableusercontent.com/eba66f9b9de3134c0c22c453a1d562b450a8cf7f2274c4ed1ff16b7455312520","tier":"starter_2024"},"version":88,"publish_version":88,"role":null,"authored":false,"authors":[{"type":"individual","id":"44bc5e36abcab180","login":"justingosses","name":"Justin Gosses","avatar_url":"https://avatars-next.observableusercontent.com/eba66f9b9de3134c0c22c453a1d562b450a8cf7f2274c4ed1ff16b7455312520","tier":null}],"members":[{"type":"individual","id":"44bc5e36abcab180","login":"justingosses","name":"Justin Gosses","avatar_url":"https://avatars-next.observableusercontent.com/eba66f9b9de3134c0c22c453a1d562b450a8cf7f2274c4ed1ff16b7455312520","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"html`

Load d3.js v5

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

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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"watersheds = d3.json(\"https://cdn.rawgit.com/JustinGOSSES/a8d5ea2bbaf572450b309884269bd8ac/raw/a3f64167d2ecc1b7680bdf2c7822f3d0c39e1d2a/HarrisCounty_Watersheds_poly.geojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"html`

Load Leaflet.js

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

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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"html`

Click on watershed polygons to bring up their name

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"