react-leaflet-search icon indicating copy to clipboard operation
react-leaflet-search copied to clipboard

Custom location provider, need more documentation.

Open Duoquote opened this issue 5 years ago • 1 comments

As there is no Google Location provider #8 I am trying to add my own, but I don't know what to return back exactly. What I think returning would work is not working.

Current state is:

<Search
  position = "topleft"
  inputPlaceholder = "Arama yap"
  customProvider = {
    {
      search: async (inputVal) => {
        return new Promise((res, rej) => {
          axios.get("https://maps.googleapis.com/maps/api/place/findplacefromtext/json", {
              params: {
                key: GAPI_KEY,
                fields: "formatted_address,name,geometry",
                inputtype: "textquery",
                input: inputVal
              }
            })
            .then((response) => {
              console.log(response);
              res(response.data.candidates.map(data => {
                return {
                  info: {
                    bounds: data.geometry.viewport,
                    latitude: data.geometry.location.lat,
                    longitude: data.geometry.location.lng,
                    name: data.formatted_address,
                  },
                  raw: response,
                }
              }))
            })
        })
      }
    }
  }
  showMarker = {
    false
  }
  // zoom={7}
  closeResultsOnClick = {
    true
  }
  openSearchOnLoad = {
    false
  }
\>

Resolving the promise works as searching... text goes away but I can't get it work.

Duoquote avatar Oct 16 '20 09:10 Duoquote

const customProvider = {
        search: async (inputValue) => {
            const bounds = [new LatLng(), new LatLng()]
            let boundsUrlComponent = "";
            let regionUrlComponent = "";

            const reversedBounds = bounds.reduce((acc, b) => [...acc, b.lng, b.lat], []);
            boundsUrlComponent = `&bounded=1&viewbox=${reversedBounds.join(",")}`;

            regionUrlComponent = `&countrycodes=${"*"}`;

            let url = `https://nominatim.openstreetmap.org/search?format=json&addressdetails=1&polygon_svg=1&namedetails=1${boundsUrlComponent}${regionUrlComponent}&q=${inputValue}`;

            var res = await fetch(url)

            res = res.ok && await res.json() || null

            console.log(res)

            return {
                info: res.filter((value) => value.address.road != undefined && value.address.neighbourhood != undefined).map((value) => {
                    return {
                        bounds: value.boundingBox,
                        latitude: value.lat,
                        longitude: value.lon,
                        name: `${value.address.road}${value.address.house_number != undefined && ", " + value.address.house_number || ", S/N"}, ${value.address.neighbourhood}, ${value.address.postcode}`
                    }
                }),
                raw: JSON.stringify(res)
            }
        }
    }

Gabriel-Almeida-Ajax avatar Jul 02 '21 23:07 Gabriel-Almeida-Ajax