/ngf-tutorial

Primary LanguageJavaScriptMIT LicenseMIT

NextGIS Frontend tutorial

http://code.nextgis.com

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

Helpful links

Content

1. Installation

  1. Load script from cdn | LIVE
  2. Install from npm | LIVE
  3. Import browser modules from cdn | LIVE

2. Setup map

  1. View | LIVE
  2. QMS and OSM | LIVE
  3. Frameworks | LIVE
  4. Map adapters | LIVE
  5. Starter Kit | LIVE
  6. Controls | LIVE
  7. Events | LIVE

3. Layer Adapters

  1. GeoJSON | LIVE
  2. Raster | LIVE
  3. Custom | LIVE
  4. Baselayers | LIVE
  5. Refresh | LIVE

4. NgwMap

  1. Resources | LIVE
  2. AddNgwLayer | LIVE
  3. Identify | LIVE

5. Vector

  1. Painting | LIVE
  2. Selection | LIVE
  3. Popup | LIVE
  4. Filtering | LIVE

6. No map

  1. NgwConnector | LIVE
  2. NgwKit | LIVE
  3. Bonus NgwOrm | LIVE

7. Extended

  1. Initialize with ready map instance | LIVE

8. React

  1. NgwMap react component | LIVE

http://nextgis.com

Development

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