Skip to main content

GeocoderWidget (Experimental)

from v9.2

The GeocoderWidget helps the user find positions on the map.

This widget provides an input box for entering an address or a pair of coordinates.

The user types an address or coordinates into the text field and press Go to move the map. The most recent addresses that have been successfully located are presented in a drop-down menu.

Addresses that return a valid location are stored in browser local storage (up to five entries). They will appear in the drop-down for quick re-use during later visits.

import {Deck} from '@deck.gl/core';
import {_GeocoderWidget as GeocoderWidget} from '@deck.gl/widgets';

new Deck({
  widgets: [new GeocoderWidget()]
});

Types​

GeocoderWidgetProps​

The GeocoderWidgetProps accepts the generic WidgetProps and:

label (string, optional)​

  • Default: 'Geocoder'

Tooltip message displayed while hovering a mouse over the widget.

transitionDuration (number, optional)​

  • Default: 200

View state transition duration in milliseconds.

geocoder (string, optional)​

  • Default: 'coordinates'

Which geocoding service to use. Supported values are 'coordinates', 'google', 'mapbox', 'opencage', or 'custom'.

apiKey (string, optional)​

  • Default: ''

Required if geocoder is set to a third party provider. For quick testing, applications can use the coordinates geocode does not require an api key.

customGeocoder (optional)​

Only used when geocoder is 'custom'. A function that receives the entered text and an API key, and resolves to a {longitude, latitude} object when successful.

_geolocation (optional)​

In addition to addresses / coordinates, one position of obvious interest is the user's own current position. This experimental option adds a current menu item that calls the browser's geolocation API and navigates to the user's current position. Note that this requires the user to enable geolocation in the browser.

If props._geolocation Current position from the drop-down uses navigator.geolocation to center the map. The option is hidden if the browser does not provide the Geolocation API or the user denies access.

Source​

modules/widgets/src/geocoder-widget.tsx