How to use MapTiler with ArcGIS

This article shows how to open map tiles stored in MapTiler Cloud as WMTS and XYZ tiles in ArcGIS. 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 ArcGIS. 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 build a  WMTS endpoint in MapTiler Cloud

In order to connect a tileset via WMTS in ArcGIS, 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.

0.png

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

How to connect MapTiler WMTS to ArcGIS

1. In ArcGIS, select Insert - Connections and a new WMTS Server (from the top menu).

01.png

2. The new window will pop up, now edit the Server URL. This is a MapTiler Cloud API URL, that connects the software directly to your map in MapTiler Cloud. Then click OK to save.

02.png

3. Go to the main window and unroll the Servers bar in the right Catalog menu. Find your newly added WMTS connection. In our case, it is “MapTiler Cloud” - “Ostrava”.

03.png

4. Still in the main window, click the “New map” icon (top left) and select a new map.

04.png

5. The WMTS that we previously connected should appear as a new map layer. To achieve that, you should drag&drop the “Ostrava” layer from the catalog to the map. Another way to go is to right-click on the layer and the “add to the current map” option will appear.

For better context, you can also add one of the MapTiler Cloud Default layers as a background.

05.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
MapTiler Cloud - Tiles