2

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

5
  • 1
  • tooltipAnchor is the coordinates of the point from which tooltips will "open", relative to the icon anchor. I don't have any Icon associated to the tooltip. The problem is that an Icon displays exactly at the point LatLon. A Tooltip (alone) does not.
    – Hervé
    Apr 27 at 14:37
  • 1
    Your tooltip is not "alone": it is bound to the marker, and therefore linked to a icon. Apr 27 at 15:25
  • OK right : the tooltip is binded to the L.marker
    – Hervé
    Apr 28 at 8:17
  • 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 ?
    – Hervé
    Apr 28 at 8:25
1

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});
15
  • This is not a solution because I want the tooltips to be permanent. Is it possible to reach this using someting else than a tooltip ? I just want "stickers" attached at Lat/Lng points.
    – Hervé
    Apr 30 at 12:17
  • Tooltip created with this solution is permanent in the sense that once you define/create tooltip with the createCustomTooltip, this tooltip will work all the time. If you can find better solution, go ahead.
    – TomazicM
    Apr 30 at 12:46
  • I don't understand : on one hand you wrote "Tooltip with desired position is dynamically created and displayed on marker mouseover" and now "Tooltip created with this solution is permanent"; does the tooltip appear permanently or only at mouseover ? I would like permanent labels whether they are in the form of tooltips or whatever.
    – Hervé
    May 1 at 13:06
  • I've tried your function var marker = new L.marker([Lat,Lon], { opacity: 0 }); createCustomTooltip(marker, Dist+"km<br>"+Time), marker.addTo(map); I don't see any tooltip.
    – Hervé
    May 1 at 13:41
  • See working JSFiddle at jsfiddle.net/TomazicM/d1m3ht2u. For some strange reason (probably due to JSFiddle environment), offset offsetX has to be negative for both left and right side.
    – TomazicM
    May 1 at 15:03

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.