Module @nextgis/qms-ol

QMS OpenLayers

size version

Add NextGIS QMS TMS and WMS services directly to an OpenLayers map. Use this package when the application owns the native OpenLayers map instance.

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.