henrythasler / Leaflet.Geodesic

Add-on to draw geodesic lines with leaflet
GNU General Public License v3.0
156 stars 27 forks source link

[question] is there a way to show tooltips or labels crossing the anti meridian? #89

Closed beebase closed 1 year ago

beebase commented 2 years ago

I tried binding tooltips like this but that doesn't work.

 const options = {
      radius: 1000 * 10,
      color: "red",
      fillOpacity: 1,
      fill: false,
      wrap: false,
    }
const marker = L.geodesiccircle(coord, options)
      .addTo(map)
      .on("click", onClickMarker)
    marker.bindTooltip(label, {
      permanent: true,
      direction: "top",
      interactive: true,
      offset: [0, 0],
    })

image

henrythasler commented 2 years ago

A geodesiccircle is just a polyline and I'm not sure if a tooltip here makes sense as it will not be centered to the circle automatically: image

I just tried with markers and it works just fine. The tooltip even moves when you move the marker. image

Maybe use these instead of a circle?

beebase commented 2 years ago

Thanks for your answer. I tried it with plain markers but the result remains the same. I managed to get it somewhat working by manipulating the marker coordinates (adding/substracting 360 lng.). As soon as distances exceed 180 degrees lng. , markers start to get confused. However, the geodesic lines are always perfectly generated. The trick for markers is probably to always stay within -180 and +180 degrees lng. of the common departure point of all the lines. I'm not too familiar with leaflet yet, but maybe I should try binding the markers together with the lines. (ATM I'm generating markers and lines separately in different coord. array loops, which I should optimise into one loop anyway.

Any tips are appreciated. I'll post a solution here for future ref. if I get something decent working.

Thanks.

henrythasler commented 2 years ago

I was using my multiline-nosplit example and just changed line 101 into:

var marker = L.marker(place, { draggable: true }).addTo(map).bindTooltip("Works!", {permanent: true, direction: "top", interactive: true, offset: [0, 0]});

to show the tooltips. Nothing else.

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.