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 Vite as a development tool and to bundle our application for production. 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

You will need to have git installed for the above command to work. If you receive an error, make sure that Git is installed on your system.

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, Vite 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:3000/ 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.