Maplibre GL JS map adapter

Webmap adapter to use Maplibre GL JS framework.

This library is not intended for using directly in the browser.

Use MaplibreGLMapAdapter with NPM installation method for building large scale applications. It pairs nicely with module bundlers such as Webpack

# latest stable
npm install maplibre-gl @nextgis/maplibre-gl-map-adapter
Copy

import { WebMap } from '@nextgis/webmap';
import MaplibreGLMapAdapter from '@nextgis/maplibre-gl-map-adapter';
// manually added styles

const webMap = new WebMap({
  mapAdapter: new MaplibreGLMapAdapter(),
});

webMap.create(options).then(() => {
  // on webmap create
});
Copy

MapLibre GL JS 6 worker

MapLibre GL JS 6 uses a module worker to process GeoJSON and vector tiles. The worker must be configured by the final application bundler before creating a map.

For Vite:

import { setWorkerUrl } from 'maplibre-gl';
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';

setWorkerUrl(workerUrl);
Copy

For a manually deployed worker, copy both maplibre-gl-worker.mjs and maplibre-gl-shared.mjs from maplibre-gl/dist to the same public directory:

import { setWorkerUrl } from 'maplibre-gl';

setWorkerUrl('/maplibre/maplibre-gl-worker.mjs');
Copy

Bundler-specific instructions and migration details are available in the official documentation:

• ESM and bundler setup
• MapLibre GL JS 5 to 6 migration guide
• setWorkerUrl() API

Commercial support

Need to fix a bug or add a feature to @nextgis/maplibre-gl-map-adapter? We provide custom development and support for this software. Contact us to discuss options!