2f: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); }30:[{"id":"7ba8412c8949491daf73a33a0e4e919dcaeefe9a09368a719580672b2e06802bd70c637b4cafdf8ee3fb49a2aede37940fe643e07c162ded8e30010beed32a80","href":"https://static.observableusercontent.com/files/7ba8412c8949491daf73a33a0e4e919dcaeefe9a09368a719580672b2e06802bd70c637b4cafdf8ee3fb49a2aede37940fe643e07c162ded8e30010beed32a80","name":"us-states.json","type":"application/json","lastModified":1700058624795.143,"size":89264}] 2d:{"title":"Leaflet choropleth map in Observable","cells":[{"id":0,"value":"# Leaflet choropleth map in Observable","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":20,"value":"usStates = FileAttachment(\"us-states.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"html`\n