Simple react autocomplete for geocoding locations using Mapbox API. You can use it with react-map-gl to pan to found locations.
npm install --save react-mapbox-gl-geocoder
# or
yarn add react-mapbox-gl-geocoderimport React, {Component} from 'react'
import Geocoder from 'react-mapbox-gl-geocoder'
import ReactMapGL from 'react-map-gl'
import './index.css'
const mapAccess = {
mapboxApiAccessToken: process.env.REACT_APP_MAPBOX_API_ACCESS_TOKEN
}
const mapStyle = {
width: '100%',
height: 600
}
const queryParams = {
country: 'us'
}
class App extends Component {
state = {
viewport: {}
}
onSelected = (viewport, item) => {
this.setState({viewport});
console.log('Selected: ', item)
}
render() {
const {viewport} = this.state
return (
<div>
<Geocoder
{...mapAccess} onSelected={this.onSelected} viewport={viewport} hideOnSelect={true}
queryParams={queryParams}
/>
<ReactMapGL
{...mapAccess} {...viewport} {...mapStyle}
onViewportChange={(newViewport) => this.setState({viewport: newViewport})}
/>
</div>
)
}
}| Name | Type | Description | Default |
|---|---|---|---|
| mapboxApiAccessToken | (required) string | Mapbox Access Token | - |
| timeout | int | Debounce between pressing the key and quering the results | 300 |
| viewport | object | Map Viewport | - |
| onSelected | (required) function(viewport, item) | Receives selected item and the viewport to set for the selected item | - |
| transitionDuration | int | Duration of the smooth transition | 0 |
| hideOnSelect | bool | Whether to hide results on select or not | false |
| updateInputOnSelect | bool | Whether to set the input value to the selected location | false |
| pointZoom | int | Zoom to set if a specific location (without bbox) is selected | 16 |
| formatItem | function(item) | Function used for formatting results | item => item.place_name |
| className | string | Class to add to the top component | - |
| queryParams | object | Query parameters to use when searching of the results, you can see available options here | - |
| limit | int | Limit of the results | 5 |
| localGeocoder | function(queryString) | Function to supplement local results to geocoder | - |
| initialInputValue | string | The initial input value | '' |
This component does NOT come with any styles. You can style it yourself by using classes:
| Class name | Description |
|---|---|
| .react-geocoder | component wrapper class |
| .react-geocoder-results | results wrapper class |
| .react-geocoder-item | single result class |
You can even supplement your own components:
| Property name | Passed Properties | Properties description |
|---|---|---|
| inputComponent | onChange | Function to call when the text changes |
| itemComponent | item, onClick, children | children is item formatted to display |
MIT © groinder
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent