CoralMap

CoralMap is the component used to display a base map, its custom data overlays, as well as its inner controls. It is a convenience wrapper around react-map-gl’s Map component , which is itself a React wrapper around Mapbox GL’s Map object . All of properties and methods are passed through to either react-map-gl or Mapbox GL.

Import

import { CoralMap, CoralMapGeolocateControl, CoralMapMarker } from '@krakentech/coral-maps';

Basic usage

mapboxAccessToken is the only required prop. The default map is comprised of a default basemap (streets-satellite) and basic zoom controls.

<CoralMap mapboxAccessToken="..." />

Adding overlays and controls as children

<CoralMap mapboxAccessToken="...">
    {/* Custom control */}
    <CoralMapGeolocateControl />
    {/* Custom overlay */}
    <CoralMapMarker feature={...} />
</CoralMap>

Changing the basemap

<CoralMap mapboxAccessToken="..." basemap="satellite" />

Setting the initial view state

<CoralMap mapboxAccessToken="..." initialViewStatePreset="JPN" />

Full screen interaction mode

<CoralMap mapboxAccessToken="..." fullScreenInteraction={true} />

Full API