I've tried to make a MouseOver Markers Popup since a couple of days, I'm using Leaflet. I know some solutions I've read in many forums, but I wanna make it work with GeoJSON-Points and I haven't found a solution yet.
Here is a working example, for click popups only:
$('#map').each(function () {
// map initialization
map = new L.map('map');
var gjsonMarker = [{
"type": "Feature",
"properties": {
"name": "start",
"popupContent": "Portoferraio"
},
"geometry": {
"type": "Point",
"coordinates": [10.3163552, 42.8072368, 0.0]
}
},
{
"type": "Feature", "properties": { "name": "stop", "popupContent": "Marciana Marina" },
"geometry": { "type": "Point", "coordinates": [10.1970935, 42.8069535, 0.0] }
},
{
"type": "Feature", "properties": { "name": "stop", "popupContent": "Bastia" },
"geometry": { "type": "Point", "coordinates": [9.4520402, 42.6943563, 0.0] }
},
{
"type": "Feature", "properties": { "name": "stop", "popupContent": "Campoloro" },
"geometry": { "type": "Point", "coordinates": [9.5417333, 42.3393521, 0.0] }
},
{
"type": "Feature", "properties": { "name": "stop", "popupContent": "Cavo" },
"geometry": { "type": "Point", "coordinates": [10.422377586, 42.859476028, 0.0] }
}];
gpsMarker = new L.geoJson(gjsonMarker, {
onEachFeature: function(feature, layer) {
if (feature.properties && feature.properties.popupContent) {
layer.bindPopup(feature.properties.popupContent, {closeButton: false});
}
},
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng);
}
});
map.addLayer(gpsMarker);
map.fitBounds(gpsMarker.getBounds(), {padding: [0, 0]});
});
Any ideas how to make the Popup with MouseOver effect, and when I leave the point the popup must be hidden again.
Greets!
No comments:
Post a Comment