maps

React wrapper for goong-geocoder for use with goong-map-react

Jul 20, 2020
React wrapper for goong-geocoder for use with goong-map-react

@goongmaps/goong-geocoder-reat

React wrapper for @goongmaps/goong-geocoder for use with @goongmaps/goong-map-react.

View Demo View Github

Installation

NPM

$ npm install @goongmaps/goong-geocoder-react

or

Yarn

$ yarn add @goongmaps/goong-geocoder-react

Styling

Import:

import '@goongmaps/goong-geocoder-react/dist/goong-geocoder.css'

or

Link tag in header:

<link href='https://unpkg.com/@goongmaps/[email protected]/dist/goong-geocoder.css' rel='stylesheet' />

Props

Only mapRef and goongApiAccessToken are required.

NameTypeDefaultDescription
mapRefObjectRef for react-map-gl map component.
containerRefObjectThis can be used to place the geocoder outside of the map. The position prop is ignored if this is passed in.
onViewportChangeFunction() => {}Is passed updated viewport values after executing a query.
goongApiAccessTokenStringhttps://account.goong.io
inputValueStringSets the search input value
originString"https://rsapi.goong.io"Use to set a custom API origin.
zoomNumber14On geocoded result what zoom level should the map animate to
radiusNumber3000Distance by kilometers around map center
placeholderString"Search"Override the default placeholder attribute value.
proximityObjectA proximity argument: this is a geographical point given as an object with latitude and longitude properties. Search results closer to this point will be given higher priority.
trackProximityBooleanfalseIf true, the geocoder proximity will automatically update based on the map view.
collapsedBooleanfalseIf true, the geocoder control will collapse until hovered or in focus.
clearAndBlurOnEscBooleanfalseIf true, the geocoder control will clear it's contents and blur when user presses the escape key.
clearOnBlurBooleanfalseIf true, the geocoder control will clear its value when the input blurs.
minLengthNumber2Minimum number of characters to enter before results are shown.
limitNumber5Maximum number of results to show.
renderFunctionA function that specifies how the results should be rendered in the dropdown menu. Accepts a single Carmen GeoJSON object as input and return a string. Any html in the returned string will be rendered. Uses goong-geocoder's default rendering if no function provided.
positionString"top-right"Position on the map to which the geocoder control will be added. Valid values are "top-left", "top-right", "bottom-left", and "bottom-right".
onInitFunction() => {}Is passed Goong geocoder instance as param and is executed after Goong geocoder is initialized.
onClearFunction() => {}Executed when the input is cleared.
onLoadingFunction() => {}Is passed { query } as a param and is executed when the geocoder is looking up a query.
onResultsFunction() => {}Is passed { results } as a param and is executed when the geocoder returns a response.
onResultFunction() => {}Is passed { result } as a param and is executed when the geocoder input is set.
onErrorFunction() => {}Is passed { error } as a param and is executed when an error occurs with the geocoder.

Example

import '@goongmaps/goong-js/dist/goong-js.css' import '@goongmaps/goong-geocoder/dist/goong-geocoder.css' import React, { Component } from 'react' import MapGL from '@goongmaps/goong-map-react' import Geocoder from '@goongmaps/goong-geocoder-react' class Example extends Component { state = { viewport: { latitude: 21.026975, longitude: 105.853460, zoom: 12 } } mapRef = React.createRef() handleViewportChange = (viewport) => { this.setState({ viewport: { ...this.state.viewport, ...viewport } }) } // if you are happy with Geocoder default settings, you can just use handleViewportChange directly handleGeocoderViewportChange = (viewport) => { const geocoderDefaultOverrides = { transitionDuration: 1000 } return this.handleViewportChange({ ...viewport, ...geocoderDefaultOverrides }) } render() { return ( <MapGL ref={this.mapRef} {...this.state.viewport} width="100%" height="100%" onViewportChange={this.handleViewportChange} goongApiAccessToken='YOUR_MAPTILES_KEY'> <Geocoder mapRef={this.mapRef} onViewportChange={this.handleGeocoderViewportChange} goongApiAccessToken='YOUR_API_KEY' /> </MapGL> ) } } export default Example

goong-geocoder-react-screenshot

GitHub

Recommended