Import from in Openlayers

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


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.

Tags:

Javascript

Openlayers

Recent Posts