Hi - Am doing some R&D and have the SampleWorldCities coming from ArcGIS Enterprise - https://arcgis.cloud.eaglegis.co.nz/portal/home/webmap/viewer.html?webmap=f16c88ffa42a425e9e26ee932a3193d4 Using JS API 3.27, I need to toggle off the sub layers, for example "World". I am able to get all of the layer ID's from - map . _layers ; If I then call - layer = map . getLayer ( layersToSet [ i ] . layerID ) ; layer . hide ( ) The map does not toggle this layer off in the WebMap but the properties show that it has. Am I missing something? Or is there another way of handling this with using ArcGIS Server services with within WebMap? Thanks

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ArcGIS WebMap - MapImage Sub Layer Visibility

jiriteach

Hi - Am doing some R&D and have the SampleWorldCities coming from ArcGIS Enterprise - https://arcgis.cloud.eaglegis.co.nz/portal/home/webmap/viewer.html?webmap=f16c88ffa42a425e9e26ee932a3193d4

Using JS API 3.27, I need to toggle off the sub layers, for example "World".

I am able to get all of the layer ID's from -

map<SPAN class="punctuation token">.</SPAN>_layers<SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

If I then call -

layer <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN>layersToSet<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>layerID<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
layer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hide</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN>‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

The map does not toggle this layer off in the WebMap but the properties show that it has.

Am I missing something? Or is there another way of handling this with using ArcGIS Server services with within WebMap?

Thanks

Find more posts tagged with

Accepted answers

rscheitlin

Jithen,

Because you have to get the parent layer (ArcGISDyanmicMapServiceLayer class) then use the setVisibleLayers method on that layer.

map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"SampleWorldCities_9560"</SPAN><SPAN class="punctuation token">)</SPAN>‍<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setVisibleLayers</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

All comments

jiriteach

So effectively if I do the following -

var lyr = map.getLayer("SampleWorldCities_9560_2");
lyr.hide();

It does not work.

jiriteach

Thanks - Just had a deeper look. Should clarify that I am looking to turn off the sub layers within the service so not

<SPAN class="" style="color: #669900; border: 0px; font-weight: inherit; font-size: 14px;">SampleWorldCities_9560</SPAN>

But instead -

<SPAN class="" style="color: #669900; border: 0px; font-weight: inherit; font-size: 14px;">SampleWorldCities_9560_2</SPAN>

I have tried to turn off the main layer and that works OK. Turning off the sub layer for example for World does not work?

Thanks

rscheitlin

Jithen,

??? you can remove the whole legend portion and the code I provided still works using your webmap...

jiriteach

Thanks. This uses a legend to getLegendLayers and then the layer ID following to layer.hide().

I already have valid layer ID’s through the approach that I have used, just that layer.hide() doesn’t do anything. Well it does - and re-querying the layer shows it as not visible but it still shows on the map.

I don’t need a legend so keen to investigate other options.

Thanks

rscheitlin

Jithen,

Here is a working example of turning off a layer in your webmap.

