Integrating other geo-encoders (such as photon) (code example included)

[Zzz-ams]

Description

What kind of feature you are suggesting?

Supporting other geo encoders, such as photon.

Does it solve any problem?

That this frontend is not bound to only use nominatim as a geo encoder.
An alternative improvement might be improving search results in case one of the geo encoders does not give back any results.

Questions

What do you think the best way to integrate multiple geo encoders would be?
In a way that based on environment variables only the correct one is imported or used?

(ps: example photon.js works)

Example utils/photon.js :

import axios from 'axios'

export const PHOTON_URL = `${process.env.REACT_APP_PHOTON_URL}/api`
export const PHOTON_URL_REVERSE = `${process.env.REACT_APP_PHOTON_URL}/reverse`

export const forward_geocode = (userInput) =>
  axios.get(PHOTON_URL, {
    params: {
      // eslint-disable-next-line
      q: userInput,
      limit: 5,
    },
  })

export const reverse_geocode = (lon, lat) =>
  axios.get(PHOTON_URL_REVERSE, {
    params: {
      lon: lon,
      lat: lat,
    },
  })

export const parseGeocodeResponse = (results, lngLat) => {
  results = results.features
  const processedResults = []
  for (const [index, result] of results.entries()) {
    if (
      'error' in result &&
      result.error.toLowerCase() === 'unable to geocode'
    ) {
      processedResults.push({
        title: lngLat.toString(),
        description: '',
        selected: true,
        addresslnglat: '',
        sourcelnglat: lngLat,
        displaylnglat: lngLat,
        key: index,
        addressindex: index,
      })
    } else {
      processedResults.push({
        title:
          result.properties.name.length > 0
            ? result.properties.name
            : lngLat.toString(),
        description: `https://www.openstreetmap.org/${result.properties.osm_type}/${result.properties.osm_id}`,
        selected: false,
        addresslnglat: [
          parseFloat(result.geometry.coordinates[0]),
          parseFloat(result.geometry.coordinates[1]),
        ],
        sourcelnglat:
          lngLat === undefined
            ? [
                parseFloat(result.geometry.coordinates[0]),
                parseFloat(result.geometry.coordinates[1]),
              ]
            : lngLat,
        displaylnglat:
          lngLat !== undefined
            ? lngLat
            : [
                parseFloat(result.geometry.coordinates[0]),
                parseFloat(result.geometry.coordinates[1]),
              ],
        key: index,
        addressindex: index,
      })
    }
  }
  return processedResults
}

Screenshots

No response

Additional information

No response

[Shyam-123pandey]

Hi! This looks like a useful improvement. Supporting multiple geocoders like Photon could make the frontend more flexible. I like the idea of selecting the provider via environment variables.

Before working on this, should the app support only one geocoder at a time via env config, or also fallback to another if one returns no results? I’d be happy to work on this.