Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom location provider, need more documentation. #39

Open
Duoquote opened this issue Oct 16, 2020 · 1 comment
Open

Custom location provider, need more documentation. #39

Duoquote opened this issue Oct 16, 2020 · 1 comment

Comments

@Duoquote
Copy link

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.

@Gabriel-Almeida-Ajax
Copy link

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)
            }
        }
    }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants