AttributionControl

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

Mapbox

import * as React from 'react';
import Map, {AttributionControl} 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"
    // disable the default attribution
    attributionControl={false}
  >
    <AttributionControl customAttribution="Map design by me" />
  </Map>;
}

Maplibre

import * as React from 'react';
import Map, {AttributionControl} 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"
    // disable the default attribution
    attributionControl={false}
  >
    <AttributionControl customAttribution="Map design by me" />
  </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 AttributionControl class (Mapbox | Maplibre), such as

• compact
• customAttribution

Plus the following:

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

Default: 'bottom-right'

Placement of the control relative to the map.

Source

attribution-control.ts