Mapbox

Mapbox GL JS is a JavaScript library for vector maps on the Web. Its performance, real-time styling, and interactivity features set the bar for anyone building fast, immersive maps on the web.

Installation

In order to use the Mapbox GL JS, you need to create a Mapbox access token. Read more about it here

Configuration

Open .env file (or create) in the project's root folder and set the variable NEXT_PUBLIC_MAPBOX_API_KEY with the access token ID provided by Mapbox platform.

NEXT_PUBLIC_MAPBOX_API_KEY=access_token

The environment variables, will be used in src/config.ts file.

export const config = {
  // ...
  mapbox: {
    apiKey: process.env.NEXT_PUBLIC_MAPBOX_API_KEY,
  },
  // ...
};

Usage

import { config } from '@/config';
 
function Component() {
  return (
    <div>
      <Map
        attributionControl={false}
        initialViewState={{}}
        mapStyle="mapbox://styles/mapbox/light-v9"
        mapboxAccessToken={config.mapbox.apiKey}
        maxZoom={20}
        minZoom={11}
      />
    </div>
  );
}

Removing Mapbox support

If you do not need to support Mapbox, you can remove it by following the next steps.

1. Uninstall the mapbox-gl andreact-map-gl dependencies.
2. Remove the related styles from styles/global.css