NavigationControl

React component that wraps the base library's NavigationControl class (Mapbox | Maplibre).

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

import * as React from 'react';
import Map, {NavigationControl} from 'react-map-gl';

function App() {
  return <Map
    mapboxAccessToken="<Mapbox access token>"
    initialViewState={{
      longitude: -100,
      latitude: 40,
      zoom: 3.5
    }}
    mapStyle="mapbox://styles/mapbox/streets-v9"
  >
    <NavigationControl />
  </Map>;
}

import * as React from 'react';
import Map, {NavigationControl} from 'react-map-gl/maplibre';

function App() {
  return <Map
    initialViewState={{
      longitude: -100,
      latitude: 40,
      zoom: 3.5
    }}
    mapStyle="https://api.maptiler.com/maps/streets/style.json?key=get_your_own_key"
  >
    <NavigationControl />
  </Map>;
}

Properties

Reactive Properties

`style`: CSSProperties

CSS style override that applies to the control's container.

Other Properties

The properties in this section are not reactive. They are only used when the component first mounts.

Any options supported by the NavigationControl class (Mapbox | Maplibre), such as

showCompass
showZoom
visualizePitch

Plus the following:

`position`: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'

Default: 'top-right'

Placement of the control relative to the map.

Source

navigation-control.ts

2.1 KiB Raw Blame History