Платформа ЦРНП "Мирокод" для разработки проектов
https://git.mirocod.ru
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
172 lines
3.4 KiB
172 lines
3.4 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Leaflet debug page</title> |
|
|
|
<link rel="stylesheet" href="../../dist/leaflet.css" /> |
|
|
|
<link rel="stylesheet" href="../css/screen.css" /> |
|
|
|
<style> |
|
#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; |
|
} |
|
</style> |
|
|
|
<script type="text/javascript" src="../../build/deps.js"></script> |
|
<script src="../leaflet-include.js"></script> |
|
</head> |
|
<body> |
|
|
|
<div id="map"></div> |
|
|
|
<script type="text/javascript" src="us-states.js"></script> |
|
<script type="text/javascript"> |
|
|
|
var map = L.map('map').setView([37.8, -96], 4); |
|
|
|
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { |
|
attribution: '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors', |
|
}).addTo(map); |
|
|
|
|
|
// control that shows state info on hover |
|
var info = L.control(); |
|
|
|
info.onAdd = function (map) { |
|
this._div = L.DomUtil.create('div', 'info'); |
|
this.update(); |
|
return this._div; |
|
}; |
|
|
|
info.update = function (props) { |
|
this._div.innerHTML = '<h4>US Population Density</h4>' + (props ? |
|
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>' |
|
: 'Hover over a state'); |
|
}; |
|
|
|
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) { |
|
var layer = e.target; |
|
|
|
layer.setStyle({ |
|
weight: 5, |
|
color: '#666', |
|
dashArray: '', |
|
fillOpacity: 0.7 |
|
}); |
|
|
|
if (!L.Browser.ie) { |
|
layer.bringToFront(); |
|
} |
|
|
|
info.update(layer.feature.properties); |
|
} |
|
|
|
var geojson; |
|
|
|
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 |
|
}); |
|
} |
|
|
|
geojson = L.geoJson(statesData, { |
|
style: style, |
|
onEachFeature: onEachFeature, |
|
attribution: 'Population data © <a href="http://census.gov/">US Census Bureau</a>' |
|
}); |
|
|
|
geojson.addTo(map); |
|
|
|
|
|
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 = [], |
|
from, to; |
|
|
|
for (var i = 0; i < grades.length; i++) { |
|
from = grades[i]; |
|
to = grades[i + 1]; |
|
|
|
labels.push( |
|
'<i style="background:' + getColor(from + 1) + '"></i> ' + |
|
from + (to ? '–' + to : '+')); |
|
} |
|
|
|
div.innerHTML = labels.join('<br>'); |
|
return div; |
|
}; |
|
|
|
legend.addTo(map); |
|
|
|
</script> |
|
</body> |
|
</html>
|
|
|