arcgis_api_javascript.html
Home
/
_site /
docs /
services /
arcgis_api_javascript.html
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>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>ArcGIS API for JavaScript | Oregon GEO</title> <meta name="generator" content="Jekyll v3.8.7" /> <meta property="og:title" content="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/services/arcgis_api_javascript.html" /> <meta property="og:url" content="/home/docs/services/arcgis_api_javascript.html" /> <meta property="og:site_name" content="Oregon GEO" /> <meta name="twitter:card" content="summary" /> <meta property="twitter:title" content="ArcGIS API for JavaScript" /> <script type="application/ld+json"> {"url":"/home/docs/services/arcgis_api_javascript.html","headline":"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 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/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 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/services/mapping_examples.html" class="nav-list-link">Mapping Examples</a><ul class="nav-list"><li class="nav-list-item active"> <a href="/home/docs/services/arcgis_api_javascript.html" class="nav-list-link active">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"><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 "><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 "> <a href="/home/docs/imagery/tile_service_arcgis.html" class="nav-list-link">(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/services.html">GIS Services</a></li> <li class="breadcrumb-nav-list-item"><a href="/home/docs/services/mapping_examples.html">Mapping Examples</a></li> <li class="breadcrumb-nav-list-item"><span>ArcGIS API for JavaScript</span></li> </ol> </nav> <div id="main-content" class="main-content" role="main"> <h1 id="arcgis-api-for-javascript"> <a href="#arcgis-api-for-javascript" class="anchor-heading" aria-labelledby="arcgis-api-for-javascript"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> ArcGIS API for JavaScript </h1> <p>The Esri <a href="https://developers.arcgis.com/javascript/latest/guide/get-api/">ArcGIS API for JavaScript</a> natively supports adding our GIS layers to a map with the <a href="https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html" target="_blank">FeatureLayer</a> layer type.</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 add the service, <a href="http://navigator.state.or.us/arcgis/rest/services/Framework/Haz_GeneralMap_WM/MapServer/3" target="_blank">Oregon 500-yr Flood Zones</a>, to a web map using the latest version of the <a href="https://developers.arcgis.com/javascript/latest/guide/quick-start/" target="_blank">ArcGIS API for JavaScript</a>.</p> <ul> <li><a href="https://oregongeo.github.io/developer_examples/gis_services/mapping_examples/arcgis_api_for_js/index.html" target="_blank">View Example</a></li> <li><a href="https://github.com/oregonGEO/developer_examples/tree/gh-pages/gis_services/mapping_examples/arcgis_api_for_js" target="_blank">View Source</a></li> </ul> <p>To get started, create a file called <code class="highlighter-rouge">index.html</code>.</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><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>500 Year Flood Zones<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 <code class="highlighter-rouge">CSS</code> and <code class="highlighter-rouge">JavaScript</code> files for the ArcGIS API for JavaScript from the cdn <code class="highlighter-rouge">https://js.arcgis.com</code>.</li> <li>Create the <code class="highlighter-rouge"><div></code> with an ID of <code class="highlighter-rouge">myMap</code> and set it’s <code class="highlighter-rouge">height</code> and <code class="highlighter-rouge">width</code> to fill up the entire window.</li> <li>Include our own JavaScript file <code class="highlighter-rouge">main.js</code> -> <code class="highlighter-rouge"><script src="./main.js"></script></code></li> </ol> <p>Next, we need to actually create the <code class="highlighter-rouge">main.js</code> file for our site.</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/FeatureLayer</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">FeatureLayer</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">hybrid</span><span class="dl">"</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="mf">123.018723</span><span class="p">,</span><span class="mf">44.925675</span><span class="p">],</span>
<span class="na">zoom</span><span class="p">:</span> <span class="mi">12</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">featureLayer</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">FeatureLayer</span><span class="p">({</span>
<span class="na">url</span><span class="p">:</span> <span class="dl">"</span><span class="s2">http://navigator.state.or.us/arcgis/rest/services/Framework/Haz_GeneralMap_WM/MapServer/3</span><span class="dl">"</span>
<span class="p">});</span>
<span class="nx">map</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">featureLayer</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 (<code class="highlighter-rouge">esri/map</code>, <code class="highlighter-rouge">esri/views/MapView</code>, <code class="highlighter-rouge">esri/layers/FeatureLayer</code>) using the <a href="https://requirejs.org/docs/whyamd.html" target="_blank">AMD</a> format.</li> <li>Instantiate our map and view.</li> <li>Instantiate a new feature layer, providing the url to the 500-yr flood zone service.</li> <li>Add the layer to our map.</li> </ol> </div> </div> <div class="search-overlay"></div> </div> </body> </html>