jawj / OverlappingMarkerSpiderfier-Leaflet

Deals with overlapping markers in the Leaflet maps API, Google Earth-style
253 stars 68 forks source link

Popups not populated for non-spiderfied markers #44

Open MelanieEmmajade opened 6 years ago

MelanieEmmajade commented 6 years ago

Marker popups show empty for any markers that are not spiderfied. Appears to be equivalent to this issue https://github.com/Leaflet/Leaflet.markercluster/issues/24. Markers that are spiderfied work fine. I am using the oms.min.js file with the timestamp / Mon 14 Oct 2013 10:54:59 BST /

magicmb commented 4 years ago

I too was struggling to get my head around all these empty marker popups I was getting until I gave up on the whole idea of triggering popups via the oms 'click' event listener altogether and suddenly all previously created Leaflet popups using bindPopup simply started to work out of the box alongside the oms Leaflet plugin.

Not sure if this was some sort of conflict as I already had created popups using bindPopup prior to adding oms & the sample event click code, but it works great for me now so I didn't feel the need to investigate further.

​ For the record the behaviour I experienced before commenting out the oms 'click' code was as follows:

​ Commenting out the oms listener 'click' code fixed the popup issue in my case.

var topographic = L.esri.basemapLayer('Topographic'),
var layer = L.layerGroup([]);
var map = L.map('map', { center: [52.2993, 5.1628], zoom: 13, maxZoom: 17, layers: [topographic, layer], fullscreenControl: true, fullscreenControlOptions: { position: 'topleft' } });

var oms = new OverlappingMarkerSpiderfier(map, { keepSpiderfied: true });

// var popup = new L.Popup({closeButton: false, offset: new L.Point(0.5, -24)});
oms.addListener('click', function(marker) {
  /* popup.setContent(marker.desc);
  popup.setLatLng(marker.getLatLng());
  map.openPopup(popup); */
});

var redMarker = L.AwesomeMarkers.icon({ prefix: 'fa', icon: 'circle', markerColor: 'red', iconColor: 'white'});

for (var i = 0; i < window.mapData.length; i ++) {
  var marker = L.marker(mapData.[lat, mapData.lon], {icon:redMarker}).bindPopup(mapData.title+mapData.description);
  marker.addTo(map);
  layer.addLayer(marker);
  oms.addMarker(marker);
}