27:null 28:["$","title",null,{"children":"Leaflet choropleth map in Observable | Éléonore | Observable"}] 2d:T874,{ const container = yield htl.html`

`; const map = L.map(container).setView([37.8, -96], 4); const geojson = L.geoJson(usStates, { style: style, onEachFeature: onEachFeature }).addTo(map); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 19, attribution: "© OpenStreetMap contributors" }).addTo(map); // Adding interaction function highlightFeature(e) { var layer = e.target; layer.setStyle({ weight: 2, color: '#666', dashArray: '', fillOpacity: 0.6 }); layer.bringToFront(); info.update(layer.feature.properties); } function resetHighlight(e) { geojson.resetStyle(e.target); info.update(); } function zoomToFeature(e) { map.fitBounds(e.target.getBounds()); } function onEachFeature(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, click: zoomToFeature }); } // Custom info control const info = L.control(); info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info" this.update(); return this._div; }; // method that we will use to update the control based on feature properties passed info.update = function (props) { this._div.innerHTML = '

US Population Density

' + (props ? '' + props.name + '
' + props.density + ' people / mi²' : 'Hover over a state'); }; info.addTo(map); // Custom legend var legend = L.control({position: 'bottomright'}); legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'), grades = [0, 10, 20, 50, 100, 200, 500, 1000], labels = []; // loop through our density intervals and generate a label with a colored square for each interval for (var i = 0; i < grades.length; i++) { div.innerHTML += ' ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+'); } return div; }; legend.addTo(map); }2e:[{"id":"7ba8412c8949491daf73a33a0e4e919dcaeefe9a09368a719580672b2e06802bd70c637b4cafdf8ee3fb49a2aede37940fe643e07c162ded8e30010beed32a80","href":"https://static.observableusercontent.com/files/7ba8412c8949491daf73a33a0e4e919dcaeefe9a09368a719580672b2e06802bd70c637b4cafdf8ee3fb49a2aede37940fe643e07c162ded8e30010beed32a80","name":"us-states.json","type":"application/json","lastModified":1700058624795.143,"size":89264}] 2b:{"id":"fd2ab5bec48e7577","slug":null,"title":"Leaflet choropleth map in Observable","thumbnail":"1474fc0056235a4cc728440059ef925b8ec7521b1de89f8beb2ad54da739957a","access_level":"public","create_time":"$D2023-11-15T14:12:17.612Z","update_time":"$D2023-11-15T18:00:55.674Z","view_time":null,"first_public_time":"$D2023-11-15T14:12:17.612Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"5a9a75a747cb01fe","login":"eleonore9","name":"Éléonore","avatar_url":"https://avatars-next.observableusercontent.com/f02bb17abd0c6c5bf2635bef76a16323ef091dbd4e41cbb1a5ed10e3ea21fbb5","tier":"starter_2024"},"version":119,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b0524eb6eebd4534","login":"eleonore9","name":"Éléonore","avatar_url":"https://avatars-next.observableusercontent.com/f02bb17abd0c6c5bf2635bef76a16323ef091dbd4e41cbb1a5ed10e3ea21fbb5","tier":null}],"members":[{"type":"individual","id":"b0524eb6eebd4534","login":"eleonore9","name":"Éléonore","avatar_url":"https://avatars-next.observableusercontent.com/f02bb17abd0c6c5bf2635bef76a16323ef091dbd4e41cbb1a5ed10e3ea21fbb5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Leaflet choropleth map in Observable","cells":[{"id":0,"value":"# Leaflet choropleth map in Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"### Trying out Leaflet choropleth map in Observable by reproducing a Leafletjs example (https://leafletjs.com/examples/choropleth/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"usStates = FileAttachment(\"us-states.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"html`\n