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