Dependencies:

• react
• react-dom
• @krakentech/coral
• @krakentech/icons
• mapbox-gl (at version 3.11.1)
• react-map-gl (at version 8.0.4)

Installation

pnpm add @krakentech/coral-maps mapbox-gl react-map-gl

You will need to import Mapbox GL’s CSS in your application.

• Pages Router: in pages/_app.tsx.
• App Router: in app/layout.tsx.

import 'mapbox-gl/dist/mapbox-gl.css';

Mapbox token

Coral Maps uses Mapbox GL , which requires a valid Mapbox token  to render any map. You will need to generate a token for every new project:

• If you haven’t already, you must ask for access to the Mapbox console through the Okta access requests portal
• Log in to the Mapbox console 
• Create a new token . Do not use the default public token. You will not likely need to modify the preselected token scopes.
• Set up URL restrictions for your token, and please be mindful of not exposing it in your source code (usually the token would be stored in your project’s .env file)

👈 Please refer to the components in the sidebar for the usage of each individual component.

Minimalistic set up

This is the bare minimum you’ll need to display a map. Wrap your CoralMap component with next/dynamic and { ssr: false } to ensure it runs only on the client:

// Pages Router: put this in pages/_app.tsx
// App Router: put this in app/layout.tsx
import 'mapbox-gl/dist/mapbox-gl.css';
 
// Any page or component:
import dynamic from 'next/dynamic';
 
const CoralMapClient = dynamic(
  () => import('@krakentech/coral-maps').then(mod => mod.CoralMap),
  { ssr: false }
);
 
 
export default () => {
    return (
        <CoralMapClient mapboxAccessToken="{see documentation above about Mapbox tokens}" />
    );
};