NgwOl

Ready-to-use OpenLayers-based map for NextGIS Web.

This package configures the OpenLayers map adapter and includes the required styles. Its default export extends NgwMap, so the common APIs from @nextgis/ngw-map and @nextgis/webmap are available on the map instance.

Installation

In Browser

Include assets

Simply download and include with a script tag, NgwOl and NgwMap will be registered as a global variable.

<script src="../lib/ngw-ol.global.js"></script>

<div id='map'></div>
<script>
  // const ngwMap = new NgwOl({
  const ngwMap = new NgwMap({
    baseUrl: 'https://demo.nextgis.com',
    target: 'map',
    qmsId: 448,
    webmapId: 3985
  });
</script>
Copy

CDN

unpkg

<script src="https://unpkg.com/@nextgis/ngw-ol"></script>
Copy

jsdelivr

<script src="https://cdn.jsdelivr.net/npm/@nextgis/ngw-ol"></script>
Copy

We recommend linking to a specific version number /ngw-ol@[version]

ES module

<script type="module">
  import NgwMap from 'https://cdn.jsdelivr.net/npm/@nextgis/ngw-ol@VERSION/lib/ngw-ol.esm-browser.prod.js';

  const ngwMap = await NgwMap.create({
    baseUrl: 'https://demo.nextgis.com',
    target: 'map',
    resources: [{ resource: 2011, fit: true }],
  });
</script>
Copy

In Node.js

npm install ol @nextgis/ngw-ol
Copy

Usage

import NgwMap from '@nextgis/ngw-ol';

const ngwMap = await NgwMap.create({
  baseUrl: 'https://demo.nextgis.com',
  target: 'map',
  qmsId: 448,
  webmapId: 3985,
});
Copy

Use new NgwMap(options) when the instance is needed before initialization is complete. Use NgwMap.create(options) when subsequent code requires a ready map.

TypeScript users should generate declarations for the NextGIS Web deployment used by the application:

npx @nextgis/ngw-types-loader https://your-ngw-server.com
Copy

Check out the API Documentation and the package architecture guide.

Commercial support

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