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>
|
|
|
|
|
.state-info {
|
|
|
|
|
background: white;
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
box-shadow: 0 0 15px rgba(0,0,0,0.2);
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
font: 14px/1.5 Verdana, Tahoma, sans-serif;
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
2011-06-10 19:26:16 +08:00
|
|
|
<script src="../leaflet-include.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
2012-08-03 19:49:45 +08:00
|
|
|
<div id="map" style="height: 500px"></div>
|
|
|
|
|
<!--<input type="range" min="120" max="280" value="180" style="width: 800px" />-->
|
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">
|
|
|
|
|
|
2012-08-03 19:49:45 +08:00
|
|
|
var map = L.map('map').setView([37.8, -96.9], 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 © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
|
|
|
|
key: 'BC9A493B41014CAABB98F0471D759707',
|
|
|
|
|
styleId: 22677
|
|
|
|
|
}).addTo(map);
|
|
|
|
|
|
|
|
|
|
|
2012-08-03 19:49:45 +08:00
|
|
|
L.control.scale().addTo(map);
|
2011-12-15 18:20:09 +08:00
|
|
|
|
|
|
|
|
|
2012-08-03 20:40:16 +08:00
|
|
|
var info = L.Util.extend(L.control(), {
|
2011-12-15 18:20:09 +08:00
|
|
|
|
2012-08-03 20:40:16 +08:00
|
|
|
onAdd: function (map) {
|
|
|
|
|
var div = this._div = L.DomUtil.create('div', 'state-info');
|
|
|
|
|
info.setFeature(null);
|
|
|
|
|
return div;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
setFeature: function (feature) {
|
|
|
|
|
this._div.innerHTML = feature ?
|
|
|
|
|
'<b>' + feature.properties.name + '</b>' +
|
|
|
|
|
'<br>' + feature.properties.density + ' /mi<sup>2</sup>'
|
|
|
|
|
: 'Hover over a state';
|
|
|
|
|
}
|
|
|
|
|
});
|
2012-08-03 19:49:45 +08:00
|
|
|
|
2012-08-03 20:02:40 +08:00
|
|
|
info.addTo(map);
|
2012-08-03 19:49:45 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
var defaultStyle = {
|
|
|
|
|
weight: 2,
|
|
|
|
|
opacity: 1,
|
|
|
|
|
color: 'white',
|
|
|
|
|
dashArray: '3 4',
|
2012-08-03 20:08:49 +08:00
|
|
|
fillOpacity: 0.8
|
2012-08-03 19:49:45 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function style(feature) {
|
2012-08-03 20:40:16 +08:00
|
|
|
var value = Math.min((Math.log(feature.properties.density) / Math.LN10) / 3, 1),
|
|
|
|
|
hue = Math.round(160 * (1 - value)),
|
|
|
|
|
style = {fillColor: 'hsl(' + hue + ',90%,42%)'};
|
2012-08-03 19:49:45 +08:00
|
|
|
|
2012-08-03 20:40:16 +08:00
|
|
|
return L.Util.extend({}, defaultStyle, style);
|
2012-08-03 19:49:45 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function highlightFeature(e) {
|
|
|
|
|
var style = L.Util.extend({}, defaultStyle, {
|
|
|
|
|
weight: 3,
|
|
|
|
|
color: '#555',
|
|
|
|
|
dashArray: ''
|
|
|
|
|
});
|
|
|
|
|
e.target.setStyle(style).bringToFront();
|
2012-08-03 20:02:40 +08:00
|
|
|
info.setFeature(e.target.feature);
|
2012-08-03 19:49:45 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function resetHighlight(e) {
|
|
|
|
|
e.target.setStyle(defaultStyle);
|
|
|
|
|
info.setFeature(null);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onEachFeature(feature, layer) {
|
2012-08-03 20:02:40 +08:00
|
|
|
layer.feature = feature;
|
2012-08-03 20:40:16 +08:00
|
|
|
layer.on('mouseover', highlightFeature);
|
2012-08-03 19:49:45 +08:00
|
|
|
layer.on('mouseout', resetHighlight);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var geojson = L.geoJson(statesData, {
|
|
|
|
|
style: style,
|
|
|
|
|
onEachFeature: onEachFeature
|
|
|
|
|
}).addTo(map);
|
2011-12-15 18:20:09 +08:00
|
|
|
|
2011-06-10 19:26:16 +08:00
|
|
|
</script>
|
|
|
|
|
</body>
|
2011-12-15 18:20:09 +08:00
|
|
|
</html>
|
