Installation

Install Mapbox-gl-path with your package manager:

npm install @makina-corpus/mapbox-gl-path

Usage in your application

In the following lines of code, we use the package Mapbox-gl as dependency. See specification for Mapblibre-gl

How to import dependencies

import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import MapboxPathControl from "@makina-corpus/mapbox-gl-path";

By using it in the <head /> of your HTML file

<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<link
  href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css"
  rel="stylesheet"
/>
<script src="./dist/index.js"></script>

Sample configuration

mapboxgl.accessToken = "YOUR_ACCESS_TOKEN";


const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v11",
  center: [2.21, 46.22],
  zoom: 5,
});


const mapboxPathControl = new MapboxPathControl(parameters);


map.addControl(mapboxPathControl);

Specifications for Maplibre-gl as dependency

The installation and usage are the same of examples above: You need to install the dependency Maplibre-gl instead of Mapbox-gl and replace all keyword occurencies.

You don't have to import Mapbox-gl to your project. However Mapbox-gl-path uses the Popup function from Mapbox-gl; this function also exists in MapLibre-gl (which is exactly the same) so you need to alias Mapbox-gl by MapLibre-gl (see the implementation of this documentation website codebase).