tile_service_arcgis.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>(Tile Layer) ArcGIS API for JavaScript - Oregon GEO</title>
<link rel="stylesheet" href="/home/assets/css/just-the-docs.css">
<script type="text/javascript" src="/home/assets/js/vendor/lunr.min.js"></script>
<script type="text/javascript" src="/home/assets/js/just-the-docs.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="page-wrap">
<div class="side-bar">
<a href="/home" class="site-title fs-6 lh-tight">Oregon GEO</a>
<span class="fs-3"><button class="js-main-nav-trigger navigation-list-toggle btn btn-outline" type="button" data-text-toggle="Hide">Menu</button></span>
<div class="navigation main-nav js-main-nav">
<nav role="navigation" aria-label="Main navigation">
<ul class="navigation-list">
<li class="navigation-list-item">
<a href="/home/404.html" class="navigation-list-link"></a>
</li>
<li class="navigation-list-item">
<a href="/home/" class="navigation-list-link">Home</a>
</li>
<li class="navigation-list-item">
<a href="/home/docs/arcgis-online.html" class="navigation-list-link">ArcGIS Online</a>
<ul class="navigation-list-child-list ">
<li class="navigation-list-item ">
<a href="/home/docs/arcgis-online/getting-started.html" class="navigation-list-link">Getting Started</a>
</li>
<li class="navigation-list-item ">
<a href="/home/docs/arcgis-online/contacts.html" class="navigation-list-link">Contacts</a>
</li>
<li class="navigation-list-item ">
<a href="/home/docs/arcgis-online/roles.html" class="navigation-list-link">Roles</a>
</li>
<li class="navigation-list-item ">
<a href="/home/docs/arcgis-online/training.html" class="navigation-list-link">Training</a>
</li>
<li class="navigation-list-item ">
<a href="/home/docs/arcgis-online/tools.html" class="navigation-list-link">Tools</a>
<ul class="navigation-list-child-list">
<li class="navigation-list-item ">
<a href="/home/docs/arcgis-online/thumbnail-builder.html" class="navigation-list-link">Thumbnail Builder</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="navigation-list-item">
<a href="/home/docs/services.html" class="navigation-list-link">GIS Services</a>
<ul class="navigation-list-child-list ">
<li class="navigation-list-item ">
<a href="/home/docs/services/inventory_3857.html" class="navigation-list-link">Inventory (EPSG:3857)</a>
</li>
<li class="navigation-list-item ">
<a href="/home/docs/services/inventory_2992.html" class="navigation-list-link">Inventory (EPSG:2992)</a>
</li>
<li class="navigation-list-item ">
<a href="/home/docs/services/mapping_examples.html" class="navigation-list-link">Mapping Examples</a>
<ul class="navigation-list-child-list">
<li class="navigation-list-item ">
<a href="/home/docs/services/arcgis_api_javascript.html" class="navigation-list-link">ArcGIS API for JavaScript</a>
</li>
</ul>
</li>
<li class="navigation-list-item ">
<a href="/home/docs/services/query_examples.html" class="navigation-list-link">Query Examples</a>
<ul class="navigation-list-child-list">
<li class="navigation-list-item ">
<a href="/home/docs/services/python.html" class="navigation-list-link">Python 3</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="navigation-list-item active">
<a href="/home/docs/imagery.html" class="navigation-list-link">Imagery Services</a>
<ul class="navigation-list-child-list ">
<li class="navigation-list-item ">
<a href="/home/docs/imagery/inventory_3857.html" class="navigation-list-link">Inventory (EPSG:3857)</a>
</li>
<li class="navigation-list-item ">
<a href="/home/docs/imagery/inventory_2992.html" class="navigation-list-link">Inventory (EPSG:2992)</a>
</li>
<li class="navigation-list-item active">
<a href="/home/docs/imagery/examples.html" class="navigation-list-link">Examples</a>
<ul class="navigation-list-child-list">
<li class="navigation-list-item active">
<a href="/home/docs/imagery/tile_service_arcgis.html" class="navigation-list-link active">(Tile Layer) ArcGIS API for JavaScript</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="navigation-list-item">
<a href="/home/docs/geocoder.html" class="navigation-list-link">Geocoder</a>
</li>
<li class="navigation-list-item">
<a href="/home/docs/software.html" class="navigation-list-link">Software & Training</a>
<ul class="navigation-list-child-list ">
<li class="navigation-list-item ">
<a href="/home/docs/software/products.html" class="navigation-list-link">Esri Products</a>
</li>
<li class="navigation-list-item ">
<a href="/home/docs/software/training.html" class="navigation-list-link">Training</a>
</li>
</ul>
</li>
<li class="navigation-list-item">
<a href="/home/docs/contact.html" class="navigation-list-link">Contact</a>
</li>
</ul>
</nav>
</div>
<footer role="contentinfo" class="site-footer">
<p class="text-small text-grey-dk-000 mb-0">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
</footer>
</div>
<div class="main-content-wrap js-main-content" tabindex="0">
<div class="page-header">
<div class="main-content">
<div class="search js-search">
<div class="search-input-wrap">
<input type="text" class="js-search-input search-input" tabindex="0" placeholder="Search Oregon GEO" aria-label="Search Oregon GEO" autocomplete="off">
<svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
</div>
<div class="js-search-results search-results-wrap"></div>
</div>
<ul class="list-style-none text-small mt-md-1 mb-md-1 pb-4 pb-md-0 js-aux-nav aux-nav">
<li class="d-inline-block my-0"><a href="//www.oregon.gov/GEO/Pages/index.aspx">Oregon Geospatial Enterprise Office</a></li>
</ul>
</div>
</div>
<div class="main-content">
<nav class="breadcrumb-nav">
<ol class="breadcrumb-nav-list">
<li class="breadcrumb-nav-list-item"><a href="/home/docs/imagery.html">Imagery Services</a></li>
<li class="breadcrumb-nav-list-item"><a href="/home/docs/imagery/examples.html">Examples</a></li>
<li class="breadcrumb-nav-list-item"><span>(Tile Layer) ArcGIS API for JavaScript</span></li>
</ol>
</nav>
<div id="main-content" class="page-content" role="main">
<h1 id="consuming-a-tile-layer-using-the-arcgis-api-for-javascript">Consuming a Tile Layer Using the ArcGIS API for JavaScript</h1>
<p>Tile layers allows you work with a cached <a href="https://enterprise.arcgis.com/en/server/latest/publish-services/windows/what-is-a-map-service.htm" target="_blank">map service</a> exposed by the ArcGIS Server REST API and add it to a Map as a <a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-TileLayer.html" target="_blank">tile layer</a>. A cached service accesses tiles from a cache instead of dynamically rendering images. Because they are cached, tiled layers render faster than <a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-MapImageLayer.html" target="_blank">MapImageLayers</a>.</p>
<h2 id="example">Example</h2>
<p>In this example, we will be using the <a href="https://developers.arcgis.com/javascript/" target="_blank">ArcGIS API for JavaScript</a>.</p>
<ul>
<li><a href="https://oregongeo.github.io/developer_examples/imagery_services/arcgis_api_for_js/tile_service/" target="_blank">View Example</a></li>
<li><a href="https://github.com/oregonGEO/developer_examples/tree/gh-pages/imagery_services/arcgis_api_for_js/tile_service" target="_blank">View Source</a></li>
</ul>
<p>We will need to create two files to setup our project:</p>
<ol>
<li><code class="highlighter-rouge">index.html</code></li>
<li><code class="highlighter-rouge">main.js</code></li>
</ol>
<p>First, let’s create our <code class="highlighter-rouge">index.html</code> file:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"initial-scale=1,maximum-scale=1,user-scalable=no"</span> <span class="nt">/></span>
<span class="nt"><title></span>TileLayer<span class="nt"></title></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://js.arcgis.com/4.11/esri/themes/light/main.css"</span> <span class="nt">/></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://js.arcgis.com/4.11/"</span><span class="nt">></script></span>
<span class="nt"><style></span>
<span class="nt">html</span><span class="o">,</span>
<span class="nt">body</span><span class="o">,</span>
<span class="nf">#myMap</span> <span class="p">{</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
<span class="nl">height</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt"></style></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"myMap"</span><span class="nt">></div></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"./main.js"</span><span class="nt">></script></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<p>In the <code class="highlighter-rouge">index.html</code> file, we:</p>
<ol>
<li>Include th CSS and JavaScript files for the ArcGIS API for JavaScript from the cdn https://js.arcgis.com.</li>
<li>Create the <div> with an ID of <code class="highlighter-rouge">myMap</code> and set it’s height and width to fill up the entire window.</li>
<li>Include our own JavaScript file main.js -> <code class="highlighter-rouge"><script src="./main.js"></script></code></li>
</ol>
<p><code class="highlighter-rouge">main.js</code></p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">require</span><span class="p">([</span>
<span class="s2">"esri/Map"</span><span class="p">,</span>
<span class="s2">"esri/views/MapView"</span><span class="p">,</span>
<span class="s2">"esri/layers/TileLayer"</span>
<span class="p">],</span> <span class="kd">function</span> <span class="p">(</span><span class="nb">Map</span><span class="p">,</span> <span class="nx">MapView</span><span class="p">,</span> <span class="nx">TileLayer</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">layer</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">TileLayer</span><span class="p">({</span>
<span class="na">url</span><span class="p">:</span> <span class="s2">"https://imagery.oregonexplorer.info/arcgis/rest/services/NAIP_2009/NAIP_2009_WM/ImageServer"</span><span class="p">,</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">map</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Map</span><span class="p">({</span>
<span class="na">basemap</span><span class="p">:</span> <span class="s2">"gray"</span><span class="p">,</span>
<span class="na">layers</span><span class="p">:</span> <span class="p">[</span><span class="nx">layer</span><span class="p">]</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">MapView</span><span class="p">({</span>
<span class="na">container</span><span class="p">:</span> <span class="s2">"myMap"</span><span class="p">,</span>
<span class="na">map</span><span class="p">:</span> <span class="nx">map</span><span class="p">,</span>
<span class="na">center</span><span class="p">:</span> <span class="p">[</span><span class="o">-</span><span class="mi">123</span><span class="p">,</span> <span class="mi">44</span><span class="p">],</span>
<span class="na">zoom</span><span class="p">:</span> <span class="mi">13</span>
<span class="p">});</span>
<span class="p">});</span>
</code></pre></div></div>
<p>In the <code class="highlighter-rouge">main.js</code> file, we:</p>
<ol>
<li>Include the relevant modules (esri/map, esri/views/MapView, esri/layers/TileLayer) using the AMD format.</li>
<li>Instantiate our map and view.</li>
<li>Instantiate a <code class="highlighter-rouge">tile layer</code>, providing the url to the statewide imagery layer from <code class="highlighter-rouge">2009</code>.</li>
</ol>
</div>
</div>
</div>
</div>
</body>
</html>