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

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.

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

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

Via CDN

Choose between unpkg:

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

and jsdelivr

<script src="https://cdn.jsdelivr.net/npm/@nextgis/[package]"></script>
<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

npm install @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);

Usage

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/maplibre-gl-map-adapter';

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

Adding Layers from NextGIS Web

// 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.

Examples

Add different NextGIS Web resource

TypeScript Support

If you plan to use this library in a TypeScript project, it's recommended to install TypeScript declaration files for NextGIS Web by using the @nextgis/ngw-types-loader tool.

Installing NGW Types

Run the following command to download the latest TypeScript declaration files:

npx @nextgis/ngw-types-loader

This will download the declaration file from the default NextGIS Web instance (https://demo.nextgis.com) and update your tsconfig.json to include it.

If you are using a custom NextGIS Web deployment, you can specify the URL:

npx @nextgis/ngw-types-loader https://your-custom-ngw-url.com

After running the tool, ensure that your tsconfig.json includes the downloaded file:

{
  "include": [
    "./nextgisweb.d.ts"
  ]
}

For more details, refer to the NGW Types Loader.

Developer Guide

Repository Setup

First install Yarn

# Clone git through ssh
git clone git@github.com:nextgis/nextgis_frontend.git
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

Publishing

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

Testing

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!

http://nextgis.com

Settings

Member Visibility

On This Page

NextGIS Frontend