maplibre-gl-mapload

Use to support JawgMaps mapload pricing with MapLibre GL JS.

Note that your account requires the per-mapload pricing to be enabled. Please contact us at [email protected] for more information.

Install

Available via npm as the package @jawg/maplibre-gl-mapload. To use this librarie you also need to install MapLibre GL JS.

npm i maplibre-gl @jawg/maplibre-gl-mapload

or

yarn add maplibre-gl @jawg/maplibre-gl-mapload

Alternatively you may add the umd package directly to the html document using the unpkg link.

<!--MapLibre GL JS-->
<script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
<link
  href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css"
  rel="stylesheet"
/>
<!--Jawg MapLoad-->
<script src="https://unpkg.com/@jawg/[email protected]/dist/maplibre-gl-mapload.js"></script>

When adding via unpkg, the map can be accessed with Jawg.Map.

Usage

import Jawg from "@jawg/maplibre-gl-mapload";
import maplibregl from "maplibre-gl";

// Create a map object using Jawg.Map instead of maplibregl.Map. Then use it as a normal maplibregl.Map.
const map = new Jawg.Map({
  container: "map",
  style:
    "https://api.jawg.io/styles/jawg-streets.json?access-token=<YOUR_ACCESS_TOKEN>",
  zoom: 2,
  center: [2.3210938, 48.7965913],
});

map.addControl(
  new maplibregl.NavigationControl({
    visualizePitch: true,
    showZoom: true,
    showCompass: true,
  })
);

Feedback

Please submit an issue for new features or when something is not working properly.