Leaflet Spiderfier/MarkerCluster - Automatically spiderfy dynamic markers

634 views
Skip to first unread message

edenLOL

unread,
Jan 7, 2016, 6:23:46 PM1/7/16
to Leaflet
I'm building an online version of a boardgame using Leaflet as the viewport.

My source: https://github.com/edenLOL/gotta-chug-em-all/tree/master


What I'm trying to achieve, is a way to spiderfy/spread out markers that land on the same square as each other, including when they move past each other.


I'm using https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet to Spiderfy the markers, which appears to work when clicking the markers.



However, I need these markers to be spiderfied always, without requiring a click event. So I set keepSpiderfied: true for the spiderfier object (oms).

var options = {  //**spiderfier
   keepSpiderfied: true,
   nearbyDistance: 120
};
oms = new OverlappingMarkerSpiderfier(map, options); //**spiderfier
 

But this doesn't work. I can't seem to load the markers in a spiderfied state, it always requires a click to spiderfy them.


For context, markers are generated dynamically during a prompt before the user sees the map.


('#playerIcons > table > tbody > tr > td').on('click', function(){
    pokemonSelected = $(this).attr('class');
    if ( !$(this).hasClass('pokemonSelected') ){
        playerArray[pokeCounter].pokemon = ''+ pokemonSelected +'';
        playerArray[pokeCounter].marker = L.marker([playerArray[pokeCounter].coords[0], playerArray[pokeCounter].coords[1]], {
                                                icon: window[pokemonSelected]
                                            }).addTo(map);
        oms.addMarker(playerArray[pokeCounter].marker)  //**spiderfier
        pokeCounter += 1;        
    } else {
        return false;
    };
});
 

I've also tried using Leaflet/Leaflet.markercluster. This works to an extent, and spiderfies the Markers at defined zoom levels, however the markers don't move, and stay stacked on top of each other.


What am I missing here that could be causing these issues? I don't mind using either Spiderfier or MarkerCluster, as both should be able to provide the solution I'm looking for once either issue is fixed.


Spiderfier: Markers need to spiderfy automatically


MarkerCluster: Markers don't physically move when spiderfying out of cluster


Note: If you decide to open index.html, be aware the Pokemon theme song will autoplay in the background on page load (until the map is drawn), so check your volume :)


StackOverflow link: http://stackoverflow.com/questions/34665948/leaflet-spiderfier-markercluster-automatically-spiderfy-dynamic-markers

markstev...@gmail.com

unread,
Jul 1, 2022, 5:22:38 PMJul 1
to Leaflet
Hello, I'm wondering if anybody has figured out how to spiderfy by default.  pls msg me directly 
Reply all
Reply to author
Forward
0 new messages