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_ACCESS_TOKEN with the access token ID provided by Mapbox platform.

NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=your_access_token

Usage

import Map from 'react-map-gl';
import { site } from "@/config/site";
 
export function MapBoxExample() {
    return (
        <div>
			<Map
				minZoom={11}
				maxZoom={20}
				initialViewState={{}}
				attributionControl={false}
				mapStyle="mapbox://styles/mapbox/light-v11"
				mapboxAccessToken={site.mapbox.accessToken}
			/>
		</div>
    )
}