NextGIS Frontend

NextGIS Frontend

Github lerna version

http://code.nextgis.com

Suite of frontend JavaScript-libraries that allow you to speed up building your own web-gis apps using NextGIS software and services as a backend.

NextGIS Frontend support three main open-source GIS frameworks with common interfaces.

Links

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;

Vue

Example projects

See how nextgis frontend libraries are used in real 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).

Install

In Browser

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>

CDN

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>

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

In Node.js

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);

Usage

Create map

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: "https://demo.nextgis.com",
resources: [2011, { resource: 222, fit: true }, { resource: "keyname" }],
});
ngwMap.onLoad().then(() => {
// do something
});

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

Examples

Add different NGW resource

For developers

Instructions for whole repository

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

Instructions for a particular package

# 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

Generated using TypeDoc