0
votes

I'm using React Leaflet. When a user clicks on the map, I retrieve the coordinates and a marker is set on that. Everything works on the map, but the map is used as a way to retrieve weather data for the set location.

Explanation

Here is a picture which might help illustrate the problem I'm facing Map with offsetted longitudes

At the top I added longitudes values for each "piece" of earth.

There is a marker with "true" longitude which is -0.09°

On the left earth, the same location would return -360.09° longitude

On the right earth, the same location would return 359.91° longitude

I retrieve latitude and longitude with this piece of code:

setMarker = e => {
    this.props.updateLocation({
      lat: e.latlng.lat,
      lng: e.latlng.lng,
    })
}

The problem

The problem I'm facing is, if I pass down a longitude value to the weather API thats out of the allowed ranges (> -180° && < 180°), it doesn't return anything, cause that longitude, of course, doesn't exist.

Is there a method that returns the "true" latitude and longitude?

If this doesn't exist, how can I disable the map scrolling (allow only one earth to appear)? Or just allow placing a marker inside the first earth? I am unsure what is the best approach for this, and the leaflet documentation is confusing me as I don't understand some of the terminology.

1

1 Answers

0
votes

After more searching I have found a built in method that does exactly what i want it to.

Found it on this GitHub issue https://github.com/Leaflet/Leaflet/issues/1885#issuecomment-91395167

To get actual latitude and longitude on a mouse click, no matter on which earth you click, you use the wrap() method on latlng:

event.latlng.wrap()

This returns an object, e.g.

{
  lat: 63.51385990617828,
  lng: 173.671875
}