react-mapbox-gl-geocoder

    1.1.0 • Public • Published

    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

    Keywords

    none

    Install

    npm i react-mapbox-gl-geocoder

    DownloadsWeekly Downloads

    1,107

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    2.06 MB

    Total Files

    6

    Last publish

    Collaborators

    • groinder