topic Re: Label Geometry with CheckBox in ArcGIS JavaScript Maps SDK Questions

Label Geometry with CheckBox

kawishabbas — Fri, 10 Dec 2021 22:02:29 GMT

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Label Geometry with CheckBox

Noah-Sager — Fri, 22 Nov 2019 23:01:33 GMT

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

Re: Label Geometry with CheckBox

Egge-Jan_Pollé — Wed, 27 Nov 2019 22:30:30 GMT

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

Re: Label Geometry with CheckBox

kawishabbas — Thu, 28 Nov 2019 05:16:56 GMT

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

Re: Label Geometry with CheckBox

Egge-Jan_Pollé — Thu, 28 Nov 2019 13:38:05 GMT

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