Module @nextgis/qms-maplibre-gl

QMS MapLibre GL

size version

Add NextGIS QMS TMS and WMS services directly to a MapLibre GL JS map.

Installation

npm install maplibre-gl @nextgis/qms-maplibre-gl

Usage

Create a MapLibre GL JS map and add a QMS service after the map style is loaded:

import { Map, NavigationControl } from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import '@nextgis/qms-maplibre-gl/lib/qms-maplibre-gl.css';

import { addQmsLayer } from '@nextgis/qms-maplibre-gl';

const map = new Map({
  container: 'map',
  style: { version: 8, sources: {}, layers: [] },
  center: [0, 20],
  zoom: 2,
});
map.addControl(new NavigationControl(), 'top-right');

map.once('load', () => {
  addQmsLayer(map, 448);
});

Set fit to move the map to the QMS service extent after adding the layer:

const layer = await addQmsLayer(map, 4646, {
  fit: { padding: 24, maxZoom: 14 },
});

You can also fit the map by a QMS service ID:

import { fitQmsService } from '@nextgis/qms-maplibre-gl';

await fitQmsService(map, 4646, { maxZoom: 14 });

Add the QMS search and catalog control to the map:

import { createQmsControl } from '@nextgis/qms-maplibre-gl';

map.addControl(createQmsControl({ initialLayer: 448 }), 'top-left');

Option	Type	Default	Description
`initialLayer`	`number \| (() => QmsMaplibreLayer)`		QMS service ID or a layer already added to the map.
`search`	`boolean`	`true`	Show QMS search.
`catalog`	`boolean`	`true`	Show the catalog.
`closeOnSelect`	`boolean`	`false`	Close the panel after selecting a service.
`lang`	`string`	`'en'`	Built-in language: `en`, `de`, `es`, `fr`, `it`, `pt`, or `ru`.
`limit`	`number`	`10`	Maximum search results for each service type.
`className`	`string`		Additional class for custom control styles.