Installation

Install dependencies

npm i @krakentech/coral-maps mapbox-gl react-map-gl

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

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

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

Prerequisites

Additional Setup

Import Mapbox CSS

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)

Usage

Minimalistic Setup

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}" />
  );
};