How to build a map with the OpenLayers Library

This tutorial will show you how to build a map using MapTiler API and OpenLayers JavaScript Library. You will learn how to build a map viewer and how to add to a map Point, Circle, Popup, and GeoJSON to your map.

JavaScript libraries are one of the ways how to insert a dynamic map in your web applications. OpenLayers is a robust and complex web mapping solution for your applications. It can display geographical information as map tiles, or vector data. It can be used with raster tiles, vector tiles can be displayed in OpenLayers as well using the ol-mapbox-style plugin.

Create map viewer with OpenLayers

Creating a basic map viewer is very straightforward using MapTiler Cloud. You can find code examples in your account. Just go to MapTiler Cloud, log in or create your free account. Then choose any of the map styles, for example, Streets, and click on OpenLayer in Vector or Raster Tiles section. In the following examples, we will work with Vector Tiles.

The code example in MapTiler Cloud has these elements:

In the header of an HTML document is loaded the OpenLayers library

<script src="https://cdn.maptiler.com/ol/v6.0.0/ol.js"></script>

and ol-mapbox-style plugin for vector tiles

<script src="https://cdn.maptiler.com/ol-mapbox-style/v5.0.2/olms.js"></script>

In the body section, it has <div> element which loads your map from the following script.

<div id="map">
    <a href="https://www.maptiler.com" style="position:absolute;left:10px;bottom:10px;z-index:999;"><img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
</div>
<p><a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a></p>

Then follows JavaScript for creating a map

This line creates an OpenLayers Map object.

var map = new ol.Map({ ... });.

The following line adds MapTiler API for your map, a unique key is already included.

var styleJson = 'https://api.maptiler.com/maps/streets/style.json?key=Get_your_own_key'

Don’t forget to protect your map key if you publish your map.

The ol.View specify the center, resolution, and zoom level of the map

view: new ol.View({
      constrainResolution: true,
      center: ol.proj.fromLonLat([-10.48988, -0.30906]),
      zoom: 2
    })

The following line will load your map style.

olms.apply(map, styleJson)

This all together makes a basic map viewer for maps hosted via MapTiler Cloud. Open Layers gives you variability of functions that can be added to the map. Below is described how to add a point, circle, popup, and GeoJSON.

How to add a point on the map

This snippet code will create a new vector point named point at Venice. Don’t forget to add this point to your map as a new layer using map.addLayer(point).

var point = new ol.layer.Vector({
     source: new ol.source.Vector({
         features: [
             new ol.Feature({
                 geometry: new ol.geom.Point(ol.proj.fromLonLat([12.33816, 45.43393]))
             })
         ]
     }),
 });

map.addLayer(point);

How to add Circle

For adding Circle we have to start with setting up its parameters.

var centerLongitudeLatitude = ol.proj.fromLonLat([12.33816, 45.43393]);
var viewProjection = map.getView().getProjection();
var pointResolution = ol.proj.getPointResolution(viewProjection , 1, centerLongitudeLatitude );
var radius = 2600 / pointResolution;

The next step is to add a new layer with a circle and define its style.

zIndex determines the order of layers.

var Circle = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [new ol.Feature(new ol.geom.Circle(centerLongitudeLatitude, radius))]
  }),
  style: [
    new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'blue',
          width: 2
        }),
        fill: new ol.style.Fill({
          color: 'rgba(0, 0, 255, 0.1)'
      })
    })
  ],
  zIndex: 6,
});
map.addLayer(fcircle)

Again don’t forget to load the circle to your map as a new layer using map.addLayer(Circle)

How to add Pop-up on the map

For adding a popup, you have to create a new <div id="popup"> element right after the <div id="map"> element.

  <div id="popup" class="ol-popup"> 
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
  </div>

By adding the following code snippet in the <script> section, initialize the popup. Our popup will open when you click on any place on the map and the popup will show the text “Hello world! I am popup”

 var container = document.getElementById('popup');
 var content = document.getElementById('popup-content');
 var closer = document.getElementById('popup-closer');

 var overlay = new ol.Overlay({
     element: container,
     autoPan: true,
     autoPanAnimation: {
         duration: 250
     }
 });
 map.addOverlay(overlay);

 closer.onclick = function() {
     overlay.setPosition(undefined);
     closer.blur();
     return false;
 };
 
 map.on('singleclick', function (event) {
     if (map.hasFeatureAtPixel(event.pixel) === true) {
         var coordinate = event.coordinate;

         content.innerHTML = '<b>Hello world!</b><br />I am a popup.';
         overlay.setPosition(coordinate);
     } else {
         overlay.setPosition(undefined);
         closer.blur();
     }
 });

To set the style of popup add this part into the <style> section in the <head> of our HTML document and choose properties of your popup. We set a white background with shadows around

 .ol-popup {
        position: absolute;
        background-color: white;
        box-shadow: 0 1px 4px rgba(0,0,0,0.2);
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -40px;
        min-width: 110px;
      }

How to add GeoJSON

Adding GeoJSON to the map will be demonstrated on datasets visualizing subway stations and lines in New York.

You can host your dataset via MapTiler Cloud as we did. Upload easily a GeoJSON file or create a new dataset from the Scratch using Vector Data Editor.

To add a new layer with your dataset add this code to the <script> in the body of your HTML document. In the URL section, we included datasets.

Dataset showing stations will be displayed over dataset showing line. This is set with zIndex, a higher number means a higher layer.

var SubwStations = new ol.layer.Vector({
        source: new ol.source.Vector({
          format: new ol.format.GeoJSON(),
          url: `https://api.maptiler.com/data/ + your data set /features.json?key=Get_your_own_key`,
        }),
        zIndex: 6,
      });

var SubwLines = new ol.layer.Vector({
        source: new ol.source.Vector({
          format: new ol.format.GeoJSON(),
          url: `https://api.maptiler.com/data/ + your data set /features.json?key=Get_your_own_key`,
        }),
        zIndex: 5,
      });
map.addLayer(SubwStations)
map.addLayer(SubwLines)

Finally, add map.addLayer(SubwStations) and map.addLayer(SubwLines) at the end of the script for loading them as layers.

OpenLayers Workshop
OpenLayers Documentation
OpenLayers Examples