NgwLeaflet

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

This package configures the Leaflet map adapter and includes its styles and marker images. 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, NgwLeaflet and NgwMap will be registered as a global variable.

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

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

CDN

unpkg

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

jsdelivr

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

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

ES module

<script type="module">
  import NgwMap from 'https://cdn.jsdelivr.net/npm/@nextgis/ngw-leaflet@VERSION/lib/ngw-leaflet.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 leaflet @nextgis/ngw-leaflet
Copy

Usage

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

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-leaflet? We provide custom development and support for this software. Contact us to discuss options!