tile_service_arcgis.md

Home / docs / imagery / tile_service_arcgis.md

97 lines | 2.912 kB Blame History Raw Download

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 from 2009.