NextGIS Frontend tutorial

Learn NextGIS Frontend step by step with this tutorial.

Introduction

This is a set of tutorials through which you will be able to master both basic and advanced mechanics for working with frontend libraries.

For convenience, the tutorials are divided into parts (lessons).

Each lesson is a node package that is located in the tutorials folder and has its own description in a README.md file.

How to work

Locally

To run lessons on your computer, you need to (1) clone this repository, go to the lesson's folder, (3) execute commands to install dependencies and finally (4) run the main script

git clone https://github.com/nextgis/ngf-tutorial
cd ./ngf-tutorial

With yarn, you can install dependencies for all lessons at once

Note

Modern releases of Yarn aren't meant to be installed globally, or from npm. Refer to https://yarnpkg.com/getting-started/install for installation instructions

yarn
cd ./tutorials/X_Y_tutorial
yarn start

With npm, you need to install in each directory separately

cd ./tutorials/X_Y_tutorial
npm i
npm start

Please note that you will need an installed Node.js to work locally.

We recommend to use IDE VSCode to work with the lesson code. However a regular text editor and a terminal for running commands are also suitable.

In the cloud

Each lesson can be run in the Code cloud service Codesandbox.io

https://githubbox.com/nextgis/ngf-tutorial/tree/master/tutorials/ + [tutorial_foldername]

For example https://githubbox.com/nextgis/ngf-tutorial/tree/master/tutorials/1_1_install_from_cdn

Working with the repository, make a fork, complete tasks and upload back to github. If you have any questions, fill an issue.

Very helpful links

NGF Live examples and docs - study NGF by the most common use cases;
NGF API - look for documentation of methods, properties, and components.

Helpful links

Content

1. Installation

2. Setup map

3. Layer Adapters

4. NgwMap

5. Vector

6. No map

7. Extended

Initialize with ready map instance | LIVE

8. React

NgwMap react component | LIVE

Development

npm install -g yarn
yarn set version stable
yarn plugin import workspace-tools
yarn workspaces foreach --all exec 'ncu -u -f /@nextgis/'