2

I'm trying to render a map that draws a line between Anchorage and Hong Kong. The line works fine, however, the label for Anchorage is drawn technically in the correct place, but on the wrong part of the map. See picture:

enter image description here

As you can see, the marker is on Anchorage, but it wraps around to another copy of the map. How do I either repeat this marker so that it shows up near my line and on every repeating copy of the map, or make sure the marker stays within the relevant part of my map (near my line)?

Relevant code that draws markers on my map:

function draw_airports(map, flight, options) {
    const dep = new L.LatLng(parseFloat(flight.departure.latitude), parseFloat(flight.departure.longitude));
    const arr = new L.LatLng(parseFloat(flight.arrival.latitude), parseFloat(flight.arrival.longitude));
    L.circleMarker(dep, airport_settings).bindTooltip(flight.departure.name, tt_options).openTooltip().addTo(map);
    L.circleMarker(arr, airport_settings).bindTooltip(flight.arrival.name, tt_options).openTooltip().addTo(map);
}
Andrew De Forest
  • 6,829
  • 14
  • 39
  • 50
  • 1
    Does this answer your question? [Wrapping lines/polygons across the antimeridian in Leaflet.js](https://stackoverflow.com/questions/40532496/wrapping-lines-polygons-across-the-antimeridian-in-leaflet-js) – IvanSanchez Dec 09 '20 at 08:31

1 Answers1

1

You can use the first / last point of the line for the marker then it will always on the correct position.

Else you can add 360 to the lng.

const dep = new L.LatLng(parseFloat(flight.departure.latitude), parseFloat(flight.departure.longitude)+360);
Falke Design
  • 10,635
  • 3
  • 15
  • 30