Package Exports

react-mapbox-gl-geocoder

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-mapbox-gl-geocoder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

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

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