Hi community, I think I need your help 🙂 Using the ArcGIS API for JavaScript 4.13 I have created a web map containing a FeatureLayer. Now I want to be able to toggle the labels for this layers on and off. Initially I have set the labelsVisible property to false (Labels invisible :-)). By clicking the labels button in the layerlist once I set this property to true and the labels appear 🙂 With this labels button I can now toggle this property between true and false, but the labels are not removed when the property is set to false... What should I do to get rid of the labels? See screen capture and full code below to see what I have accomplished up to now. Any suggestions highly appreciated. TIA, Egge-Jan html > head > meta charset = " utf-8 " > meta name = " viewport " content = " initial-scale = 1, maximum-scale = 1, user-scalable = no " > title > Aan de slag met ArcGIS JavaScript - Labels aan- of uitzetten title > style > html, body, #viewDiv { padding : 0 ; margin : 0 ; height : 100% ; width : 100% ; } style > link rel = " stylesheet " href = " https://js.arcgis.com/4.13/esri/css/main.css " > script src = " https://js.arcgis.com/4.13/ " > script > script > require ( [ "esri/Map" , "esri/geometry/Point" , "esri/views/MapView" , "esri/layers/FeatureLayer" , "esri/widgets/LayerList" , "esri/widgets/Expand" ] , function ( Map , Point , MapView , FeatureLayer , LayerList , Expand ) { var map = new Map ( { basemap : { portalItem : { id : "7aea6fa913a94176a1074edb40690318" // Topo RD } } } ) ; var popupTemplate = { // autocasts as new PopupTemplate() title : "Provincie" , content : "{Provincienaam}" } ; var renderer = { type : "simple" , // autocasts as new SimpleRenderer() symbol : { type : "simple-fill" , // autocasts as new SimpleFillSymbol() style : "none" , // The polygon has no fill outline : { // autocasts as new SimpleLineSymbol() width : 1.5 , color : "#F5B041" // Hex Color Code } } } ; const labelClass = { // autocasts as new LabelClass() symbol : { type : "text" , // autocasts as new TextSymbol() color : "green" , haloColor : "black" , font : { // autocast as new Font() family : "Playfair Display" , size : 12 , weight : "bold" } } , labelPlacement : "above-center" , labelExpressionInfo : { expression : "$feature.Provincienaam" } } ; var nederlandseProvinciesLayer = new FeatureLayer ( { url : "https://services.arcgis.com/nSZVuSZjHpEZZbRo/arcgis/rest/services/Bestuurlijke_Grenzen_Provincies_2019/FeatureServer/0" , title : "Provincies (2019)" , popupTemplate : popupTemplate , renderer : renderer , labelingInfo : [ labelClass ] , labelsVisible : false } ) ; map . add ( nederlandseProvinciesLayer ) ; var view = new MapView ( { spatialReference : 28992 , container : "viewDiv" , map : map , center : new Point ( { x : 155000 , y : 463000 , spatialReference : 28992 } ) , zoom : 3 } ) ; var layerList = new LayerList ( { view : view , listItemCreatedFunction : function ( event ) { const item = event . item ; item . actionsSections = [ [ { title : "Labels" , className : "esri-icon-labels" , id : "labels" } ] ] ; } } ) ; layerList . on ( "trigger-action" , function ( event ) { if ( event . action . id === "labels" ) { if ( nederlandseProvinciesLayer . labelsVisible == false ) { nederlandseProvinciesLayer . labelsVisible = true ; console . log ( nederlandseProvinciesLayer . labelsVisible ) ; } else { nederlandseProvinciesLayer . labelsVisible = false ; console . log ( nederlandseProvinciesLayer . labelsVisible ) ; } } } ) ; layerListExpand = new Expand ( { expandIconClass : "esri-icon-layer-list" , // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/ expandTooltip : layerList . label , view : view , content : layerList , expanded : true , group : "top-right" } ) ; view . ui . add ( [ layerListExpand ] , "top-right" ) ; } ) ; script > head > body > div id = " viewDiv " > div > body > html >

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 JavaScript: Toggle Labels On and Off?

Egge-Jan_Pollé

Hi community,