<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>meta http<SPAN class="operator token">-</SPAN>equiv<SPAN class="operator token">=</SPAN><SPAN class="string token">"Content-Type"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/html; charset=utf-8"</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1, maximum-scale=1,user-scalable=no"</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Create web map <SPAN class="keyword token">from</SPAN> id<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/3.28/dijit/themes/claro/claro.css"</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/3.28/esri/css/esri.css"</SPAN><SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://js.arcgis.com/3.28/"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>config<SPAN class="operator token">=</SPAN><SPAN class="string token">"async:true"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
    <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
      <SPAN class="string token">"dojo/parser"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"dojo/ready"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"dijit/layout/BorderContainer"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"dijit/layout/ContentPane"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"dojo/dom"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/map"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/urlUtils"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/arcgis/utils"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/dijit/Legend"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"esri/dijit/Scalebar"</SPAN><SPAN class="punctuation token">,</SPAN>
      <SPAN class="string token">"dojo/domReady!"</SPAN>
    <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>
      parser<SPAN class="punctuation token">,</SPAN>
      ready<SPAN class="punctuation token">,</SPAN>
      BorderContainer<SPAN class="punctuation token">,</SPAN>
      ContentPane<SPAN class="punctuation token">,</SPAN>
      dom<SPAN class="punctuation token">,</SPAN>
      Map<SPAN class="punctuation token">,</SPAN>
      urlUtils<SPAN class="punctuation token">,</SPAN>
      arcgisUtils<SPAN class="punctuation token">,</SPAN>
      Legend<SPAN class="punctuation token">,</SPAN>
      Scalebar
    <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="token function">ready</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

        parser<SPAN class="punctuation token">.</SPAN><SPAN class="token function">parse</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="comment token">//if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL</SPAN>
        arcgisUtils<SPAN class="punctuation token">.</SPAN>arcgisUrl <SPAN class="operator token">=</SPAN> <SPAN class="string token">"https://arcgis.cloud.eaglegis.co.nz/portal/sharing/content/items"</SPAN><SPAN class="punctuation token">;</SPAN>
        arcgisUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"f16c88ffa42a425e9e26ee932a3193d4"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"map"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="comment token">//update the app</SPAN>
          dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"title"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>itemInfo<SPAN class="punctuation token">.</SPAN>item<SPAN class="punctuation token">.</SPAN>title<SPAN class="punctuation token">;</SPAN>
          dom<SPAN class="punctuation token">.</SPAN><SPAN class="token function">byId</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"subtitle"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>itemInfo<SPAN class="punctuation token">.</SPAN>item<SPAN class="punctuation token">.</SPAN>snippet<SPAN class="punctuation token">;</SPAN>

          <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">;</SPAN>

          <SPAN class="comment token">//add the scalebar</SPAN>
          <SPAN class="keyword token">var</SPAN> scalebar <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Scalebar</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
            scalebarUnit<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"english"</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

          <SPAN class="comment token">//add the legend. Note that we use the utility method getLegendLayers to get</SPAN>
          <SPAN class="comment token">//the layers to display in the legend from the createMap response.</SPAN>
          <SPAN class="keyword token">var</SPAN> legendLayers <SPAN class="operator token">=</SPAN> arcgisUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLegendLayers</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">info</SPAN><SPAN class="punctuation token">(</SPAN>legendLayers<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">var</SPAN> legendDijit <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Legend</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
            layerInfos<SPAN class="punctuation token">:</SPAN> legendLayers
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"legend"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          legendDijit<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="token function">setTimeout</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">var</SPAN> lyr <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"SampleWorldCities_9560"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            lyr<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hide</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">2000</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
    html<SPAN class="punctuation token">,</SPAN>
    body <SPAN class="punctuation token">{</SPAN>
      height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
      width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
      margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
      padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    body <SPAN class="punctuation token">{</SPAN>
      font<SPAN class="operator token">-</SPAN>family<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Helvetica"</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    #header <SPAN class="punctuation token">{</SPAN>
      background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> #E8E8E8<SPAN class="punctuation token">;</SPAN>
      height<SPAN class="punctuation token">:</SPAN> 65px<SPAN class="punctuation token">;</SPAN>
      margin<SPAN class="punctuation token">:</SPAN> 5px 5px<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    #mainWindow <SPAN class="punctuation token">{</SPAN>
      width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
      height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    #title <SPAN class="punctuation token">{</SPAN>
      padding<SPAN class="operator token">-</SPAN>top<SPAN class="punctuation token">:</SPAN> 2px<SPAN class="punctuation token">;</SPAN>
      padding<SPAN class="operator token">-</SPAN>left<SPAN class="punctuation token">:</SPAN> 10px<SPAN class="punctuation token">;</SPAN>
      font<SPAN class="operator token">-</SPAN>size<SPAN class="punctuation token">:</SPAN> 18pt<SPAN class="punctuation token">;</SPAN>
      font<SPAN class="operator token">-</SPAN>weight<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">700</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    #subtitle <SPAN class="punctuation token">{</SPAN>
      font<SPAN class="operator token">-</SPAN>size<SPAN class="punctuation token">:</SPAN> small<SPAN class="punctuation token">;</SPAN>
      padding<SPAN class="operator token">-</SPAN>left<SPAN class="punctuation token">:</SPAN> 40px<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    #rightPane <SPAN class="punctuation token">{</SPAN>
      background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> #E8E8E8<SPAN class="punctuation token">;</SPAN>
      margin<SPAN class="punctuation token">:</SPAN> 5px<SPAN class="punctuation token">;</SPAN>
      width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">20</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

    #map <SPAN class="punctuation token">{</SPAN>
      margin<SPAN class="punctuation token">:</SPAN> 5px<SPAN class="punctuation token">;</SPAN>
      padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>

  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN>body <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"claro"</SPAN><SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"mainWindow"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/BorderContainer"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"design:'headline'"</SPAN><SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"header"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/ContentPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"region:'top'"</SPAN><SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"title"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"subtitle"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"map"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/ContentPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"region:'center'"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"rightPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit/layout/ContentPane"</SPAN> data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"region:'right'"</SPAN><SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"legend"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
  <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>

<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

All Communities
Recent Posts
Followed Content
Community Help

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.