react-leaflet-search
react-leaflet-search copied to clipboard
Custom location provider, need more documentation.
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.
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)
}
}
}