slutske22 / react-esri-leaflet

react components for esri-leaflet
https://codesandbox.io/s/github/slutske22/react-esri-leaflet/tree/master/examples/ts
MIT License
37 stars 5 forks source link

"Suggestions" show different results than the actual "results" #19

Closed nlafleur closed 1 year ago

nlafleur commented 1 year ago

Results in event "results" are different than the results shown in the "geocoder-control-suggestions".

These are the results when I type in "Botter,": image

The "response.suggestions" in the "requestsuccess" function is always an empty array. But it does fill the "geocoder-control-suggestions" with correct suggestions.

When I press enter, the "results" event returns an array of 4 items, which were not shown in the "suggestions". This is the object which is returned in the "results" event:

[
    {
        "text": "De Botter",
        "bounds": {
            "_southWest": {
                "lat": 52.29370000000005,
                "lng": 5.229480000000076
            },
            "_northEast": {
                "lat": 52.303700000000056,
                "lng": 5.239480000000076
            }
        },
        "score": 97.75,
        "latlng": {
            "lat": 52.29870000000005,
            "lng": 5.234480000000076
        },
        "properties": {
            "Loc_name": "World",
            "Status": "T",
            "Score": 97.75,
            "Match_addr": "De Botter",
            "LongLabel": "De Botter, Havenstraat 15, 1271 AB Huizen, NLD",
            "ShortLabel": "De Botter",
            "Addr_type": "POI",
            "Type": "Bar or Pub",
            "PlaceName": "De Botter",
            "Place_addr": "Havenstraat 15, 1271 AB Huizen",
            "StName": "Havenstraat",
            "StAddr": "Havenstraat 15",
            "Postal": "1271 AB",
            "Country": "NLD",
            "CntryName": "Nederland",
            "LangCode": "DUT"
        }
    },
    {
        "text": "De Botter",
        "bounds": {
            "_southWest": {
                "lat": 51.86031000000008,
                "lng": 4.614950000000074
            },
            "_northEast": {
                "lat": 51.87031000000008,
                "lng": 4.624950000000074
            }
        },
        "score": 97.75,
        "latlng": {
            "lat": 51.86531000000008,
            "lng": 4.619950000000074
        },
        "properties": {
            "Loc_name": "World",
            "Status": "T",
            "Score": 97.75,
            "Match_addr": "De Botter",
            "LongLabel": "De Botter, Voorn 11, 2986 JA Ridderkerk, NLD",
            "ShortLabel": "De Botter",
            "Addr_type": "POI",
            "Type": "School",
            "PlaceName": "De Botter",
            "Place_addr": "Voorn 11, 2986 JA Ridderkerk",
            "StName": "Voorn",
            "StAddr": "Voorn 11",
            "Postal": "2986 JA",
            "Country": "NLD",
            "CntryName": "Nederland",
            "LangCode": "DUT"
        }
    },
    {
        "text": "De Botter",
        "bounds": {
            "_southWest": {
                "lat": 52.34574000000003,
                "lng": 5.610380000000073
            },
            "_northEast": {
                "lat": 52.35574000000003,
                "lng": 5.620380000000073
            }
        },
        "score": 97.75,
        "latlng": {
            "lat": 52.35074000000003,
            "lng": 5.615380000000073
        },
        "properties": {
            "Loc_name": "World",
            "Status": "T",
            "Score": 97.75,
            "Match_addr": "De Botter",
            "LongLabel": "De Botter, Strandboulevard West, 3841 CS Harderwijk, NLD",
            "ShortLabel": "De Botter",
            "Addr_type": "POI",
            "Type": "International Food",
            "PlaceName": "De Botter",
            "Place_addr": "Strandboulevard West, 3841 CS Harderwijk",
            "StName": "Strandboulevard West",
            "StAddr": "Strandboulevard West",
            "Postal": "3841 CS",
            "Country": "NLD",
            "CntryName": "Nederland",
            "LangCode": "DUT"
        }
    },
    {
        "text": "De Botter",
        "bounds": {
            "_southWest": {
                "lat": 52.78139000000004,
                "lng": 5.836760000000022
            },
            "_northEast": {
                "lat": 52.79139000000004,
                "lng": 5.846760000000022
            }
        },
        "score": 97.75,
        "latlng": {
            "lat": 52.78639000000004,
            "lng": 5.841760000000022
        },
        "properties": {
            "Loc_name": "World",
            "Status": "T",
            "Score": 97.75,
            "Match_addr": "De Botter",
            "LongLabel": "De Botter, Burchtstraat 3, 8374 KC Kuinre, NLD",
            "ShortLabel": "De Botter",
            "Addr_type": "POI",
            "Type": "Bar or Pub",
            "PlaceName": "De Botter",
            "Place_addr": "Burchtstraat 3, 8374 KC Kuinre",
            "StName": "Burchtstraat",
            "StAddr": "Burchtstraat 3",
            "Postal": "8374 KC",
            "Country": "NLD",
            "CntryName": "Nederland",
            "LangCode": "DUT"
        }
    }
]

I removed some of the unnecessary properties.

My code:

<EsriLeafletGeoSearch
          useMapBounds={false}
          position={control.position}
          allowMultipleResults={true}
          expanded={true}
          eventHandlers={{
            results: (data) => {
              // ... me creating a marker for each data result..
            }
          }}
          placeholder={t("Zoeken naar plaatsen of adressen")}
          title={t("Locatie zoeken")}
          providers={{
            arcgisOnlineProvider: {
              apikey: ... my apikey,
              countries: ["NLD"],
              maxResults: 10
            }
          }}
/>

When I set "AllowMultipleResults" to false, the suggestions stay the same but when I press enter, I receive 0 results.

I also tried setting the "categories" but this has no effect.

In short: the "suggestions" show different results than the actual "results".

Versions:

 "esri-leaflet": "3.0.10",
    "esri-leaflet-geocoder": "3.1.4",
    "esri-leaflet-vector": "4.0.1",
    "leaflet": "1.9.3",
    "react-esri-leaflet": "2.0.1",
    "react-leaflet": "4.2.1"

Thanks

slutske22 commented 1 year ago

This sounds more like an issue with esri-leaflet-geocoder than with react-esri-leaflet. Do you get the expected behavior when you write your code without react, i.e. with vanilla leaflet, esri-leaflet, and react-esri-leaflet? If the same thing happens with a vanilla version of your code, you'll want to open an issue with the esri-leaflet-geocoder repo.