Mouseover

by Leon Alvarez Del Canto

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://googledrive.com/host/0B55_4P6vMjhIdzUteXhjVDVHYjg/leaflet.ajax.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<div id="map"></div>

CSS

#map {
    height: 600px;
    width: 100%;
}

JavaScript

$('#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, offset: L.point(0,-20)});
                layer.on('mouseover', function() { layer.openPopup(); });
                layer.on('mouseout', function() { layer.closePopup(); });
            }
        },
        pointToLayer: function (feature, latlng) {
            return L.marker(latlng);
        }
    });

    map.addLayer(gpsMarker);
    map.fitBounds(gpsMarker.getBounds(), {padding: [0, 0]});
});