How to use MapTiler with ArcGIS

This article shows how to open map tiles stored in MapTiler 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. Additionally, you will get sample code for this layer to use with ArcGIS Maps SDK for JavaScript.

How to build a  WMTS endpoint in MapTiler

In order to connect a tileset via WMTS in ArcGIS, you have to create it first. Go to your MapTiler account at MapTiler - 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 API URL, that connects the software directly to your map in MapTiler. 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” - “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 Default layers as a background.

05.png

Use Ostrava Tiles with the ArcGIS Maps SDK for JavaScript

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>MapTiler WebTileLayer with ArcGIS Maps SDK for JavaScript</title>
    
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.32/"></script>
    
    <script>
      require(["esri/layers/WebTileLayer", "esri/Map", "esri/views/MapView", "esri/layers/support/TileInfo"], (WebTileLayer, Map, MapView, TileInfo) => {
        const map = new Map({
          basemap: "gray-vector",
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 16,
          center: [18.17263, 49.82202]
        });

        const tiledLayer = new WebTileLayer({
          urlTemplate: "https://api.maptiler.com/tiles/YOUR_MAPTILER_TILESET_ID_HERE/{z}/{x}/{y}.png?key=YOUR_MAPTILER_API_KEY_HERE",
          tileInfo: TileInfo.create({size: 512}),
          copyright: 'Rendered with <a href="https://www.maptiler.com/desktop/">MapTiler Desktop</a>'
        });

        map.add(tiledLayer);
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Turn your geodata into tiled maps
MapTiler - Tiles Georeferencer