27:null 28:["$","title",null,{"children":"Leaflet with GeoJSON | Shipeng Sun | Observable"}] 2d:T43f,{ const container = yield htl.html`

`; const map = L.map(container).setView([40.7678, -73.9645], 13); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap contributors" }).addTo(map); const nyBlockLayer = L.geoJSON(null).addTo(map); nyBlockLayer.addData(nyBlockPop); nyBlockLayer.getLayers().forEach( l => { if(l.feature.properties.TotalPop > minPop) { nyBlockLayer.resetStyle(l); l.on('mouseover', e => { l.setStyle({fillColor:'red', fillOpacity: 1.0}); }).on('mouseout', e=> { nyBlockLayer.resetStyle(l); }); } else { l.setStyle({fillColor: 'red', fillOpacity: 0.0, opacity: 0.0}); } }); //map.off(); map.on('dblclick', e => { map.zoomOut(1); }); map.on('keydown keypress', e => { //console.log(e.originalEvent.key); let keyVal = e.originalEvent.key; if(keyVal === 'h' || keyVal === 'H') { map.setView([40.7678, -73.9645], 18); } }); }2e:T44a,mapObj = { const container = yield htl.html`

`; const map = L.map(container).setView([40.7678, -73.9645], 13); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap contributors" }).addTo(map); const nyBlockLayer = L.geoJSON(null, { color: '#3388ff', // boundary color weight: 1, fillColor: 'blue', fillOpacity: 0.2 }).bindTooltip(l => { return "Census " + l.feature.properties.name + " has " + l.feature.properties.TotalPop + " residents."; }).addTo(map); nyBlockLayer.addData(nyBlockPop); let maxPop = -1, maxPopLayer = null; nyBlockLayer.getLayers().forEach( l => { if(l.feature.properties.TotalPop > maxPop) { maxPop = l.feature.properties.TotalPop maxPopLayer = l; } }); maxPopLayer.setStyle({fillColor: 'red', fillOpacity: 0.5}); //return {leafObj: map, maxBlockPop: maxPop, maxPopFeature: maxPopLayer.feature}; //return [maxPop, maxPopLayer.feature, map]; }2f:[{"id":"087e4dc842635b0e52b7471aacec06ad985838312d41e937a2c074d07fd63295f58af39afd99c2e2511b6fa2663b1f4ef1b0a47cce7ceab3f601837102355503","href":"https://static.observableusercontent.com/files/087e4dc842635b0e52b7471aacec06ad985838312d41e937a2c074d07fd63295f58af39afd99c2e2511b6fa2663b1f4ef1b0a47cce7ceab3f601837102355503","name":"ny_ny_block_pop.geojson","type":"application/geo+json","lastModified":1712971720294.892,"size":2689578}] 2b:{"id":"f4aba4072cc348ed","slug":null,"title":"Leaflet with GeoJSON","thumbnail":"d5dce777dcdf8157ddf0d5e88a5f8839ff6b1e7eb55c62b8cd116bfca9ffefd1","access_level":"public","create_time":"$D2024-04-13T01:28:40.294Z","update_time":"$D2025-04-28T22:18:19.094Z","view_time":null,"first_public_time":"$D2024-04-13T01:28:40.294Z","has_unpublished_edits":null,"fork":{"id":"06b1b41370b1c475","slug":null,"title":"Learn JavaScript Basics","owner":{"id":"cbbecd563af3e09e","login":"suncodeearth","name":"Shipeng Sun"}},"stars":1,"starred":false,"owner":{"type":"team","id":"cbbecd563af3e09e","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":"starter_2024"},"version":457,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9bcb43658e33a71c","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":null}],"members":[{"type":"individual","id":"9bcb43658e33a71c","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":null,"role":"editor"},{"type":"team","id":"cbbecd563af3e09e","login":"suncodeearth","name":"Shipeng Sun","avatar_url":"https://avatars-next.observableusercontent.com/73e879a63c42c4f132b2f40c14c8d981c338f55575077f2a34fa26292dd07c9f","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"7cfd303a81cea969","slug":"web-basics","title":"Leaflet for WebGIS","owner":{"id":"cbbecd563af3e09e","login":"suncodeearth","name":"Shipeng Sun"}},"type":"notebook","body":{"title":"Leaflet with GeoJSON","cells":[{"id":0,"value":"# Leaflet with GeoJSON","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"## GeoJSON and Leaflet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":419,"value":"Load a GeoJSON file and convert it to JavaScript Object","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"nyBlockPop = FileAttachment(\"ny_ny_block_pop.geojson\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"attrTable = {\n let attrTable = new Array(nyBlockPop.features.length).fill(null);\n\n nyBlockPop.features.forEach((v, i) => {\n attrTable[i] = v.properties;\n });\n\n return attrTable;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"Inputs.table(attrTable)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"

\n Loop through all features in the GeoJSON and find the feature with the max population and the max value itself.

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"{\n let maxPop = -1, maxPopFeature = null;\n nyBlockPop.features.forEach( function(f, i){\n if(f.properties.TotalPop > maxPop) {\n maxPop = f.properties.TotalPop;\n maxPopFeature = f;\n }\n } );\n\n return {maxPopulation: maxPop, maxPopFeature: maxPopFeature};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"

\nOnly show the blocks where populations are > ${minPop} set by the select Inputs below. \n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":439,"value":"\n

\nNote this approach will refresh the entire map, so that it flares. This does not work well for smooth changes controlled by slider. See [Leaflet Animation with Slider](https://observablehq.com/d/3878273db8f5b95d?collection=@suncodeearth/web-basics) in this collection for the approach.\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"viewof minPop = Inputs.select([100, 500, 1000, 2000, 4000], {value: 1000, label: \"Block Population\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"#### Render the block with the highest population differently","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"{\n return mapObj;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"