How to use OpenLayers

This tutorial shows how to create a map and display it on a web page using MapTiler Cloud.

  1. Create a basic HTML file.

  2. Include the OpenLayers JavaScript and CSS files in the <head> of your HTML file.

  3. Create a <div> element with a certain id where you want your map to be.

    Add <div> tag into your page. This div will be the container where the map will be loaded.

  4. The div must have non-zero height. Go to the head style section and copy the following lines:

    
 #map {
     position: absolute;
     top: 0;
     bottom: 0;
     width: 100%;
 }

  5. Finally, load the map with the style. Go back to the body script section and white:

    
 const key = 'YOUR_MAPTILER_API_KEY_HERE';
 const source = new ol.source.TileJSON({
   url: `https://api.maptiler.com/maps/streets-v2/tiles.json?key=${key}`,
   tileSize: 512,
   crossOrigin: 'anonymous'
 });

 const map = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: source
     })
   ],
   target: 'map',
   view: new ol.View({
     constrainResolution: true,
     center: ol.proj.fromLonLat([16.62662018, 49.2125578]),
     zoom: 14
   })
 });

  6. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

  7. Create an attribution control that is not collapsible so that it is always visible.

    
 const key = 'YOUR_MAPTILER_API_KEY_HERE';
 const source = new ol.source.TileJSON({
   url: `https://api.maptiler.com/maps/streets-v2/tiles.json?key=${key}`,
   tileSize: 512,
   crossOrigin: 'anonymous'
 });

 const attribution = new ol.control.Attribution({
   collapsible: false,
 });

 const map = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: source
     })
   ],
   target: 'map',
   view: new ol.View({
     constrainResolution: true,
     center: ol.proj.fromLonLat([16.62662018, 49.2125578]),
     zoom: 14
   })
 });

  8. Add the new attribution control to the map. We will modify the default controls on the map so that the attribution is always visible using the non-collapsible attribution control.

    
 const map = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: source
     })
   ],
   controls: ol.control.defaults.defaults({attribution: false}).extend([attribution]),
   target: 'map',
   view: new ol.View({
     constrainResolution: true,
     center: ol.proj.fromLonLat([16.62662018, 49.2125578]),
     zoom: 14
   })
 });

Learn more

There are two ways to use MapTiler maps in OpenLayers:

If you do not know the difference between Raster and Vector or you have doubts about which format is better for you, consult the article Raster vs Vector Map Tiles: What Is the Difference Between the Two Data Types?