preact-osm-geocoding

> Find address locations via OSM Nominatim

 

!alt text
!alt text

Integration Example

!alt text

Install

``bash
npm install --save @umrashrf/preact-osm-geocoding
`

Usage

`tsx
import React, { Component } from 'preact'

import { ReactOsmGeocoding } from '@umrashrf/preact-osm-geocoding'
import '@umrashrf/preact-osm-geocoding/dist/index.css'

class Example extends Component {
render() {
return console.log(data)}/>
}
}
`


Details


API: `https://nominatim.org/release-docs/develop/api/Search/`

| Props | Definition | Type | Default |
| ------------- |:-------------:| -----:|-----:|
| placeholder | Placeholder for search input | string | "Enter address" |
| inputValue | value field for search input | string | "" |
| debounce | Debounce duration for the input in ms | number | 1000 |
| iconUrl | Icon image url for the search icon | string | "https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-512.png"|
| city | Check Nominatim search API for details| string | "" |
| countrycode | Check Nominatim search API for details | string | "tr" |
| acceptLanguage| Check Nominatim search API for details | string | "tr" |
| viewbox | Bbox to filter query results, check Nominatim for more information | ,,, | "" |
| callback | Function returns selected address information | Function | undefined |
| outerClassNames | Top level class names | string | "" |
| inputClassNames | HTML input element class names | string | "" |
| resultsClassNames | Class names for results holder div | string | "" |
| resultClassNames | Class names for each result row | string` | "" |

License

MIT © SchemeSonic