[GIS] Marker position in Leaflet

leafletmarkerstooltip

I use 2 markers : Icon and Tooltip.
The problem is that given the sames Lon & Lat they are not at the same position.
The Icon position is right, the tooltip position not.
This is my js code for the 2 markers

//Tooltip
var marker = new L.marker([getUrlParameter("Lat0"), getUrlParameter("Lon0")], {
  opacity: 0,
});
marker.bindTooltip(getUrlParameter("D0") + "km", {
  permanent: true,
  offset: [0, 0],
});
marker.addTo(map);
// Icon
var Marker = L.icon({
  iconUrl: "Point.png",

  iconSize: [27, 32], // size of the icon
  iconAnchor: [13, 32], // point of the icon which will correspond to marker's location
  popupAnchor: [0, -30], // point from which the popup should open relative to the iconAnchor
});
var Lon = getUrlParameter("Lon");
var Lat = getUrlParameter("Lat");
var starts = new L.LayerGroup();
L.marker([Lat, Lon], { icon: Marker })
  .bindPopup(Lat + "<br>" + Lon)
  .addTo(starts);

and the result : the tooltip is on the left or on the right depending on the point position on the screen but shifted in both cases (Lat and Lon are the sames)

enter image description here enter image description here

Edit : the tooltip is binded to the L.marker.
When the marker is on the right of the middle of the screen the tooltip is on the left of the marker (last sample) by 15 pixels (and 25 pixels above), so I've set an offset of [15,25], it's now all right. But When the marker is on the left of the middle of the screen the tooltip is on the right of the marker (before last sample) by 15 pixels (and 25 pixels above), so with an offset of [15,25] it is 30 pixels to the right ! The Xoffset should be +15 or -15 depending on its position on the screen : how to do that ?
enter image description here

Best Answer

The behavior you are seeing, where tooltip offset has to be different, depending on left or right position of tooltip, is necessary in older versions of Leaflet. Fer example, I tried v1.5.4 and it still behaves that way.

If you have to use older version, there are two possible solutions. Since your tooltips are permanent, you can give them static 'right' alignment and then offset is also static:

marker.bindTooltip('This is my tooltip', {direction: 'right', offset: [-15, 25], permanent: true});

If you want tooltips left and right aligned, depending on the initial position, you can do that with checking initial position of marker and accordingly assign the tooltip:

function createCustomTooltip(marker, tooltipTxt) {
  var container = map.getContainer();
  var point = map.latLngToContainerPoint(marker.getLatLng());
  if (point.x > (container.clientWidth / 2)) {
    var side = 'left';
    var offsetX = 15;
    }
  else {
    var side = 'right';
    var offsetX = -15;
  }
  marker.bindTooltip(tooltipTxt, {direction: side, offset: [offsetX, 25], permanent: true});
}

createCustomTooltip(myMarker, 'This is my tooltip');

If you use the latest Leaflet version 1.7.1, you don't have to worry about tooltip position any more, offset should always be negative:

marker.bindTooltip('This is my tooltip', {offset: [-15, 25], permanent: true});
Related Question