Skip to content

docs(widgets): GeocoderWidget docs #9611

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions docs/api-reference/widgets/geocoder-widget.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# GeocoderWidget

The GeocoderWidget can be thought of as widget that helps the user find positions on the map, and in addition to addresses / coordinates, one position of obvious interest is the user's own current position.

This widget provides an input box for entering an address or a pair of coordinates. The most recent addresses that have been successfully located are stored in `localStorage` and presented in a drop-down menu. The top item in the menu is always **Current position**, which when selected invokes the browser's geolocation API to re-center the map.

```ts
import {GeocoderWidget} from '@deck.gl/widgets';
import {Deck} from '@deck.gl/core';

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

## Props

The `GeocoderWidget` shares the base properties listed on the [widget overview page](./overview.md). Additional options are listed below.

#### `geocoder` (string, optional) {#geocoder}

Default: `'coordinates'`

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

#### `apiKey` (string, optional) {#apiKey}

Required if `geocoder` is set to a supported third party provider.

#### `onGeocode` (function, optional) {#onGeocode}

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.

## Usage

Type an address or coordinates into the text field and press **Go** to move the map. 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.

Selecting **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.

2 changes: 1 addition & 1 deletion docs/api-reference/widgets/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ This module contains the following widgets:
### Geospatial Widgets
- [CompassWidget](./compass-widget.md)
<!-- - [ScaleWidget](./scale-widget.md) -->
<!-- - [GeolocateWidget](./geolocate-widget.md) -->
- [GeocoderWidget](./geocoder-widget.md)

### Utility Widgets
- [FullscreenWidget](./fullscreen-widget.md)
Expand Down
2 changes: 1 addition & 1 deletion docs/whats-new.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Target release date: Q2, 2025

### Widgets

- React: Pre-wrapped React components for the new deck.gl widgets are available via the [`@deck.gl/react`](./api-reference/react/overview.md) package, including: `ResetViewWidget`, `ScaleWidget`, `GeolocateWidget`, `ScreenshotWidget`, `LoadingWidget`, `ThemeWidget`, `InfoWidget`, and `SplitterWidget` (in addition to the `ZoomWidget`, `CompassWidget`, `FullscreenWidget` from v9.1)
- React: Pre-wrapped React components for the new deck.gl widgets are available via the [`@deck.gl/react`](./api-reference/react/overview.md) package, including: `ResetViewWidget`, `ScaleWidget`, `GeocoderWidget`, `ScreenshotWidget`, `LoadingWidget`, `ThemeWidget`, `InfoWidget`, and `SplitterWidget` (in addition to the `ZoomWidget`, `CompassWidget`, `FullscreenWidget` from v9.1)

## Core

Expand Down
Loading