cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve geojson example more

Browse Source
This commit is contained in:
Vladimir Agafonkin 2012-08-03 15:57:59 +03:00
parent fc819e6f47
commit 5281dbe99d
1 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
debug/vector/geojson.html
View File

@ -10,12 +10,11 @@
<style> <style>
.state-info { .state-info {
background: white; background: rgba(255,255,255,0.8);
padding: 5px 10px; padding: 2px 10px 3px;
box-shadow: 0 0 15px rgba(0,0,0,0.2); box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px; border-radius: 5px;
font: 14px/1.5 Verdana, Tahoma, sans-serif; font: 16px/1.4 Arial, Helvetica, sans-serif;
text-align: right;
} }
</style> </style>
@ -38,9 +37,6 @@
}).addTo(map); }).addTo(map);
L.control.scale().addTo(map);
var info = L.Util.extend(L.control(), { var info = L.Util.extend(L.control(), {
onAdd: function (map) { onAdd: function (map) {
@ -50,10 +46,10 @@
}, },
setFeature: function (feature) { setFeature: function (feature) {
this._div.innerHTML = feature ? this._div.innerHTML = (feature ?
'<b>' + feature.properties.name + '</b>' + '<b>' + feature.properties.name + '</b>' +
'<br>' + feature.properties.density + ' /mi<sup>2</sup>' ': ' + feature.properties.density + ' /mi<sup>2</sup>'
: 'Hover over a state'; : 'Hover over a state');
} }
}); });
@ -77,24 +73,32 @@
} }
function highlightFeature(e) { function highlightFeature(e) {
var style = L.Util.extend({}, defaultStyle, { var layer = e.target;
weight: 3,
color: '#555', layer.bringToFront().setStyle({
weight: 5,
color: '#666',
dashArray: '' dashArray: ''
}); });
e.target.setStyle(style).bringToFront();
info.setFeature(e.target.feature); info.setFeature(e.target.feature);
} }
function resetHighlight(e) { function resetHighlight(e) {
e.target.setStyle(defaultStyle); e.target.setStyle(defaultStyle);
info.setFeature(null); info.setFeature(null);
} }
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) { function onEachFeature(feature, layer) {
layer.feature = feature; layer.feature = feature;
layer.on('mouseover', highlightFeature); layer.on('mouseover', highlightFeature);
layer.on('mouseout', resetHighlight); layer.on('mouseout', resetHighlight);
layer.on('click', zoomToFeature);
} }
var geojson = L.geoJson(statesData, { var geojson = L.geoJson(statesData, {