leaflet/docs/examples/choropleth/example.md

layout, title, css

layout	title	css
tutorial_frame	Choropleth Tutorial	#map { width: 800px; height: 500px; } .info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; } .legend { text-align: left; line-height: 18px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }

<script type="text/javascript" src="us-states.js"></script> <script type="text/javascript"> const map = L.map('map').setView([37.8, -96], 4); const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(map); // control that shows state info on hover const info = L.control(); info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); this.update(); return this._div; }; info.update = function (props) { const contents = props ? `${props.name}
${props.density} people / mi<sup>2</sup>` : 'Hover over a state'; this._div.innerHTML = `

US Population Density

${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 = L.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({ mouseover: highlightFeature, mouseout: resetHighlight, click: zoomToFeature }); } map.attributionControl.addAttribution('Population data © US Census Bureau'); const legend = L.control({position: 'bottomright'}); legend.onAdd = function (map) { const div = L.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(` ${from}${to ? `–${to}` : '+'}`); } div.innerHTML = labels.join('
'); return div; }; legend.addTo(map); </script>