1

I am trying to integrate OverlappingMarkerSpiderfier into my project, which is using leaflet. If I look at the demo, I have to believe that this works, however, I would like to load the map in a state that markers close to each-other are expended instead of having to click on any group. However, from the docs I can not really see how this can be done and I am worried about zoom events as well, as the demo collapses the groups on any zoom events.

So, my question is as follows: How can I use OverlappingMarkerSpiderfier for leaflet to expand all groups at map load and recalculate at map zoom?

EDIT:

This is how I tried to use it:

var omsOptions = {
    keepSpiderfied: true,
    nearbyDistance: 300
};
var oms = new OverlappingMarkerSpiderfier(map, omsOptions);
for (var cachedMarkerIndex in cachedMarkers) {
    oms.addMarker(cachedMarkers[cachedMarkerIndex]);
}

hoping that keepSpiderfied will keep them spiderfied, but not only it is not initializing the markers in a spiderfied way, but also it collapses the markers if I click on an arbitrary location on the map. I really do not intend to criticize the library, as I believe it is a wonderful idea and kudos for its author, however, if the features I need are not supported, then I will have to write my own library instead of using this one.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
  • Hm why you want to expand ALL groups on mapstart ? That would be same confusing as without the spiderfier. But i think you wanna do it only for a few groups. I will take a look – Manuel Nov 02 '16 at 12:57
  • @Manuel, this is desirable in my situation, as there are many markers and all of them must be shown. If the user has to click a marker in each group, then the page is not user-friendly, as I am showing works to be done and all the markers must be seen. Having to click at least a marker in each group would make it troublesome and if a marker could be in several groups, there is a danger of redundancy when they handle them. In cases when happyness is shown as in the demo the UX is best with that click-expand approach. But in my case that would defeat the benefits of the library. – Lajos Arpad Nov 02 '16 at 13:15

1 Answers1

2

Directly not.. there is no class method or option to leave the markers spiderfied. Regarding to the plugins script on line 39 there are some map eventListeners defined: @map.addEventListener(e, => @['unspiderfy']()) for e in ['click', 'zoomend']. So on each click or zoom event of the map the markers get unspiderfied. Hence you have to write your own library or enhance the existing one by adding an additional option.

EDIT (by Lajos Árpád):

Steps:

  1. I have added

    this.options = opt;

to the _Class function to make sure that the options can be used later.

  1. I have added

if (this.options.DisableSpiderfy) { //Spiderfy is disabled return; }

to the function assigned to p.spiderfy.

  1. I have added

if (this.options.DisableUnspiderfy) { //Unspiderfy was disabled return; }

to the function assigned to p["unspiderfy"].

Usage example:

        `var omsOptions = {
            keepSpiderfied: true,
            nearbyDistance: 100,
            DisableUnspiderfy: true
        };
        var oms;
        function drawSpiderMarkers(rows, options) {
            drawMarkers(rows, options); //This function draws markers by marker options
            if (!oms) {
                setTimeout(function() {
                    oms = new OverlappingMarkerSpiderfier(map, omsOptions);
                    for (var cachedMarkerIndex in cachedMarkers) {
                        oms.addMarker(cachedMarkers[cachedMarkerIndex]);
                    }
                    for (var cachedMarkerIndex in cachedMarkers) {
                        oms.spiderListener(cachedMarkers[cachedMarkerIndex]);
                    }
                }, 200);
            }
        }`

With these changes I have reached to the point where I can switch on/off spiderfy/unspiderfy to my liking, allowing me to spiderfy all markers from the start and to not unspiderfy them on an arbitrary click. Unfortunately this is a hack and will be uncompatible with future versions of the library, however, it is a good solution for now.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
Manuel
  • 2,334
  • 4
  • 20
  • 36
  • Manuel, thank you for the answer. Is there a way I can reverse a coffee script into Javascript? – Lajos Arpad Nov 02 '16 at 14:10
  • Nevermind, found this one: https://mikethedj4.github.io/Coffee2JS/. I will try out your idea, thanks again... – Lajos Arpad Nov 02 '16 at 14:13
  • Manuel, in the meantime I was able to solve the issue, but cannot accept your answer in its current state. If you allow me to edit your answer with the missing stuff, I will accept it. – Lajos Arpad Nov 02 '16 at 14:51
  • Okey that would be a pleasure to see your solution ! I am very interested in how you solved it – Manuel Nov 02 '16 at 16:37