JavaScript-libraries to speed up building of Web GIS apps based on NextGIS platform

Related tags

Map nextgis_frontend
Overview

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

  • 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.
  • clear_horizon_frontend – Clear horizon frontend. NGW auth system, leaflet typescript based webpack project.
  • petro2020 (LIVE). Native JavaScript for leaflet and mapbox-gl-gs in one project.
  • russia-history – Russia history live web map (LIVE). Mapbox-gs-js, NGW MTV api, layer load event listener. Webpacj and typescript.
  • 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>
import Package from 'https://unpkg.com/@nextgis/[package]/lib/[package].esm-browser.prod.js'; ">
<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

{ // do something });">
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 [email protected]: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

Issues
  • build(deps): bump acorn from 6.4.0 to 6.4.1

    build(deps): bump acorn from 6.4.0 to 6.4.1

    Bumps acorn from 6.4.0 to 6.4.1.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Layers aren't adding to NgwMap if baseUrl is empty string

    Layers aren't adding to NgwMap if baseUrl is empty string

    This case actual if baseUrl is a root domain URL and was set to empty string.

    bug 
    opened by karavanjo 0
  • build(deps-dev): bump codecov from 3.6.1 to 3.6.5

    build(deps-dev): bump codecov from 3.6.1 to 3.6.5

    Bumps codecov from 3.6.1 to 3.6.5.

    Release notes

    Sourced from codecov's releases.

    v3.6.4

    Fix for Cirrus CI

    v3.6.3

    AWS Codebuild fixes + package updates

    v3.6.2

    command line args sanitised

    Commits
    Maintainer changes

    This version was pushed to npm by drazisil, a new releaser for codecov since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Check NgwWebmaplayerAdapter identify event

    Check NgwWebmaplayerAdapter identify event

    better to use ngw:select event from ngwMap

    bug 
    opened by rendrom 0
  • [demo] change qms basemap for examples

    [demo] change qms basemap for examples

    sputnik is no longer ok

    opened by rendrom 0
  • add preclick event for each adapters

    add preclick event for each adapters

    bug 
    opened by rendrom 0
  • build(deps): bump tar from 4.4.13 to 4.4.19

    build(deps): bump tar from 4.4.13 to 4.4.19

    Bumps tar from 4.4.13 to 4.4.19.

    Commits
    • 9a6faa0 4.4.19
    • 70ef812 drop dirCache for symlink on all platforms
    • 3e35515 4.4.18
    • 52b09e3 fix: prevent path escape using drive-relative paths
    • bb93ba2 fix: reserve paths properly for unicode, windows
    • 2f1bca0 fix: prune dirCache properly for unicode, windows
    • 9bf70a8 4.4.17
    • 6aafff0 fix: skip extract if linkpath is stripped entirely
    • 5c5059a fix: reserve paths case-insensitively
    • fd6accb 4.4.16
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • build(deps): bump nth-check from 2.0.0 to 2.0.1

    build(deps): bump nth-check from 2.0.0 to 2.0.1

    Bumps nth-check from 2.0.0 to 2.0.1.

    Release notes

    Sourced from nth-check's releases.

    v2.0.1

    Fixes:

    • Replace regex with hand-rolled parser for nth-expressions (#9) 9894c1d
      • Ensures parsing will always have linear time complexity.

    Internal:

    • chore(ci): Use GitHub Actions, Dependabot (#10) e02b4dd
    • Bump dependencies

    https://github.com/fb55/nth-check/compare/v2.0.0...v2.0.1

    Commits
    • 65e40b0 2.0.1
    • ff63f1d Bump eslint-config-prettier from 6.15.0 to 8.3.0 (#11)
    • ff24c93 Bump jest from 26.6.3 to 27.2.0 (#17)
    • da9d78a Bump @​typescript-eslint/parser from 4.9.0 to 4.31.1 (#18)
    • fa35caf Bump @​types/node from 14.14.10 to 16.9.1 (#16)
    • 5f39402 Bump @​typescript-eslint/eslint-plugin from 4.9.0 to 4.31.1 (#19)
    • a11c0c1 Bump prettier from 2.2.1 to 2.4.0 (#20)
    • 3ddd820 Bump @​types/jest from 26.0.15 to 27.0.1 (#13)
    • 732ab0a Bump ts-jest from 26.4.4 to 26.5.6 (#15)
    • 7efd9da Bump eslint from 7.14.0 to 7.32.0 (#14)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
NextGIS
Open source geospatial developer and solution provider. Full stack.
NextGIS
Traveliko - Travel with Friends ~ Web application prepared using Google Street View API that allows you to real-time travel with your friends in the same place in street view mode.

Traveliko - Travel with Friends! You can create a room with your friends and travel in street view mode and navigate the map. The application basicall

İlker Güldalı 5 Jun 1, 2021
Web map Vue 3.x components with the power of OpenLayers

vue3-openlayers Web map Vue components with the power of OpenLayers Overview vue3-openlayers is components library that brings the powerful OpenLayers

Melih Altıntaş 223 Jan 24, 2022
A quick way to start a web map application with Vue.js using MapLibre GL JS.

Vue.js map using MapLibre GL JS A quick way to start a web map application with Vue.js using MapLibre GL JS. A simple fullscreen map application is us

MapTiler 4 Dec 31, 2021
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.5k Jan 15, 2022
Light speed setup for MEVN(Mongo Express Vue Node) Apps

Light speed setup for MEVN stack based web-apps Chat: Telegram Donate: PayPal, Open Collective, Patreon A CLI tool for getting started with the MEVN s

madlabsinc 774 Jan 19, 2022
Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native Visit our website at vue-native.io or read the official documentation here. Build native mobile apps using Vue Vue Native is a framework to

GeekyAnts 8.4k Jan 21, 2022
You know there are too many JavaScript libraries when there is a game for it 🎯

JavaScript Guessing Game You know there are too many JavaScript libraries when there is a game for it Description React, Flux, Angular, Aurelia, TypeS

Sami Suo-Heikki 405 Jan 16, 2022
Grabarz & Partner Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites with vuejs.

share me: Grabarz & Partner - Boilerplate Description The Grabarz & Partner Boilerplate is a professional front-end template for building fast, robust

Grabarz & Partner Werbeagentur GmbH 93 Dec 16, 2021
A template for building pre-rendered web apps with Vue + Nuxt

pre-vue Overview This is an example of a Vue + Nuxt configuration that generates a pre-rendered, static site. Instead of generating a normal single-pa

Michael Lynch 30 Nov 4, 2021
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎

Ionicons Ionicons is a completely open-source icon set with 1,300 icons crafted for web, iOS, Android, and desktop apps. Ionicons was built for Ionic

Ionic 15.8k Jan 16, 2022
The most complete boilerplate for production-ready PWAs. With focus on performance, development speed, and best practices

vuesion The most complete boilerplate for production-ready PWAs. With focus on performance, development speed, and best practices 一个灵活的、可扩展的、自定的,已经准备好

vuesion 2.5k Jan 18, 2022
Identify the Internet Speed ⚡️ your users have.

Identify what kinda internet your users are using!

Vinayak Kulkarni 57 Jan 7, 2022
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Supporting Vue.js Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome ba

vuejs 192.3k Jan 17, 2022
React, React Native and Vue UI components for building data-driven apps with Elasticsearch

Reactive Search UI components library for Elasticsearch: Available for React, Vue and React Native Read how to build an e-commerce search UI a.) with

appbase.io 4.5k Jan 21, 2022
Full featured HTML framework for building iOS & Android apps

Framework7 Full Featured Mobile HTML Framework For Building iOS & Android Apps Supporting Framework7 Framework7 is an MIT-licensed open source project

Framework7 16.6k Jan 15, 2022
Toolbox for building full-stack Vue.js apps

Basys Basys is a toolbox for building Vue.js full-stack apps with a focus on great developer experience. An easy way to create full-stack Express-base

Basys 116 Dec 15, 2021
This repository contains a base networking framework for building a realtime quiz platform with Ably. This project uses VueJS on the client-side and NodeJS on the server-side and is scalable as you need.

A scalable, full-stack live quiz framework built with VueJS and NodeJS This repository contains a scalable framework for building a real-time quiz app

Ably Labs 33 Jan 15, 2022
Cloud-native platform for building an NFT Marketplace on top of Algorand blockchain.

Built on OpenAlgoNFT OpenAlgoNFT is an open-source cloud-native platform for building an NFT Marketplace on top of Algorand blockchain. Learn more on

Ulam Labs 78 Jan 17, 2022
A Cross-Platform App Store for Electron Apps

The Electron App Store A Cross Platform App Store for apps built with ElectronJs or just a gui client for https://electronjs.org/apps Features Browse

Patrick 38 Jan 4, 2022
A Cross-Platform App Store for Electron Apps

The Electron App Store Features Browse Apps from 10+ Categories Search for apps by keyword and app name Download .exe , .appimage ,.dmg and other file

Electron App Store 38 Jan 4, 2022
Template for developing open-source vue.js libraries with Rollup + Jest + Babel + Storybook + TravisCI + SemanticRelease

vue-cli-template-library Template for developing open-source vue.js libraries You fell in love with Vue.js and want to create your own unit-tested and

Julon 57 Jan 4, 2022
Vue star rating application without any external libraries

Vue star rating application without any external libraries

Jebasuthan 3 Nov 19, 2021
🎩 Vue Demi is a developing utility allows you to write Universal Vue Libraries for Vue 2 & 3

?? Vue Demi (half in French) is a developing utility allows you to write Universal Vue Libraries for Vue 2 & 3

VueUse 1.4k Jan 22, 2022
Nuxt JS + Tailwind CSS boilerplate code with preconfigured libraries and packages

A NuxtJs boilerplate by TFD for building scalable API. Nuxt JS + Tailwind CSS + ESLint Boilerplate Features This is a Nuxt JS + Tailwind CSS boilerpla

tfd-ed 11 Dec 8, 2021
Iconic is a free “do wtf you want with” set of pixel-perfect icons. Available as basic SVG icons and via first-party React and Vue libraries.

Iconic is a free “do wtf you want with” set of pixel-perfect icons. Available as basic SVG icons and via first-party React and Vue libraries.

Make Lemonade 269 Jan 7, 2022
Vue Pagination with loader, axios REST API call without any external libraries

Vue Pagination with loader, axios REST API call without any external libraries Project setup npm install Compiles and hot-reloads for development npm

Jebasuthan 5 Jan 18, 2022
Icpscan is a Block Explorer and Analytics Platform for Dfinity, ICP is a global computing platform.

Icpscan is a Block Explorer and Analytics Platform for Dfinity Project includes: Transactions (Search) Project (Project) Rank (ICP Holder Address Rank

NnsDAO Labs 15 Jan 7, 2022
Nuxt.js was used in building the frontend of this web application and PHP/mySQL for the backend/database.

sdg-007 Frontend Nuxt.js was used in building the frontend of this web application and PHP/mySQL for the backend/database. About There is a popular sa

Inventors 8 May 20, 2021
A Wrapper of Panolens for building VR applications with Vue based on threejs

A framework for building VR applications with Vue

Mudin Ibrahim 412 Jan 6, 2022