CODEWITHSUNDEEP
javascriptleaflet
Andrew De Forest
Andrew De Forest

Reputation: 7338

Leaflet drawing marker on incorrect side of map

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);
}

Upvotes: 2

Views: 451

Answers (1)

Falke Design
Falke Design

Reputation: 11338

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);

Upvotes: 1

Related Questions