I think I need your help 🙂

Using the ArcGIS API for JavaScript 4.13 I have created a web map containing a FeatureLayer.

Now I want to be able to toggle the labels for this layers on and off.

Initially I have set the labelsVisible property to false (Labels invisible :-)). By clicking the labels button in the layerlist once I set this property to true and the labels appear 🙂 With this labels button I can now toggle this property between true and false, but the labels are not removed when the property is set to false...

What should I do to get rid of the labels? See screen capture and full code below to see what I have accomplished up to now.

Any suggestions highly appreciated.

TIA,

Egge-Jan

<SPAN class="doctype token"><!DOCTYPE html></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">charset</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>utf-8<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">name</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewport<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">content</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>initial-scale<SPAN class="punctuation token">=</SPAN>1, maximum-scale<SPAN class="punctuation token">=</SPAN>1, user-scalable<SPAN class="punctuation token">=</SPAN>no<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>Aan de slag met ArcGIS JavaScript - Labels aan- of uitzetten<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
    <SPAN class="selector token">html, body, #viewDiv</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
      <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>

  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://js.arcgis.com/4.13/esri/css/main.css<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://js.arcgis.com/4.13/<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>

  <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN>  
      <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
        <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/geometry/Point"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/widgets/LayerList"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"esri/widgets/Expand"</SPAN>
      <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>Map<SPAN class="punctuation token">,</SPAN> Point<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN> LayerList<SPAN class="punctuation token">,</SPAN> Expand<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

      <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
          portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"7aea6fa913a94176a1074edb40690318"</SPAN> <SPAN class="comment token">// Topo RD</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="keyword token">var</SPAN> popupTemplate <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// autocasts as new PopupTemplate()</SPAN>
        title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Provincie"</SPAN><SPAN class="punctuation token">,</SPAN>
        content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"{Provincienaam}"</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">var</SPAN> renderer <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
        type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple"</SPAN><SPAN class="punctuation token">,</SPAN>  <SPAN class="comment token">// autocasts as new SimpleRenderer()</SPAN>
        symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-fill"</SPAN><SPAN class="punctuation token">,</SPAN>  <SPAN class="comment token">// autocasts as new SimpleFillSymbol()</SPAN>
          style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"none"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// The polygon has no fill</SPAN>
          outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>  <SPAN class="comment token">// autocasts as new SimpleLineSymbol()</SPAN>
            width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1.5</SPAN><SPAN class="punctuation token">,</SPAN>
            color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"#F5B041"</SPAN> <SPAN class="comment token">// Hex Color Code</SPAN>
          <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">const</SPAN> labelClass <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="comment token">// autocasts as new LabelClass()</SPAN>
        symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"text"</SPAN><SPAN class="punctuation token">,</SPAN>  <SPAN class="comment token">// autocasts as new TextSymbol()</SPAN>
            color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"green"</SPAN><SPAN class="punctuation token">,</SPAN>
            haloColor<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"black"</SPAN><SPAN class="punctuation token">,</SPAN>
            font<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>  <SPAN class="comment token">// autocast as new Font()</SPAN>
            family<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Playfair Display"</SPAN><SPAN class="punctuation token">,</SPAN>
            size<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">12</SPAN><SPAN class="punctuation token">,</SPAN>
            weight<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"bold"</SPAN>
            <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
        labelPlacement<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"above-center"</SPAN><SPAN class="punctuation token">,</SPAN>
        labelExpressionInfo<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            expression<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"$feature.Provincienaam"</SPAN>
        <SPAN class="punctuation token">}</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">var</SPAN> nederlandseProvinciesLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://services.arcgis.com/nSZVuSZjHpEZZbRo/arcgis/rest/services/Bestuurlijke_Grenzen_Provincies_2019/FeatureServer/0"</SPAN><SPAN class="punctuation token">,</SPAN>
        title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Provincies (2019)"</SPAN><SPAN class="punctuation token">,</SPAN>
        popupTemplate<SPAN class="punctuation token">:</SPAN> popupTemplate<SPAN class="punctuation token">,</SPAN>
        renderer<SPAN class="punctuation token">:</SPAN> renderer<SPAN class="punctuation token">,</SPAN>
        labelingInfo<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>labelClass<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
        labelsVisible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>nederlandseProvinciesLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

	  <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
	    spatialReference<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">28992</SPAN><SPAN class="punctuation token">,</SPAN> 
	    container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
	    map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
	    center<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Point</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>x<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">155000</SPAN><SPAN class="punctuation token">,</SPAN> y<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">463000</SPAN><SPAN class="punctuation token">,</SPAN> spatialReference<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">28992</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
	    zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3</SPAN>
	  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">var</SPAN> layerList <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">LayerList</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
        listItemCreatedFunction<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">const</SPAN> item <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>item<SPAN class="punctuation token">;</SPAN>
		  item<SPAN class="punctuation token">.</SPAN>actionsSections <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN>
            <SPAN class="punctuation token">[</SPAN>
                <SPAN class="punctuation token">{</SPAN>
                title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Labels"</SPAN><SPAN class="punctuation token">,</SPAN>
                className<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"esri-icon-labels"</SPAN><SPAN class="punctuation token">,</SPAN>
                id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"labels"</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>

      layerList<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"trigger-action"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>action<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">===</SPAN> <SPAN class="string token">"labels"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>nederlandseProvinciesLayer<SPAN class="punctuation token">.</SPAN>labelsVisible  <SPAN class="operator token">==</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            nederlandseProvinciesLayer<SPAN class="punctuation token">.</SPAN>labelsVisible  <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">;</SPAN>
            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>nederlandseProvinciesLayer<SPAN class="punctuation token">.</SPAN>labelsVisible<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
            nederlandseProvinciesLayer<SPAN class="punctuation token">.</SPAN>labelsVisible  <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">;</SPAN>
            console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>nederlandseProvinciesLayer<SPAN class="punctuation token">.</SPAN>labelsVisible<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>

      layerListExpand <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Expand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        expandIconClass<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"esri-icon-layer-list"</SPAN><SPAN class="punctuation token">,</SPAN>  <SPAN class="comment token">// see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/</SPAN>
        expandTooltip<SPAN class="punctuation token">:</SPAN> layerList<SPAN class="punctuation token">.</SPAN>label<SPAN class="punctuation token">,</SPAN>
        view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
        content<SPAN class="punctuation token">:</SPAN> layerList<SPAN class="punctuation token">,</SPAN>
        expanded<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
        group<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"top-right"</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>layerListExpand<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</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="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewDiv<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></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>

タグ付けされた投稿をもっと見る

Accepted answers

Egge-Jan_Pollé

Hi Ken Buja,

OK - known issue...

So, my idea that I wanted to add an action to the LayerList widget to turn on and off the labels was right, and actually the way I did implement it was also OK, but for the 4.13 version of the ArcGIS API for JavaScript having an issue here...

I changed the library to 4.12 and then my solution worked fine 🙂

And as Noah Sager‌ states here (Label Geometry with CheckBox ) the issue will be solved in 4.14. This version is due to be released in December 2020 (reasonably soon), but of course a beta version is already available.

So in the end I just decided to use 4.14, and that worked out fine:

I did publish the final working solution here:

Aan de slag met ArcGIS JavaScript - Labels aan- of uitzetten

Thanks,

Egge-Jan

All comments

kapalczynski

I was wondering if this can be done to specific feature Layers ... I implemented this but listed a couple Feature Layers in the

Every Feature Layer in the Layer List has the icon and when clicked feature Layer X turns off Feature Layer Ys labels...

Looking for independent actions on independent features...

layerList.on("trigger-action", function(event) {

Is there a widget that would allow you to adjust transparency as well to individual layers?

Egge-Jan_Pollé

Hi Ken Buja,

OK - known issue...

I changed the library to 4.12 and then my solution worked fine 🙂

So in the end I just decided to use 4.14, and that worked out fine:

I did publish the final working solution here:

Aan de slag met ArcGIS JavaScript - Labels aan- of uitzetten

Thanks,

Egge-Jan

kenbuja

This is a known issue with GeoJSON, so it may be a problem with FeatureLayers too.

Label Geometry with CheckBox

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

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