Hi I am using GeoJSON service to plots my point on map and want to label them and for that purpose i create a check box. when event perform on checkbox feature should be labeled but when unchecked label should be hidden from map. In following code when i checked to checkbox labeling is showing but when unchecked it is not remove/hide from map. ! DOCTYPE html > html > head > meta charset = "utf-8" / > meta name = "viewport" content = "initial-scale=1,maximum-scale=1,user-scalable=no" / > title > Geojson Label / title > link rel = "stylesheet" href = "https://js.arcgis.com/4.13/esri/themes/light/main.css" / > script src = "https://js.arcgis.com/4.13/" > / script > style > html , body , #viewDiv { padding : 0 ; margin : 0 ; height : 100 % ; width : 100 % ; } / style > script > require ( [ "esri/Map" , "esri/views/MapView" , "esri/layers/GeoJSONLayer" , ] , function ( Map , MapView , GeoJSONLayer , ) { const map = new Map ( { basemap : "satellite" , } ) ; const view = new MapView ( { container : "viewDiv" , map : map , center : [ 67.050987 , 24.894766 ] , scale : 288895 , } ) ; let labelClassDC = { // autocasts as new LabelClassFAT() symbol : { type : "text" , // autocasts as new TextSymbol() color : "white" , haloColor : "black" , haloSize : 2 , font : { // autocast as new Font() family : "Playfair Display" , size : 10 , weight : "bold" } } , labelPlacement : "above-center" , labelExpressionInfo : { expression : "$feature.f1" } } let feature = new GeoJSONLayer ( { url : "http://localhost:3000/fat" , labelsVisible : false , labelingInfo : [ labelClassDC ] , } ) map . add ( feature ) view . ui . add ( document . getElementById ( 'label' ) , 'top-right' ) document . getElementById ( 'show' ) . addEventListener ( 'click' , ( e ) = > { feature . labelsVisible = e . target . checked } ) } ) ; / script > / head > body > div id = "viewDiv" > / div > div id = "label" > label > Dc / label > input type = "checkbox" id = "show" > / 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; } } }

Label Geometry with CheckBox

kawishabbas

I am using GeoJSON service to plots my point on map and want to label them and for that purpose i create a check box. when event perform on checkbox feature should be labeled but when unchecked label should be hidden from map.

In following code when i checked to checkbox labeling is showing but when unchecked it is not remove/hide from map.

<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 charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN> <SPAN class="operator token">/</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>
    <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Geojson Label<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/4.13/esri/themes/light/main.css"</SPAN>
    <SPAN class="operator token">/</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/4.13/"</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>style<SPAN class="operator token">></SPAN>
      html<SPAN class="punctuation token">,</SPAN>
      body<SPAN class="punctuation token">,</SPAN>
      #viewDiv <SPAN class="punctuation token">{</SPAN>
        padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</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>
        width<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>
    <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<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">"esri/Map"</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/GeoJSONLayer"</SPAN><SPAN class="punctuation token">,</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>
        MapView<SPAN class="punctuation token">,</SPAN>
        GeoJSONLayer<SPAN class="punctuation token">,</SPAN>

      <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  
        <SPAN class="keyword token">const</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="string token">"satellite"</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> 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>
          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="punctuation token">[</SPAN><SPAN class="number token">67.050987</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">24.894766</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
          scale<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">288895</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">let</SPAN> labelClassDC <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="comment token">// autocasts as new LabelClassFAT()</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">"white"</SPAN><SPAN class="punctuation token">,</SPAN>
                    haloColor<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"black"</SPAN><SPAN class="punctuation token">,</SPAN>
                    haloSize<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</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">10</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.f1"</SPAN>
                <SPAN class="punctuation token">}</SPAN>
            <SPAN class="punctuation token">}</SPAN>

        <SPAN class="keyword token">let</SPAN> feature <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GeoJSONLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"http://localhost:3000/fat"</SPAN><SPAN class="punctuation token">,</SPAN>
          labelsVisible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
          labelingInfo<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>labelClassDC<SPAN class="punctuation token">]</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>feature<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>document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'label'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'top-right'</SPAN><SPAN class="punctuation token">)</SPAN>

        document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'show'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN><SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN><SPAN class="punctuation token">{</SPAN>
          feature<SPAN class="punctuation token">.</SPAN>labelsVisible <SPAN class="operator token">=</SPAN> e<SPAN class="punctuation token">.</SPAN>target<SPAN class="punctuation token">.</SPAN>checked
        <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><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>

  <SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN>
    
    <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</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">"label"</SPAN><SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>label<SPAN class="operator token">></SPAN>Dc<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>label<SPAN class="operator token">></SPAN>
      <SPAN class="operator token"><</SPAN>input type<SPAN class="operator token">=</SPAN><SPAN class="string token">"checkbox"</SPAN> id<SPAN class="operator token">=</SPAN><SPAN class="string token">"show"</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>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>

Find more posts tagged with

Accepted answers

Egge-Jan_Pollé

Hi kawish abbas,

By pure coincidence (I didn't see your post) I posted a similar question today:

ArcGIS JavaScript: Toggle Labels On and Off?

And, as Noah Sager states above, it really is an issue with the 4.13 version of the ArcGIS API for JavaScript.

It worked fine in 4.12, and will work again in 4.14.

Please note: you can already use a prerelease version of the 4.14 API:

By the way, I have chosen to use an action button in the LayerList widget (instead of your checkbox).

You can find my working solution here:

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

Hope this helps. Please let us know what you think.

Cheers,

Egge-Jan

All comments

Egge-Jan_Pollé

Hi kawish abbas,

Thanks for your reaction. If you think your question has been answered now, would you please be so kind to mark one of the answers as correct. In this way it will be clear to the community that your issue has been solved.

Cheers,

Egge-Jan

kawishabbas

Wao its wonderful Egge-Jan thank you so much and yes i have tested labeling with 4.12 version its working properly.

Basically i find such type of stuff that you had shared in which we can use button to LayerList widget for labeling.

Again thank you Egge-Jan

Egge-Jan_Pollé

Hi kawish abbas,

By pure coincidence (I didn't see your post) I posted a similar question today:

ArcGIS JavaScript: Toggle Labels On and Off?

And, as Noah Sager states above, it really is an issue with the 4.13 version of the ArcGIS API for JavaScript.

It worked fine in 4.12, and will work again in 4.14.

Please note: you can already use a prerelease version of the 4.14 API:

By the way, I have chosen to use an action button in the LayerList widget (instead of your checkbox).

You can find my working solution here:

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

Hope this helps. Please let us know what you think.

Cheers,

Egge-Jan

Noah Sager

Thank you for the feedback. This is a known issue, and has been fixed for the next release (version 4.14, due out in December).

Join the Conversation

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

Quick Links

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