How to use MapTiler with QGIS

This article shows how to open map tiles stored in MapTiler Cloud as WMTS and XYZ tiles in QGIS. You can produce these georeferenced tiles in MapTiler Engine or in the Georeferencer. Setting up a WMTS service is a very powerful method of using maps from MapTiler Engine in QGIS. It allows multiple users to access the map at the same time without the need to distribute your map files. The downside is a bit higher complexity of the setup and the necessity of an internet connection. Additionally, you will get sample code for this layer to use with OpenLayers and Leaflet libraries.

How to connect MapTiler raster tiles via QGIS plugin

The process of connecting raster tiles to QGIS via MapTiler QGIS plugin is simple. Follow these steps:

  1. Install MapTiler QGIS plugin according to this guide.
  2. Set up the authentication for the QGIS plugin according to this guide.
  3. Right-click the MapTiler plugin in the left vertical menu of QGIS.
  4. Select Add a new map
  5. Select a map from the list and click OK.
  6. Double-click the map you have just selected to add it to your layer view.
  7. Continue working on your edits.

How to build a  WMTS endpoint in MapTiler Cloud

In order to connect a tileset via WMTS in QGIS, you have to create it first. Go to your MapTiler Cloud account at MapTiler Cloud - Tiles and select a tileset, in this example the “Ostrava” tileset.

Screenshot_2022-02-09_at_17.32.33.png

Scroll down and copy the URL for the Web map tile service. That is the URL that we will use in QGIS in the next part of the tutorial.

How to connect MapTiler WMTS to QGIS

  1. In QGIS, add a new WMS/WMTS layer (from the right menu, by navigating to “Layer” -> “Add Layer” -> “Add WMS/WMTS Layer…”, or by using Ctrl+Shift+W shortcut).

    1.png

  2. The new window will pop up, click on “New”.

    2.png

  3. Fill in the “Name” field (name of your service) and “URL” by XML’s URL, and click OK.

    3.png

  4. Then click the Connect button.

    4.png

  5. The new layer will be available in the Browser panel. Double-click it to open the layer.

    5a.png

  6. See your newly connected WMTS layer with tiles in the main window.

    6.png

  7. Add one of the MapTiler default maps as background for better context.

    7.png

How to connect MapTiler XYZ Tiles to QGIS

The process of connecting XYZ Tiles to QGIS is similar to the process of connecting a WMTS layer.

Here is what you need to do:

  1. Right-click the XYZ tiles in the left menu.

  2. Select New Connection…

  3. Fill in the name and URL of your new XYZ tile connection. Set up the min and max zoom levels for the visibility of your tiles. Hit OK to save.

  4. Connect to your new XYZ tile layer in the left menu and enjoy the XYZ tile layer in the main window.

    2a.png

    3a.png

Use Ostrava Tiles with the OpenLayers map library

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="https://cdn.maptiler.com/ol/v6.0.0/ol.css" type="text/css">
    <script src="https://cdn.maptiler.com/ol/v6.0.0/ol.js"></script>
    <style>
      #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
    </style>
  </head>
  <body>
    <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>Rendered with <a href="https://www.maptiler.com/engine/">MapTiler Engine</a></p>
    <script>
      var source = new ol.source.TileJSON({
        url: 'https://api.maptiler.com/tiles/05225db4-24f6-43f7-8af8-b630dc5f81c6/tiles.json?key=_YOUR_KEY_HERE_',
        tileSize: 512,
        crossOrigin: 'anonymous'
      });

      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: source
          })
        ],
        target: 'map',
        view: new ol.View({
          constrainResolution: true,
          center: ol.proj.fromLonLat([18.17466, 49.82224]),
          zoom: 15
        })
      });
    </script>
  </body>
</html>

Use Ostrava Tiles with the Leaflet map library

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
  <style>
    #map {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <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>Rendered with <a href="https://www.maptiler.com/engine/">MapTiler Engine</a></p>
  <script>
    var map = L.map('map').setView([49.82202, 18.17263], 16);
    L.tileLayer('https://api.maptiler.com/tiles/05225db4-24f6-43f7-8af8-b630dc5f81c6/{z}/{x}/{y}.png?key=_YOUR_KEY_HERE_', {
      tileSize: 512,
      zoomOffset: -1,
      minZoom: 1,
      attribution: "Rendered with \u003ca href=\"https://www.maptiler.com/engine/\"\u003eMapTiler Engine\u003c/a\u003e",
      crossOrigin: true
    }).addTo(map);  
  </script>
</body>
</html>

Georeferencer
OpenLayers library
Leaflet library
QGIS Homepage
MapTiler Cloud - Tiles