NextGIS Frontend

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

• Live Examples & Documentation
• API Documentation
• GitHub Repository
• Vue2 GitHub Repository
• Related Article
• Tutorial Repository
• NextGIS Official Website
• NextGIS Web
• Cloud Pricing Plans
• On-Premise Pricing
• Telegram Chat

Featured Examples

• Add layer from NextGIS Web
• Add webmap from NextGIS Web
• Zoom to NextGIS Web layer feature, partial data load
• Highlight features from NextGIS Web webmap
• Expression paint
• Layer properties filters
• BBOX strategy for vector layer
• Custom layers control
• Events
• Data management in the vector layer
• GeoJSON data
• Toggle button control
• Vector selection
• Vector popup
• Web map feature identification
• Web map bookmarks

Packages @nextgis/[package-name]

Ready-to-use maps

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

• ngw-leaflet – for Leaflet;
• ngw-ol – for OpenLayers;
• ngw-maplibre-gl – for Maplibre GL JS;

Map development tools

Bricks for build custom Web GIS frontend

• webmap – universal map constructor;
• leaflet-map-adapter – webmap adapter to use Leaflet GIS framework;
• maplibre-gl-map-adapter – webmap adapter to use Maplibre GL JS framework;
• ol-map-adapter – webmap adapter to use OpenLayers GIS framework;
• qms-kit – build webmap with NextGIS QMS baselayer;
• icons – simple svg icons pack to display on the map;
• dialog – utility to work with modal windows;
• control-container – placing control elements in the corners of the map container;
• paint – working with the style of vector layers;
• properties-filter – filtering objects by its properties using JSON-serializable expressions;
• url-runtime-params – writing and reading URL parameters;
• item – hierarchical layers control;
• geocoder - modern geocoder on async generators. May use different data providers.

NextGIS Web tools

Map-free libraries to interaction with NextGIS Web

• ngw-connector – module to interact with NextGIS Web REST API;
• ngw-kit – build webmap with NextGIS Web instance. Lots of useful utilities for interacting with the NextGIS Web API;
• ngw-orm – NextGIS Web Object-Relational Mapping;
• ngw-uploader – library providing tools for uploading data to nextgis.com cloud;
• ngw-map – abstract map to simplify work with NextGIS services;

Utilities

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). Maplibre GL JS, NextGIS Web MTV api, layer load event listener. Webpacj and typescript.
• clear_horizon_frontend – Clear horizon frontend. NextGIS Web auth system, leaflet typescript based webpack project.
• webpack-template – Webpack based JavaScript template project.
• walrus-ais – NgwMaplibreGL map with React.
• wwf-oilspill – Emergency situations with oil spills (LIVE), minimal dependency typescript project with Leaflet.
• oralhistory (LIVE) – Typescript, Vuetify, Maplibre GL JS and properties filter usage example.
• petro2020 (LIVE). Native JavaScript for leaflet and Maplibre-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).

Installation

Browser Integration

Include assets

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

1<script src="./lib/[package].global.js"></script>
2<script>
3  var package = new Package(options);
4</script>

1<script type="module">
2  import Package from 'https://unpkg.com/@nextgis/[package]/lib/[package].esm-browser.prod.js';
3</script>

Via CDN

Choose between unpkg:

1<script src="https://unpkg.com/@nextgis/[package]"></script>
2<script src="https://unpkg.com/@nextgis/[package]@[version]"></script>
3<script src="https://unpkg.com/@nextgis/[package]@[version]/lib/[file]"></script>

and jsdelivr

1<script src="https://cdn.jsdelivr.net/npm/@nextgis/[package]"></script>
2<script src="https://cdn.jsdelivr.net/npm/@nextgis/[package]@[version]/lib/[file]"></script>

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

[format]:

• 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

1npm install @nextgis/[package]

then import the [package] in the project modules

1import Package from '@nextgis/[package]';
2// or
3import { Component, utility } from '@nextgis/[package]';
4
5const package = new Package(options);

Usage

Map Creation

1import { NgwMap } from '@nextgis/ngw-map';
2
3import './leaflet-style-override.css';
4import MapAdapter from '@nextgis/leaflet-map-adapter';
5// OR
6// import 'ol/ol.css';
7// import MapAdapter from '@nextgis/ol-map-adapter';
8// OR
9// import 'maplibre-gl/dist/maplibre-gl.css';
10// import MapAdapter from '@nextgis/maplibre-gl-map-adapter';
11
12const ngwMap = new NgwMap(new MapAdapter(), {
13  target: "map",
14  qmsId: 448,
15  baseUrl: "https://demo.nextgis.com",
16  resources: [2011, { resource: 222, fit: true }, { resource: "keyname" }],
17});
18ngwMap.onLoad().then(() => {
19  // do something
20});

Adding Layers from NextGIS Web

1// from resource id
2ngwMap.addNgwLayer({ resource: 2011 });
3// by keyname
4ngwMap.addNgwLayer({ resource: "keyname" });
5// add vector layer from style resource
6ngwMap.addNgwLayer({ resource: "style_keyname", adapter: "GEOJSON" });
7// add first style from vector resource (if available)
8ngwMap.addNgwLayer({ resource: "vector_keyname", adapter: "TILE" });

The resource can be id or keyname.

Examples

Add different NextGIS Web resource

Developer Guide

Repository Setup

First install Yarn

1# Clone git through ssh
2git clone git@github.com:nextgis/nextgis_frontend.git
3cd ./nextgis_frontend
4# Install dependencies
5yarn install
6# Prepare packages
7yarn run bootstrap
8# Build all packages
9yarn run prod
10# Build demo app
11yarn run demo

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

1yarn run examples

Package-Specific Instructions

1# Go to package directory (for example webmap)
2cd ./packages/webmap
3# Run build command
4yarn run dev
5# or
6yarn run prod
7# Run watch source files changes command
8yarn run watch

Publishing

Before publishing you should execute prod script

1lerna run prod

To publish new version to git and npm run

1lerna 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

1npm publish --access=public

Testing

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

1npm t # run all test with coverage
2npm 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!