tile_service_arcgis.md
layout: default title: (Tile Layer) ArcGIS API for JavaScript nav_order: 1 grand_parent: Imagery Services parent: Examples
Consuming a Tile Layer Using the ArcGIS API for JavaScript
Tile layers allows you work with a cached map service{:target="_blank"} exposed by the ArcGIS Server REST API and add it to a Map as a tile layer{:target="_blank"}. A cached service accesses tiles from a cache instead of dynamically rendering images. Because they are cached, tiled layers render faster than MapImageLayers{:target="_blank"}.
Example
In this example, we will be using the ArcGIS API for JavaScript{:target="_blank"}.
- View Example{:target="_blank"}
- View Source{:target="_blank"}
We will need to create two files to setup our project:
index.html
main.js
First, let's create our index.html
file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>TileLayer</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.11/"></script>
<style>
html,
body,
#myMap {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="myMap"></div>
<script src="./main.js"></script>
</body>
</html>
In the index.html
file, we:
- Include th CSS and JavaScript files for the ArcGIS API for JavaScript from the cdn https://js.arcgis.com.
- Create the with an ID of
myMap
and set it’s height and width to fill up the entire window. - Include our own JavaScript file main.js ->
<script src="./main.js"></script>
main.js
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer"
], function (Map, MapView, TileLayer) {
var layer = new TileLayer({
url: "https://imagery.oregonexplorer.info/arcgis/rest/services/NAIP_2009/NAIP_2009_WM/ImageServer",
});
var map = new Map({
basemap: "gray",
layers: [layer]
});
var view = new MapView({
container: "myMap",
map: map,
center: [-123, 44],
zoom: 13
});
});
In the main.js
file, we:
- Include the relevant modules (esri/map, esri/views/MapView, esri/layers/TileLayer) using the AMD format.
- Instantiate our map and view.
- Instantiate a
tile layer
, providing the url to the statewide imagery layer from2009
.