12

I want open a popup on bottom of my marker icon in Leaflet.

my code:

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);

var lati = 51.51;
var longi = -0.09;

var popupLocation1 = new L.LatLng(lati, longi);
var popupContent1 = 'This is a nice popup';

popup1 = new L.Popup();
popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);

var m1 = L.marker([ lati, longi ]).addTo(mymap);

m1.bindPopup(popup1);

m1.openPopup();

So I get a popup on top of my marker.

I want get a popup on bottom like:

enter image description here

  • Check out this Q/A, stackoverflow.com/questions/27144334/… – artwork21 May 18 '16 at 11:52
  • on your link is no working solution. Perhaps the comment is true: "what you could do is hook into the click of the marker and draw your own popup with custom code" No simple way for bottom popup? – Gerd May 18 '16 at 13:09
  • 1
    The current situation is the same as in artwork21's comment link, regarding your question for popup below the marker. See FranceImage's answer (stackoverflow.com/a/27144900/5108796) with proposed plugin. You could use that plugin or get inspiration from it to build your own custom popup. – ghybs May 18 '16 at 13:38
2

There is no native leaflet solution.

One other way is use https://github.com/erictheise/rrose

Nice Demo:

http://jsfiddle.net/asleepwalker/6m81vtad/

2

You can specify the offsets by using the popupAnchor options, but not where you would expect it. First, you need to specify an icon like this:

var myIcon = L.divIcon({ popupAnchor: [0, -30] });

You can then use this icon in your marker options:

var marker = L.marker(location, {
                 icon: myIcon
             }).bindPopup(function (marker) {...}); //Shortened

Now your popup opens up 30 px above your marker. This is not exactly what you asked for as you also need to place the little arrowish triangle on the top of your popup, but I think it's still worth mentioning.

1

I know that this is an old question, but you do not need to take the detour @Robert described in his reply.

As Popup is inheriting from DivOverlay, you can set the offset option directly when initializing the Popup:

    var popup = L.popup({
        offset: [0, -30]
    })
      .setLatLng(location)
      .setContent("Test Text")
      .openOn(mapId);

Read the docs: https://leafletjs.com/reference-1.5.0.html#popup

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.