[GIS] Changing anchor point for popup without marker using Leaflet

anchor-pointleafletopenstreetmappopup

Is it possible to change the position of the anchor point for the popup without using markers?

I was testing with this example. This code shows a popup, but I want to adjust the position of the anchor because it gets in front of a marker.

   var popup = L.popup()
    .setLatLng([testLat, testLng])
    .setContent("<div.... </div>")
    .openOn(map);

I already has markers and popups on the map and the position for those I get from a JSON-string. These popups opens when I click on a marker, but now I just want a simple popup to be visible when the map has loaded. I have tried to open one of the popup that I'm already have, but that does not seems to work. If that had worked, I didn't need to use a extra popup and change the anchor point for that popup because that is already done. This is a part of my code where I create the markers and bind them with popups.

Is there a way to open one of those popup instead?

// Add markers
for (i = 0; i < mapPos.length; i++) { 
marker = new L.marker([mapPos[i]["lat"],mapPos[i]["lng"]], {icon: numbers[1]}).addTo(map).bindPopup("<div>.... </div>");
}

Best Answer

Is it possible to change the position of the anchor point for the popup without using markers?

Yes.

If you read the API documentation for L.Popup, you should notice it inherits options from L.DivOverlay. One of those options is offset:

offset

type Point

default Point(0, 7)

The offset of the popup position. Useful to control the anchor of the popup when opening it on some overlays.

Therefore, you can do something like:

var popup = L.popup({ offset: L.point(20, 30) })
  .setLatLng([testLat, testLng])
  .setContent("<div.... </div>")
  .openOn(map);
Related Question