NextGIS Frontend

NextGIS Frontend

Github lerna version

NextGIS Code

A suite of frontend JavaScript libraries designed to accelerate the development of web-GIS applications using NextGIS software and services as a backend. NextGIS Frontend supports three major open-source GIS frameworks with unified interfaces.

Quick Links

Featured Examples

Packages @nextgis/[package-name]

Ready-to-use maps

Single-file bundles for rapid deployment of web-gis applications with NextGIS services

Map development tools

Bricks for build custom Web GIS frontend

NextGIS Web tools

Map-free libraries to interaction with NextGIS Web


Map-free tools for common purpose

  • utils – common development tools;
  • cache - caching for asynchronous functions;
  • cancelable-promise – a promise you can stop;
  • dom – collection of libraries for working with the DOM;


Real-World Projects

Explore how NextGIS frontend libraries are utilized in actual projects:

  • nglink (LIVE) – Server side - express.js with ngw-uploader; client - webpack, typescript, ngw-map.
  • russia-history – Russia history live web map (LIVE). Mapbox-gl-js, NGW MTV api, layer load event listener. Webpacj and typescript.
  • clear_horizon_frontend – Clear horizon frontend. NGW auth system, leaflet typescript based webpack project.
  • webpack-template – Webpack based JavaScript template project.
  • walrus-ais – NgwMapbox map with React.
  • wwf-oilspill – Emergency situations with oil spills (LIVE), minimal dependency typescript project with Leaflet.
  • oralhistory (LIVE) – Typescript, Vuetify, Mapbox-gl-js and properties filter usage example.
  • petro2020 (LIVE). Native JavaScript for leaflet and Mapbox-gl-gs in one project.
  • nextgisweb_viewer – Service for viewing map resources from NextGIS Web (LIVE). Vuetify, typescript (outdated).
  • ngw_frontend_boilerplate. Parcel build (outdated).


Browser Integration

Include assets

Download and include with a script tag. [Package] will be registered as a global variable.

<script src="./lib/[package].global.js"></script>
var package = new Package(options);
<script type="module">
import Package from '[package]/lib/[package]';


Choose between unpkg:

<script src="[package]"></script>
<script src="[package]@[version]"></script>
<script src="[package]@[version]/lib/[file]"></script>

and jsdelivr

<script src="[package]"></script>
<script src="[package]@[version]/lib/[file]"></script>

[file] - [package].[format].prod.js


  • global - browser script
  • cjs - node module
  • esm-browser - browser module
  • esm-bundler - module for bundler systems

We recommend linking to a specific [version] number that you can update manually

Node.js Integration

npm i -S @nextgis/[package]
yarn add @nextgis/[package]

then import the [package] in the project modules

import Package from '@nextgis/[package]';
// or
import { Component, utility } from '@nextgis/[package]';

const package = new Package(options);


Map Creation

import { NgwMap } from '@nextgis/ngw-map';

import './leaflet-style-override.css';
import MapAdapter from '@nextgis/leaflet-map-adapter';
// OR
// import 'ol/ol.css';
// import MapAdapter from '@nextgis/ol-map-adapter';
// OR
// import 'maplibre-gl/dist/maplibre-gl.css';
// import MapAdapter from '@nextgis/mapboxgl-map-adapter';

const ngwMap = new NgwMap(new MapAdapter(), {
target: "map",
qmsId: 448,
baseUrl: "",
resources: [2011, { resource: 222, fit: true }, { resource: "keyname" }],
ngwMap.onLoad().then(() => {
// do something

Adding Layers from NGW

// from resource id
ngwMap.addNgwLayer({ resource: 2011 });
// by keyname
ngwMap.addNgwLayer({ resource: "keyname" });
// add vector layer from style resource
ngwMap.addNgwLayer({ resource: "style_keyname", adapter: "GEOJSON" });
// add first style from vector resource (if available)
ngwMap.addNgwLayer({ resource: "vector_keyname", adapter: "TILE" });

The resource can be id or keyname.


Add different NGW resource

Developer Guide

Repository Setup

First install Yarn

# Clone git through ssh
git clone
cd ./nextgis_frontend
# Install dependencies
yarn install
# Prepare packages
yarn run bootstrap
# Build all packages
yarn run prod
# Build demo app
yarn run demo

To copy the pages of universal examples from the demo/examples into the corresponding examples of frontend libraries run

yarn run examples

Package-Specific Instructions

# Go to package directory (for example webmap)
cd ./packages/webmap
# Run build command
yarn run dev
# or
yarn run prod
# Run watch source files changes command
yarn run watch


Before publishing you should execute prod script

lerna run prod

To publish new version to git and npm run

lerna publish

When publishing, you will need to select a new version number. It is the same for all libraries. Dependencies between packages are solved automatically.

To publish a new package, run the following command in the package folder

npm publish --access=public


The tests are launched from the root project directory. Testing is performed for all packages.

npm t # run all test with coverage
npm run karma # run karma test in watch mode for development

Commercial support

Need to fix a bug or add a feature to NextGIS Frontend? We provide custom development and support for this software. Contact us to discuss options!

Generated using TypeDoc