Leaflet/debug/vector/geojson.html

174 lines
3.7 KiB
HTML
Raw Permalink Normal View History

2011-06-10 19:26:16 +08:00
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
2011-12-15 18:20:09 +08:00
2011-06-10 19:26:16 +08:00
<link rel="stylesheet" href="../css/screen.css" />
2011-12-15 18:20:09 +08:00
2012-08-03 20:02:40 +08:00
<style>
#map {
width: 800px;
height: 500px;
}
.info {
padding: 6px 8px;
2012-08-04 16:43:55 +08:00
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
2012-08-03 20:02:40 +08:00
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;
}
2012-08-04 16:43:55 +08:00
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
2012-08-03 20:02:40 +08:00
}
</style>
2011-06-10 19:26:16 +08:00
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map"></div>
2011-06-10 19:26:16 +08:00
2012-08-03 19:49:45 +08:00
<script type="text/javascript" src="us-states.js"></script>
2011-06-10 19:26:16 +08:00
<script type="text/javascript">
var map = L.map('map').setView([37.8, -96], 4);
2011-12-15 18:20:09 +08:00
2012-08-03 20:40:16 +08:00
var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
key: 'BC9A493B41014CAABB98F0471D759707',
2012-08-04 16:43:55 +08:00
styleId: 998
2012-08-03 20:40:16 +08:00
}).addTo(map);
// control that shows state info on hover
2012-08-07 16:56:48 +08:00
var info = L.control();
2012-08-03 19:49:45 +08:00
2012-08-07 16:56:48 +08:00
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);
2012-08-03 19:49:45 +08:00
// 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';
}
2012-08-03 19:49:45 +08:00
function style(feature) {
2012-08-04 16:43:55 +08:00
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.density)
2012-08-04 16:43:55 +08:00
};
2012-08-03 19:49:45 +08:00
}
function highlightFeature(e) {
2012-08-03 20:57:59 +08:00
var layer = e.target;
2012-08-08 17:18:05 +08:00
layer.setStyle({
2012-08-03 20:57:59 +08:00
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
2012-08-03 19:49:45 +08:00
});
2012-08-03 20:57:59 +08:00
2012-08-08 17:18:05 +08:00
if (!L.Browser.ie) {
layer.bringToFront();
}
2012-08-04 16:43:55 +08:00
info.update(layer.feature.properties);
2012-08-03 19:49:45 +08:00
}
2012-08-04 16:43:55 +08:00
var geojson;
2012-08-03 20:57:59 +08:00
2012-08-04 16:43:55 +08:00
function resetHighlight(e) {
geojson.resetStyle(e.target);
info.update();
2012-08-03 19:49:45 +08:00
}
2012-08-03 20:57:59 +08:00
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
2012-08-03 19:49:45 +08:00
function onEachFeature(feature, layer) {
2012-08-04 16:43:55 +08:00
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
2012-08-03 19:49:45 +08:00
}
2012-08-04 16:43:55 +08:00
geojson = L.geoJson(statesData, {
2012-08-03 19:49:45 +08:00
style: style,
onEachFeature: onEachFeature
}).addTo(map);
2011-12-15 18:20:09 +08:00
2012-08-07 16:56:48 +08:00
map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>');
2012-08-04 16:43:55 +08:00
2012-08-07 16:56:48 +08:00
var legend = L.control({position: 'bottomright'});
2012-08-07 16:56:48 +08:00
legend.onAdd = function (map) {
2012-08-07 16:56:48 +08:00
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 ? '&ndash;' + to : '+'));
}
2012-08-04 16:43:55 +08:00
2012-08-07 16:56:48 +08:00
div.innerHTML = labels.join('<br>');
return div;
};
legend.addTo(map);
2011-06-10 19:26:16 +08:00
</script>
</body>
2011-12-15 18:20:09 +08:00
</html>