Below are the instructions to get started with the development environment and the project on Ubuntu, Windows and other OSs.

• Install Node.js:

  sudo apt update
  sudo apt install nodejs
  sudo apt install npm

• Install Atom or any code editor of your choice:

  wget -qO - https://packagecloud.io/AtomEditor/atom/gpgkey | sudo apt-key add -
  sudo sh -c 'echo "deb [arch=amd64] https://packagecloud.io/AtomEditor/atom/any/ any main" > /etc/apt/sources.list.d/atom.list'
  sudo apt-get update
  sudo apt-get install atom

• Create an empty directory for the project

  mkdir my-project
  cd my-project

• In the newly created folder, initialize the Node.js project:

  npm init

• Add the OpenLayers and Parcel packages to the application:

  npm install ol
  npm install --save-dev parcel-bundler

• Install Node.js: download the installer from [here]

• Install Atom or any code editor of your choice: download the installer from [here]

• Create an empty directory for the project.

• In the newly created folder, initialize the Node.js project using the command line:

  npm init

• Add the OpenLayers and Parcel packages to the application:

  npm install ol
  npm install --save-dev parcel-bundler

After having followed the above steps, create two files:

• index.html containing the HTML code, CSS styles, and the map container;
• index.js containing the JavaScript code for your mapping application.

You also have to add a start script line in the package.json file (the file is automatically created with npm init in the previous steps) to easily run your application with Parcel:

...
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "parcel index.html",
  "build": "parcel build --public-url . index.html"
},
...

Once some code has been written in the index.html and index.js files, you will be able to test you code by running:

npm start

in your project directory. You can now test your web mapping application opening the URL http://localhost:1234/ in your favorite browser.

• Map: https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html
• View: https://openlayers.org/en/latest/apidoc/module-ol_View-View.html
• Layer: https://openlayers.org/en/latest/apidoc/module-ol_layer_Layer-Layer.html
• Source: https://openlayers.org/en/latest/apidoc/module-ol_source_Source-Source.html

This diagram represent the various classes and attributes used in the project as well as their interrelations:

• OpenLayers Homepage: https://openlayers.org
• OpenLayers API: https://openlayers.org/en/latest/apidoc/
• OpenLayers Examples: https://openlayers.org/en/latest/examples/
• OpenLayers Package: https://www.npmjs.com/package/ol
• OpenLayers on GitHub: https://github.com/openlayers/openlayers
• Node.js: https://nodejs.org
• Atom Editor: https://atom.io/