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.
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:
I have added
this.options = opt;
to the _Class
function
to make sure that the options can be used later.
if (this.options.DisableSpiderfy) {
//Spiderfy is disabled
return;
}
to the function
assigned to p.spiderfy
.
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.