Leaflet Select Feature by hovering complete
HTML
<script src="http://leafletjs.com/examples/us-states.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<div id="map"></div>
CSS
#map {
height: 500px;
margin-top: 10px;
}
#montana {
background: rgba(255, 255, 0, 0.7);
padding: 3px;
cursor: pointer;
}
.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;
}
JavaScript
var test, highlighted_feature;
var map = L.map('map').setView([20.5937, 78.9629], 4);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
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 || e;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
}
var geojson;
function resetHighlight(e) {
geojson.resetStyle(e.target || e);
}
function onEachFeature(feature, layer) {
layer._polygonId = feature.id;
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight
});
}
geojson = L.geoJson(statesData, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
map.attributionControl.addAttribution('Population data © <a href="http://census.gov/">US Census Bureau</a>');
// Top right legend control
var legend = L.control({
position: 'topright'
});
legend.onAdd = function(map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 10, 20, 50, 100, 200, 500, 1000],
from, to, span, color, text;
for (var i = 0; i < grades.length; i++) {
from = grades[i]; // Zahlen setzen
to = grades[i + 1];
span = document.createElement("span");
span.classList.add("legendItem");
span.dataset.from = from;
span.dataset.to = to;
color = document.createElement("i");
color.style.background = getColor(from + 1);
...