Skip to content

groinder/react-mapbox-gl-geocoder

Repository files navigation

react-mapbox-gl-geocoder

Simple react autocomplete for geocoding locations using Mapbox API. You can use it with react-map-gl to pan to found locations.

NPM JavaScript Style Guide

Install

npm install --save react-mapbox-gl-geocoder
# or
yarn add react-mapbox-gl-geocoder

Usage

import 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>
        )
    }
}

Props

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 ''

Styling

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

Replacing components

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

License

MIT © groinder