VladPolskiy/leaflet
1
0
Fork 0
mirror of https://github.com/Leaflet/Leaflet.git synced 2025-08-16 16:45:22 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

improve geojson example colors, add legend

Browse Source
This commit is contained in:
mourner
2012-08-03 23:50:14 +03:00
parent ce83a8b1be
commit fc1e6669ab
2 changed files with 128 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
debug/vector/geojson.html
View File

@ -9,12 +9,36 @@
<link rel="stylesheet" href="../css/screen.css" />
<style>
.state-info {
#map {
width: 800px;
height: 500px;
}
.info {
background: rgba(255,255,255,0.8);
padding: 2px 10px 3px;
padding: 6px 8px;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
font: 16px/1.4 Arial, Helvetica, sans-serif;
font: 14px/16px Arial, Helvetica, sans-serif;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.legend {
text-align: left;
line-height: 18px;
color: #555;
}
.legend-color {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
@ -22,13 +46,12 @@
</head>
<body>
<div id="map" style="height: 500px"></div>
<!--<input type="range" min="120" max="280" value="180" style="width: 800px" />-->
<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.9], 4);
var map = L.map('map').setView([37.8, -96], 4);
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',
@ -37,39 +60,46 @@
}).addTo(map);
// control that shows state info on hover
var info = L.Util.extend(L.control(), {
onAdd: function (map) {
var div = this._div = L.DomUtil.create('div', 'state-info');
info.setFeature(null);
var div = this._div = L.DomUtil.create('div', 'info');
this.update();
return div;
},
setFeature: function (feature) {
this._div.innerHTML = (feature ?
'<b>' + feature.properties.name + '</b>' +
': ' + feature.properties.density + ' /mi<sup>2</sup>'
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);
}).addTo(map);
var defaultStyle = {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3 4',
fillOpacity: 0.8
dashArray: '3',
fillOpacity: 0.7
};
function style(feature) {
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%)'};
// 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';
}
return L.Util.extend({}, defaultStyle, style);
function style(feature) {
return L.Util.extend({}, defaultStyle, {
fillColor: getColor(feature.properties.density)
});
}
function highlightFeature(e) {
@ -78,16 +108,17 @@
layer.bringToFront().setStyle({
weight: 5,
color: '#666',
dashArray: ''
dashArray: '',
fillOpacity: 0.7
});
info.setFeature(e.target.feature);
info.update(e.target.feature.properties);
}
function resetHighlight(e) {
e.target.setStyle(defaultStyle);
info.setFeature(null);
info.update();
}
function zoomToFeature(e) {
@ -106,6 +137,25 @@
onEachFeature: onEachFeature
}).addTo(map);
// legend control
L.Util.extend(L.control({position: 'bottomright'}), {
onAdd: function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 10, 20, 50, 100, 200, 500, 1000],
html = '';
for (var i = 0; i < grades.length; i++) {
html +=
'<span class="legend-color" style="background:' + getColor(grades[i] + 1) + '"></span>' +
grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] : '+') + '<br />';
}
div.innerHTML = html;
return div;
}
}).addTo(map);
</script>
</body>
</html>

102
debug/vector/us-states.js
View File

File diff suppressed because one or more lines are too long