Introduction

Modern JavaScript works best when using and authoring modules. The recommended way of using OpenLayers is installing the ol package. This tutorial walks you through setting up a simple dev environment, which requires node for everything to work.

In this tutorial, we will be using Parcel to bundle our application. There are several other options, some of which are linked from the README.

Application setup

Create a new empty directory for your project and navigate to it by running mkdir new-project && cd new-project. Initialize your project with

npx create-ol-app

This will install the ol package, set up a development environment with additional dependencies, and give you an index.html and main.js starting point for your application. By default, Parcel will be used as a module loader and bundler. See the create-ol-app documentation for details on using another bundler.

To start the development server

npm start

You can now visit http://localhost:1234/ to view your application. Begin making changes to the index.html and main.js files to add additional functionality.

To create a production bundle of your application, simply type

npm run build

and copy the dist/ folder to your production server.