Label Geometry with CheckBox

1424
4
Jump to solution
11-22-2019 02:31 AM
kawishabbas
Occasional Contributor

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>
0 Kudos
1 Solution

Accepted Solutions
Egge-Jan_Pollé
MVP Regular Contributor

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:

  <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css">
  <script src="https://js.arcgis.com/4.14/"></script>

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

View solution in original post

4 Replies
Noah-Sager
Esri Regular Contributor

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).

Egge-Jan_Pollé
MVP Regular Contributor

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:

  <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css">
  <script src="https://js.arcgis.com/4.14/"></script>

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

kawishabbas
Occasional Contributor

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

0 Kudos
Egge-Jan_Pollé
MVP Regular Contributor

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

0 Kudos