1

I'm looking for some examples in OpenLayers to add in my project, and all those examples had something like this in their JavaScript:`

  import Map from 'ol/Map.js';
  import Overlay from 'ol/Overlay.js';
  import View from 'ol/View.js';
  import {toStringHDMS} from 'ol/coordinate.js';
  import TileLayer from 'ol/layer/Tile.js';
  import {fromLonLat, toLonLat} from 'ol/proj.js';
  import OSM from 'ol/source/OSM.js';`

Where did that come from and how can I use it?

2

Openlayers is a modular library. Map, for example, is one of the available classes and is defined in the source file ol/Map.js of the library.

By using import you can control which of the classes will be available in your application. E.g. the Map class can then be used to construct a new map:

new Map({...})

The development experience involves the use of Node's npm package manager and a bundler like Webpack or Parcel. The website has a good tutorial explaining how to set it up.

2

Running OpenLayers examples in a browser

The examples provided are not able to run on the client side (on a browser). Let's see an example.

Typical OpenLayers example

One very simple example of OpenLayers could be (separated in two files):

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OpenStreepMap layer using OpenLayers</title>
    <style>
      #map {
        width: 400px;
        height: 250px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="index.js"></script>
  </body>
</html>

index.js

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 0
  })
});

To run this very simple example on the browser, you have to make manual changes.

Modified files

These are the same files, with the required changes to run on the client:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>OpenStreepMap layer using OpenLayers</title>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <style>
      #map {
        width: 400px;
        height: 250px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="index.js"></script>
  </body>
</html>

index.js

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 0
  })
});

As you noticed, we made a few changes. In the html file, we included the OpenLayers CSS ol.css and the OpenLayers library ol.js.

In the Javascrit code, we made a few replacements.

+-----------------+--------------------+
| Original syntax | Alternative syntax |
+-----------------+--------------------+
| Map()           | ol.Map()           |
| TileLayer()     | ol.layer.Tile()    |
| OSM()           | ol.source.OSM()    |
| View()          | ol.View()          |
+-----------------+--------------------+

Running the modified example

You can use the any http server to show this example. If you have python installed, you can create a very simple server in the same folder with:

python3 -m http.server 7777

Then open your browser at http://localhost:7777 and you will see the example up and running.

OpenLayers example modified running on the browser

How the examples work without modifications

The examples are written as node applications, managed by npm, as documented at the OpenLayers site.

At development time, the OpenLayers classes are imported as files and all the development is done on the developer's computer.

To make it suitable to run on browsers, these applications must be deployed. This deployment includes all the necessary transformations to make them runnable on the browser.

So, after setting up the development environment and copying the previous example, if you do:

npm run build

you end up with a folder called dist ready to be used as any web application.

You can do:

cd dist
ls -la
total 7412
drwxrwxr-x 2 jgr jgr    4096 jun 12 23:45 .
drwxrwxr-x 6 jgr jgr    4096 jun 12 23:21 ..
-rw-rw-r-- 1 jgr jgr     287 jun 12 23:45 index.html
-rw-rw-r-- 1 jgr jgr   10609 jun 12 23:14 index.js
-rw-rw-r-- 1 jgr jgr   16510 jun 12 23:14 index.js.map
-rw-rw-r-- 1 jgr jgr  635781 jun 12 23:45 openlayers.4715ebdc.js
-rw-rw-r-- 1 jgr jgr 2256272 jun 12 23:45 openlayers.4715ebdc.js.map
-rw-rw-r-- 1 jgr jgr    3740 jun 12 23:45 openlayers.87e34a8b.css
-rw-rw-r-- 1 jgr jgr    6659 jun 12 23:45 openlayers.87e34a8b.css.map
-rw-rw-r-- 1 jgr jgr    4532 jun 12 23:14 openlayers.e31bb0bc.css
-rw-rw-r-- 1 jgr jgr    6138 jun 12 23:14 openlayers.e31bb0bc.css.map
-rw-rw-r-- 1 jgr jgr 1918965 jun 12 23:14 openlayers.e31bb0bc.js
-rw-rw-r-- 1 jgr jgr 2695642 jun 12 23:14 openlayers.e31bb0bc.js.map

All the generated files are there.

python3 -m http.server 8888

Open the browser and go to: http://localhost:8888/

You end up with the same result. In fact, the second way makes your application faster and is the recommended way.

OpenLayers example deployed using npm

  • It is required to build everytime code is modified? – neogeomat Jul 31 at 21:17
  • Yes, you have to rebuild it every time the code changes. – jgrocha Jul 31 at 21:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.