How to use OpenLayers

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

  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/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 or Get your FREE API key here.

  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/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?