tile_service_arcgis.html
Home
/
_site /
docs /
imagery /
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="shortcut icon" href="/home/favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="/home/assets/css/just-the-docs-default.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"> <!-- Begin Jekyll SEO tag v2.7.1 --> <title>(Tile Layer) ArcGIS API for JavaScript | Oregon GEO</title> <meta name="generator" content="Jekyll v3.8.7" /> <meta property="og:title" content="(Tile Layer) ArcGIS API for JavaScript" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="The Oregon Geospatial Enterprise Office offers GIS Software, Services, and Coordination." /> <meta property="og:description" content="The Oregon Geospatial Enterprise Office offers GIS Software, Services, and Coordination." /> <link rel="canonical" href="/home/docs/imagery/tile_service_arcgis.html" /> <meta property="og:url" content="/home/docs/imagery/tile_service_arcgis.html" /> <meta property="og:site_name" content="Oregon GEO" /> <meta name="twitter:card" content="summary" /> <meta property="twitter:title" content="(Tile Layer) ArcGIS API for JavaScript" /> <script type="application/ld+json"> {"url":"/home/docs/imagery/tile_service_arcgis.html","headline":"(Tile Layer) ArcGIS API for JavaScript","description":"The Oregon Geospatial Enterprise Office offers GIS Software, Services, and Coordination.","@type":"WebPage","@context":"https://schema.org"}</script> <!-- End Jekyll SEO tag --> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="svg-link" viewBox="0 0 24 24"> <title>Link</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"> <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> </svg> </symbol> <symbol id="svg-search" viewBox="0 0 24 24"> <title>Search</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"> <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </symbol> <symbol id="svg-menu" viewBox="0 0 24 24"> <title>Menu</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"> <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line> </svg> </symbol> <symbol id="svg-arrow-right" viewBox="0 0 24 24"> <title>Expand</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"> <polyline points="9 18 15 12 9 6"></polyline> </svg> </symbol> <symbol id="svg-doc" viewBox="0 0 24 24"> <title>Document</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"> <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline> </svg> </symbol> </svg> <div class="side-bar"> <div class="site-header"> <a href="/home/" class="site-title lh-tight"> Oregon GEO </a> <a href="#" id="menu-button" class="site-button"> <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg> </a> </div> <nav role="navigation" aria-label="Main" id="site-nav" class="site-nav"> <ul class="nav-list"><li class="nav-list-item"><a href="/home/" class="nav-list-link">Home</a></li><li class="nav-list-item"><a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a><a href="/home/docs/arcgis-online.html" class="nav-list-link">ArcGIS Online</a><ul class="nav-list "><li class="nav-list-item "><a href="/home/docs/arcgis-online/getting-started.html" class="nav-list-link">Getting Started</a></li><li class="nav-list-item "><a href="/home/docs/arcgis-online/contacts.html" class="nav-list-link">Contacts</a></li><li class="nav-list-item "><a href="/home/docs/arcgis-online/roles.html" class="nav-list-link">Roles</a></li><li class="nav-list-item "><a href="/home/docs/arcgis-online/training.html" class="nav-list-link">Training</a></li><li class="nav-list-item "><a href="/home/docs/arcgis-online/hub-premium.html" class="nav-list-link">Hub Premium</a></li><li class="nav-list-item "><a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a><a href="/home/docs/arcgis-online/tools.html" class="nav-list-link">Tools</a><ul class="nav-list"><li class="nav-list-item "> <a href="/home/docs/arcgis-online/thumbnail-builder.html" class="nav-list-link">Thumbnail Builder</a> </li></ul></li></ul></li><li class="nav-list-item"><a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a><a href="/home/docs/services.html" class="nav-list-link">GIS Services</a><ul class="nav-list "><li class="nav-list-item "><a href="/home/docs/services/inventory_3857.html" class="nav-list-link">Inventory (EPSG:3857)</a></li><li class="nav-list-item "><a href="/home/docs/services/inventory_2992.html" class="nav-list-link">Inventory (EPSG:2992)</a></li><li class="nav-list-item "><a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a><a href="/home/docs/services/mapping_examples.html" class="nav-list-link">Mapping Examples</a><ul class="nav-list"><li class="nav-list-item "> <a href="/home/docs/services/arcgis_api_javascript.html" class="nav-list-link">ArcGIS API for JavaScript</a> </li></ul></li><li class="nav-list-item "><a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a><a href="/home/docs/services/query_examples.html" class="nav-list-link">Query Examples</a><ul class="nav-list"><li class="nav-list-item "> <a href="/home/docs/services/python.html" class="nav-list-link">Python 3</a> </li></ul></li></ul></li><li class="nav-list-item active"><a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a><a href="/home/docs/imagery.html" class="nav-list-link">Imagery Services</a><ul class="nav-list "><li class="nav-list-item "><a href="/home/docs/imagery/inventory_3857.html" class="nav-list-link">Inventory (EPSG:3857)</a></li><li class="nav-list-item "><a href="/home/docs/imagery/inventory_2992.html" class="nav-list-link">Inventory (EPSG:2992)</a></li><li class="nav-list-item active"><a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a><a href="/home/docs/imagery/examples.html" class="nav-list-link">Examples</a><ul class="nav-list"><li class="nav-list-item active"> <a href="/home/docs/imagery/tile_service_arcgis.html" class="nav-list-link active">(Tile Layer) ArcGIS API for JavaScript</a> </li></ul></li></ul></li><li class="nav-list-item"><a href="/home/docs/geocoder.html" class="nav-list-link">Geocoder</a></li><li class="nav-list-item"><a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a><a href="/home/docs/software.html" class="nav-list-link">Software & Training</a><ul class="nav-list "><li class="nav-list-item "><a href="/home/docs/software/products.html" class="nav-list-link">Esri Products</a></li><li class="nav-list-item "><a href="/home/docs/software/training.html" class="nav-list-link">Training</a></li></ul></li><li class="nav-list-item"><a href="/home/docs/contact.html" class="nav-list-link">Contact</a></li></ul> </nav> <footer class="site-footer"> This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll. </footer> </div> <div class="main" id="top"> <div id="main-header" class="main-header"> <div class="search"> <div class="search-input-wrap"> <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search Oregon GEO" aria-label="Search Oregon GEO" autocomplete="off"> <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label> </div> <div id="search-results" class="search-results"></div> </div> <nav aria-label="Auxiliary" class="aux-nav"> <ul class="aux-nav-list"> <li class="aux-nav-list-item"> <a href="//www.oregon.gov/GEO/Pages/index.aspx" class="site-button" > Oregon Geospatial Enterprise Office </a> </li> </ul> </nav> </div> <div id="main-content-wrap" class="main-content-wrap"> <nav aria-label="Breadcrumb" 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="main-content" role="main"> <h1 id="consuming-a-tile-layer-using-the-arcgis-api-for-javascript"> <a href="#consuming-a-tile-layer-using-the-arcgis-api-for-javascript" class="anchor-heading" aria-labelledby="consuming-a-tile-layer-using-the-arcgis-api-for-javascript"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 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"> <a href="#example" class="anchor-heading" aria-labelledby="example"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 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="dl">"</span><span class="s2">esri/Map</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">esri/views/MapView</span><span class="dl">"</span><span class="p">,</span>
<span class="dl">"</span><span class="s2">esri/layers/TileLayer</span><span class="dl">"</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="dl">"</span><span class="s2">https://imagery.oregonexplorer.info/arcgis/rest/services/NAIP_2009/NAIP_2009_WM/ImageServer</span><span class="dl">"</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="dl">"</span><span class="s2">gray</span><span class="dl">"</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="dl">"</span><span class="s2">myMap</span><span class="dl">"</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 class="search-overlay"></div> </div> </body> </html>