NavigationControl

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

Mapbox

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>;
}

Maplibre

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