leaflet-geosearch Marker placed on wrong location

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/[email protected]/dist/leaflet.css"
      integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
      crossorigin=""
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/dist/geosearch.css"
    />
    <script
      src="https://unpkg.com/[email protected]/dist/leaflet.js"
      integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
      crossorigin=""
    ></script>
    <script src="https://unpkg.com/[email protected]/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!

Sep 01 '22 13:09 srThibaultP

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

Sep 14 '22 12:09 srThibaultP

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.

Oct 12 '22 14:10 sgibbes

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.

Jan 12 '23 09:01 srThibaultP

leaflet-geosearch leaflet-geosearch copied to clipboard

Marker placed on wrong location

leaflet-geosearch
leaflet-geosearch copied to clipboard