Full Choropleth Example

<script type="text/javascript" src="us-states.js"></script> <script type="module"> import {LeafletMap, TileLayer, Control, DomUtil, GeoJSON} from 'leaflet'; const map = new LeafletMap('map').setView([37.8, -96], 4); const tiles = new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }).addTo(map); // control that shows state info on hover const info = new Control(); info.onAdd = function (map) { this._div = DomUtil.create('div', 'info'); this.update(); return this._div; }; info.update = function (props) { const contents = props ? `<b>${props.name}</b> ${props.density} people / mi<sup>2</sup>` : 'Hover over a state'; this._div.innerHTML = `<h4>US Population Density</h4>${contents}`; }; info.addTo(map); // get color depending on population density value function getColor(d) { return d > 1000 ? '#800026' : d > 500 ? '#BD0026' : d > 200 ? '#E31A1C' : d > 100 ? '#FC4E2A' : d > 50 ? '#FD8D3C' : d > 20 ? '#FEB24C' : d > 10 ? '#FED976' : '#FFEDA0'; } function style(feature) { return { weight: 2, opacity: 1, color: 'white', dashArray: '3', fillOpacity: 0.7, fillColor: getColor(feature.properties.density) }; } function highlightFeature(e) { const layer = e.target; layer.setStyle({ weight: 5, color: '#666', dashArray: '', fillOpacity: 0.7 }); layer.bringToFront(); info.update(layer.feature.properties); } /* global statesData */ const geojson = new GeoJSON(statesData, { style, onEachFeature }).addTo(map); function resetHighlight(e) { geojson.resetStyle(e.target); info.update(); } function zoomToFeature(e) { map.fitBounds(e.target.getBounds()); } function onEachFeature(feature, layer) { layer.on({ pointerover: highlightFeature, pointerout: resetHighlight, click: zoomToFeature }); } map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>'); const legend = new Control({position: 'bottomright'}); legend.onAdd = function (map) { const div = DomUtil.create('div', 'info legend'); const grades = [0, 10, 20, 50, 100, 200, 500, 1000]; const labels = []; let from, to; for (let i = 0; i < grades.length; i++) { from = grades[i]; to = grades[i + 1]; labels.push(`<i style="background:${getColor(from + 1)}"></i> ${from}${to ? `&ndash;${to}` : '+'}`); } div.innerHTML = labels.join(' '); return div; }; legend.addTo(map); </script>