Module @nextgis/qms-ol

QMS OpenLayers

size version

Add NextGIS QMS TMS and WMS services directly to an OpenLayers map.

Installation

npm install ol @nextgis/qms-ol

Usage

Create an OpenLayers map and add a QMS service by its numeric ID:

import Map from 'ol/Map';
import View from 'ol/View';
import { fromLonLat } from 'ol/proj';
import 'ol/ol.css';
import '@nextgis/qms-ol/lib/qms-ol.css';

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

const map = new Map({
  target: 'map',
  view: new View({ center: fromLonLat([0, 20]), zoom: 2 }),
});

const layer = await 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, 24, 24, 24], maxZoom: 14 },
});

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

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

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

Add the QMS search and catalog control to the map:

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

map.addControl(createQmsControl({ initialLayer: 448 }));

Option	Type	Default	Description
`initialLayer`	`number \| (() => BaseLayer)`		QMS service ID or a layer already added to the map.
`target`	`HTMLElement \| string`		Optional OpenLayers control target.
`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.