Rapid Web GIS apps development using NextGIS frontend libraries

We’re happy to announce a new way to interact with our services and products – our cloud Web GIS nextgis.com, server GIS NextGIS Web and QuickMapServices!

As you might have noticed, in recent years we’ve focused mostly on end-user tools. This news is for developers. Today we’re releasing a suite of frontend JavaScript-libraries that allow you to build your own apps using our software and services as a backend.

Introduction

Main purpose of the new libraries is to simplify usage of nextgis.com/NextGIS Web resources and to speed up the development of Web GIS application of varying complexity levels.

Picture 1. A minimum amount of JS code needed to create a map showing 1) layers loaded from a previously created Web map and 2) a basemap from QMS catalog (see this example in action)

Different mapping frameworks are supported allowing to substitute one another with minimal changes to the code. Here is an example of the same map (a basemap + several vector layers) created with different mapping libraries:

Main features:

  • ease of use (see Picture 1);
  • same interface for different mapping frameworks (Leaflet, OpenLayers, Mapbox GL JS);
  • optimized workflows for main mapping tools;
  • data in different NextGIS services all in one place;
  • convenient distribution (CDN, npm, git).

Packages and modules

We’re currently releasing a total of 14 libraries which can be described as packages or modules (see Picture 2).

A package is a library that implements a simple way to create a map. A package may contain several modules or 3rd-party libraries and is ready to be used without installing any additional dependencies. Scripts, styles and images might also be included to be distributed as a single file through CDN or other means.

Current packages are:

  1. ngw-leaflet, ngw-ol and ngw-mapbox – packages for three main open-source mapping frameworks with common interfaces and means to manage nextgis.com/NextGIS Web resources.
  2. ngw-connector – makes requests to NGW API, handles users authorization. This library is not connected to a map and deals only with data.
  3. ngw-uploader – uploads data, creates resources, layers, styles and services in nextgis.com/NextGIS Web.

A module is a building block prepared to be imported into an application with a build mechanism, such as Webpack. Supports TypeScript typization.

Current modules are:

  1. webmap – a common module that provides an abstract representation of a map, its layers and states. It has no dependencies and not linked to NextGIS services.
  2. adapters: leaflet-map-adapter, ol-map-adapter and mapboxgl-map-adapter – provide common interface for managing different mapping frameworks via webmap.
  3. ngw-map – similar to webmap, but with set NextGIS service interaction. Allows to implement typical use-cases for the Web maps with minimum code.
  4. External services interfaces: ngw-kit and qms-kit – extend a webmap to integrate with:
    1. nextgis.com/NextGIS Web to upload resources and Web maps;
    2. QuickMapServices for quick adding of basemaps.
  5. icons – a set of customizable svg-icons for point data (only for leaflet-map-adapter yet).
  6. dialog – modal windows.

Picture 2. Dependency tree for NextGIS frontend libraries.

Examples

code.nextgis.com aggregates components descriptions and code samples. Most of the libraries can be tested in action and you can test changes to this code in codepen. We continue to expand this set.

Picture 3. An example showing nextgis.com Web GIS vector layer feature selection approach in leaflet and mapbox-gl.

nextgis.com/NextGIS Web interaction

Our libraries work via API with data stored in nextgis.com/NextGIS Web backend. To make most use of the libraries you’ll need a cloud Web GIS created at nextgis.com or your own NextGIS Web server. The cloud Web GIS needs to be on Mini or Premium plan. Set up CORS in your Web GIS settings and list domains where your code is hosted.

More details

Current status for NextGIS frontend libraries is Beta. We use them in all our frontend projects and continue to improve them.

Libraries are written in TypeScript, packaged with Lerna and Yarn, built with Webpack. The code is available on GitHub under GPL v.3.0. Please report bugs through issues or contacts.

 

Leave a Reply

Your email address will not be published. Required fields are marked *