Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Vector tiles
Explore in the sandbox
Open in CodePen
View live sample
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.46/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.46/"></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/4cf7e1fb9f254dcda9c8fbadb15cf0f8/resources/styles/root.json");
map.addLayer(vtlayer);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>