CODEWITHSUNDEEP
javascriptleafletmapbox
nathanbweb
nathanbweb

Reputation: 717

mapbox display multiple tooltips onload

I'm trying to display each map marker's tooltip onload without the need to hover or click to reveal it. Here is my attempt to chain the openPopup function to bindPopup:

function onEachFeature(feature, layer) {
        if (feature.properties && feature.properties.popupContent) {
            popupContent = feature.properties.popupContent;
        }
        layer.bindPopup(popupContent).openPopup();
    }

But the tooltips do not appear unless clicked.

fiddle

I see that this page of documentation offers the following function, but it is only for a single marker, not multiple ones. 

marker.eachLayer(function(m) {
  m.openPopup();
});

How do I display all markers onload?

Upvotes: 1

Views: 2125

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196112

Unfortunately this is how popups work in leaflet.

There is a small hack provided in https://stackoverflow.com/a/16707921/128165

/***  little hack starts here ***/
L.Map = L.Map.extend({
    openPopup: function (popup) {
        //        this.closePopup();  // just comment this
        this._popup = popup;

        return this.addLayer(popup).fire('popupopen', {
            popup: this._popup
        });
    }
}); /***  end of hack ***/

Once you add that to your code you can use

for (var o in overlays){
    overlays[o].eachLayer(function (m) {
        m.eachLayer(function(l){l.openPopup();});
    });
}

to iterate over all markers in your case and call their openPopup method

Demo at http://jsfiddle.net/46f2r/6/

Upvotes: 1

Related Questions