CODEWITHSUNDEEP
leaflet
edenLOL
edenLOL

Reputation: 23

Leaflet Spiderfier/MarkerCluster - Automatically spiderfy dynamic markers

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 :)

Upvotes: 1

Views: 4589

Answers (1)

user5770563
user5770563

Reputation: 57

I solve the problem like this, using fire('click') аfrom leaflet.

scope.spiderMarker - the marker, i want to spidrefy. In your case i think its playerArray[pokeCounter].marker

    try{
       scope.spiderMarker.fire('click')}
       catch (e) {
       console.log(e);
       };

Upvotes: 1

Related Questions