@aimanbahouala/react-mapbox-gl-geocoder NPM

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.

This is a fork of @groinder project published 2 years ago on which, i was having issues dealing with UTF8 chars on search string (React & Nextjs). I'll later add some functionalities like placeholder prop, origin, or base layout etc...

This wrapper deals with mapbox geocoding api directly so, no need to add any mapbox-gl relative component and can be used, without a map.

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