CODEWITHSUNDEEP
leafletmapboxmarkerclusterer
Leo
Leo

Reputation: 23

Leaflet Markercluster - tooltip on hover issue

I'm a newbie of javascript, trying to build an interactive map online, where some events should be triggered by clicking on markers and some just by hovering them. Managed to have the click part working, but, because of Markercluster plugin, I'm not sure where to use onEachFeature function for having the tooltip opened by hover a single marker. Anyone please can tell me what I'm doing wrong?

var geoJsonFeature = {
  type: 'FeatureCollection',
  features: 
   [
    {
    type: 'Feature',
    properties: {
        title: 'Title',
        page: 'some.html',
        'marker-color': '#000000',
        zoom: 7
    },
    geometry: {
        type: 'Point',
        coordinates: [12.583745,55.6750803]
    }
},
...
};

// access to mapbox api
L.mapbox.accessToken ='...';
var map = L.mapbox.map('map', 'example1234').setView([34, -37], 3);

function getTitle(marker) {
    return marker.feature.properties.title;
};

function getPage(marker) {
    return marker.feature.properties.page;
};

var markerGroup = new L.MarkerClusterGroup({showCoverageOnHover:false});

var geoJsonLayer = L.geoJson(geoJsonFeature, {
  onEachFeature: function (feature, layer) {
    var popupContent = getTitle(marker);
    layer.bindPopup(popupContent);
  }
});

markerGroup.addLayer(geoJsonLayer);

map.addLayer(markerGroup);

markerGroup.on('click', function(ev) {
  var marker = ev.layer;

  marker.on('click', function(ev) {
    if(map.getZoom() > marker.feature.properties.zoom) {
        map.setView(ev.latlng, map.getZoom());   
    } 
    else {
        map.setView(ev.latlng, marker.feature.properties.zoom);
    }
   });
  });
});

geoJsonLayer.on('mouseover', function(e) {
  e.layer.openPopup();
});

geoJsonLayer.on('mouseout', function(e) {
  e.layer.closePopup();
});

Upvotes: 2

Views: 5063

Answers (1)

iH8
iH8

Reputation: 28638

You need to use the onEachFeature option to get the individual markers and bind handlers to the mouseover and mouseout events:

onEachFeature: function (feature, layer) {
  layer.bindPopup(feature.properties.title);
  layer.on("mouseover", function () {
    layer.openPopup();
  });
  layer.on("mouseout", function () {
    layer.closePopup();
  });
}

Here's a working example on Plunker: http://plnkr.co/edit/hfjOWv3uCBFawDGqR3Ue?p=preview

Note: i'm not using ClusterMarker in this example but it should work just fine when using ClusterMarker

Upvotes: 3

Related Questions