Marker placed on wrong location

srThibaultP commented 1 year ago

Hello,

I'm trying to understand why my marker is placed in the wrong location while using the GeoApiFrProvider.

For example, when you type the post code '42720' and selecting the third option 'Vougy' you will see that result:

As you can see, there's a difference of two degrees between the marker placed by leaflet-geosearch and the current location.

The code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
      integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
      crossorigin=""
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet-geosearch@3.6.1/dist/geosearch.css"
    />
    <script
      src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
      integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
      crossorigin=""
    ></script>
    <script src="https://unpkg.com/leaflet-geosearch@3.6.1/dist/geosearch.umd.js"></script>
  </head>
  <body>
    <div id="map" style="width: 600px; height: 400px"></div>
    <script>
      var map = L.map("map").setView([0, 0], 1);

      var tiles = L.tileLayer(
        "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
        {
          maxZoom: 19,
          attribution:
            '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        }
      ).addTo(map);

      function onMapClick(e) {
        L.popup({ autoClose: false, closeOnClick: null })
          .setLatLng(e.latlng)
          .setContent(e.latlng.toString())
          .openOn(map);
      }

      map.on("click", onMapClick);

      const geocodageAdresse = new GeoSearch.GeoSearchControl({
        provider: new GeoSearch.GeoApiFrProvider(),
        style: "bar",
        popupFormat: function (data) {
          return data.query.data.y + ", " + data.query.data.x;
        },
      });

      geocodageAdresse.addTo(map);
    </script>
  </body>
</html>

Thanks in advance!

srThibaultP commented 1 year ago

Sorry for the ping @patou but maybe you have an idea why I have this issue ?

sgibbes commented 1 year ago

Hi, I also have a similar issue only its with using the GoogleProvider.

I identified a road intersection on the map, and dropped a point at that intersection, and got the coordinates - 33.678179, -116.185082.

I checked in google maps and those coordinates land at the same intersection.

I then put the SAME coordinates into the geosearch bar, and the point gets dropped slightly off that intersection at 33.678003, -116.184864.

This does not happen when using the ESRI provider though.

I will continue to search for this issue in the google maps api issues tracker and stack overflow, but so far haven’t found anyone mentioning this already. If you know of a fix, please share! Thank you.

srThibaultP commented 1 year ago

After looking at the library requests, I found out that when you select an address in the list, the library will request the API a second time, changing the information between the first result and the second one. Doing the "monkey patch" mentioned in https://github.com/smeijer/leaflet-geosearch/issues/288#issuecomment-901960093 fixed my issue.

smeijer / leaflet-geosearch

Marker placed on wrong location #338