Hide Table of Contents
View Vector tiles sample in sandbox
Vector tiles

Description

This sample shows how to add a VectorTileLayer to a map. A VectorTileLayer displays cached data in vector format, making the styles of its layers customizable on the client.

Unlike image caches, vector tiles contain data for rendering the tile information. Because the data in VectorTileLayer is vector, it is stored in individual layers containing geometry, attributes, and styles that may be customized by the developer client-side.

Code

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title>VectorTileLayer sample</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
  <style>
    html, 
    body, 
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://js.arcgis.com/3.21/"></script>
  <script>
    require([
      "esri/map",
      "esri/layers/VectorTileLayer",
      "dojo/domReady!"
    ], function(Map, VectorTileLayer) {

      var map = new Map("map", {
        center: [2.3508, 48.8567], // longitude, latitude
        zoom: 2
      });

      //The URL referenced in the constructor may point to a style url JSON (as in this sample)
      //or directly to a vector tile service
      var vtlayer = new VectorTileLayer("https://www.arcgis.com/sharing/rest/content/items/92c551c9f07b4147846aae273e822714/resources/styles/root.json");
      map.addLayer(vtlayer);
    });
  </script>
</head>
<body>
  <div id="map"></div>
</body>
</html>