photon Geocoder

it's a simple library to let you integrate a geocoding input in your app.

building

install with : npm i @openrunner/photon-geocoder

build with : npm start

it will be builded in dist/ folder

how to use

include js and css in your page then create an instance with :

const test = new PhotonGeocoder({
        target: 'test',
      })
      test.on('select', (e) => {
        console.log('select : ', e.feature)
        console.log('select : ', e.latlng)
      })

options :

you can editor all or only some of thoses options :

• url : the url of the backend
• firstLineFields: the properties displayed in the result first line, separate by ', ' (unknown properties will be ignore)
• secondLineFields: the feature properties displayed in the result second line, separate by ', ' (unknown properties will be ignore)
• inputDisplayFields: the feature properties to use in displaying the selected feature in the input, separate by ', ' (unknown properties will be ignore)
• textStrings: the text that the lib will display for some case (cf below for list)
• rateLimit: time between query in ms
• resultsHeightMargin: use for defining result block height
• minimumInputLengthForAutocomplete: the minimum number of letter before querying the backend
• bounds:
• layers: not fonctionnal,
• place: not fonctionnal,
• limit: the number of result return by the backend
• lang: the lang used by the backend
• osm_tag: openStreetMap tag to filter the query result
• target: the parent where the input will be added
• value: use to set initial value of input
• pointIcon: the icon class to use for the result of type venue or address
• polygonIcon: the icon class to use for the other type of result
• closeIcon: the icon class to use for the reset action
• searchIcon: the icon class to use for the prepend icon will be replace with the loading icon when query the backend
• loadIcon: the icon class to use for the loading animation (css animation)
• allowGPSCoordinates: specify if the component must be compliant with GPS coordinates. If so the component will make GPS coordinates selectable

strings traduction :

you can passe to the library the different strings that will be used by editing the options textStrings that default to :

const TEXT_STRINGS = {
  'INPUT_PLACEHOLDER': 'Search',
  'INPUT_TITLE_ATTRIBUTE': 'Search',
  'RESET_TITLE_ATTRIBUTE': 'Reset',
  'NO_RESULTS': 'No results were found.',
  // Error codes.
  'ERROR_403': 'A valid API key is needed for this search feature.',
  'ERROR_404': 'The search service cannot be found. :-(',
  'ERROR_408': 'The search service took too long to respond. Try again in a second.',
  'ERROR_429': 'There were too many requests. Try again in a second.',
  'ERROR_500': 'The search service is not working right now. Please try again later.',
  'ERROR_502': 'Connection lost. Please try again later.',
  // Unhandled error code
  'ERROR_DEFAULT': 'The search service is having problems :-('
};

you can just edit one string or all, the missing strings will use the default value

events :

you can listen to multiple events, attaching listener to the object with

test.on('eventName', listener)

here is a list of available events and the parameters they have :

emit('results', {
    results: results,
    endpoint: endpoint,
    requestType: type,
    params: params
})

emit('select', {
    originalEvent: originalEvent,
    latlng: latlng,
    feature: feature
})

emit('reset')

emit('error', {
    results: results,
    endpoint: endpoint,
    requestType: type,
    params: params,
    errorCode: err.code,
    errorMessage: errorMessage
})

emit('highlight', {
    originalEvent: e,
    latlng: getFeatureLatLng(highlighted.feature),
    feature: highlighted.feature
})

emit('focus', { 
    originalEvent: e 
})

emit('blur', { 
    originalEvent: e 
})

emit('expand')

emit('collapse')

css

simplified css class for ease of used.

all classes are prefixed with photon-