Show/hide components?

Egge-Jan_Pollé · ‎12-10-2024

Hi,

I am playing around with the new components in the ArcGIS Maps SDK for JavaScript 4.31 and I wondered:

is there an easy way to show hide/components?

For example the compass: Component Reference / Compass - Docs ⋅ Storybook

As long as the map/view faces north (i.e. heading = 0), I do not need the compass at all. But yes, I want the compass to appear when the user rotates the map, to disappear again the moment the map faces north again, i.e. after the user clicked the compass to reset the view.

With the good old widget I would do something like this:

watchUtils.whenTrue(view, "stationary", function() {
  if (view.rotation == 0){
    view.ui.remove(compassWidget);
  } else {
    view.ui.add(compassWidget, "top-left");
  }
});

How to accomplish something similar with the new components?

TIA,

Egge-Jan

Egge-Jan_Pollé · ‎12-12-2024

Hi @OmarKawach,

Thanks! This is what I was looking for. Yeah, I still have to make a few steps to learn to work with these components... Web Components in general, and the new Map Components in the ArcGIS Javascript SDK in particular...

I have slightly modified the Hide Compass example provided by @ReneRubalcava to take into account the rotation of the map - see code below.

And yeah, don't forget to set the autoDestroyDisabled property of the component to be able to append and rempove the component multiple times.

Thanks again,

Egge-Jan

<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>Compass | ArcGIS Maps SDK for JavaScript - Map Components</title>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    #header {	
      width: 100%;
      height: 70px;
      background-color: #0047AB;
      color:#FFFFFF;
      margin: 0;
      position: fixed;
      z-index: 1;
      top: 0;
    }
    #headertext {
      float: left;
      font-size: 35px;
      color: white;
      line-height: 70px;
      padding-left: 10px;
    }
    #column {
      margin-top: 70px;
      margin-left: 20%;
      width: 60%;
      border: 1px solid #0047AB;
      height: 800px
    }
  </style>
   <!-- Load Calcite components from CDN -->
   <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />
   <script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>
   <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
   <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" />
   <script src="https://js.arcgis.com/4.31/"></script>
   <!-- Load Map components from CDN-->
   <script
     type="module"
     src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"
   ></script>
</head>
<body>
  <div id="header">
      <div id="headertext">Compass | ArcGIS Maps SDK for JavaScript - Map Components</div>
  </div>
  <div id="column">
  <arcgis-map item-id="7aea6fa913a94176a1074edb40690318">
    <arcgis-zoom position="top-left"></arcgis-zoom>
	<arcgis-compass auto-destroy-disabled position="top-left"></arcgis-compass>
  </arcgis-map>
  <p>Kleine demonstratie app, gebouwd met <a href="https://developers.arcgis.com/javascript/latest/" target="_blank">ArcGIS Maps SDK for JavaScript</a>, en dan speciaal de recent geïntroduceerde <a href="https://developers.arcgis.com/javascript/latest/references/map-components/" target="_blank">Map Components</a>.</p>
  <p>Kaart: <a href="https://www.arcgis.com/home/item.html?id=7aea6fa913a94176a1074edb40690318" target="_blank">Web Map Topo RD van Esri Nederland uit de Levende Atlas</a>.</p>
  <h3>Demo:</h3>
  <p>Het toevoegen en verwijderen van een component, in dit geval het Compass, afhankelijk van de rotatie van de kaart.</p>
  <p>De kaart is standaard noordgericht, en dan is de Compass button niet echt nodig. Maar als de gebruiker de kaart roteert met <code>Right-click + Drag</code>, dan verschijnt het Compass zodat men de kaartoriëntatie kan resetten. En zodra dat gebeurt is (de kaart is weer noordgericht), dan verdwijnt het Compass ook weer.<br><br>Let op:<br>Het is van belang dat je bij het arcgis-compass component de property <b>autoDestroyDisabled</b> instelt. Je wilt het component immers meerdere keren toevoegen en verwijderen, zonder dat het bij de eerste keer verwijderen automatisch vernietigd wordt.</p>
  </div>
  <script>
    const arcgisMap = document.querySelector("arcgis-map");
    const arcgisCompass = document.querySelector("arcgis-compass");
	
    arcgisMap.addEventListener("arcgisViewChange", (event) => {

      if (arcgisMap.rotation != 0){
        arcgisMap.append(arcgisCompass);
      } else {
        arcgisCompass.remove();
      }
	  console.log(arcgisMap.rotation);

    });
  </script>
</body>
</html>

View solution in original post

OmarKawach · ‎12-11-2024

Hi Egge-Jan,

Because web components are a W3C standard, it has allowed us to promote more programming patterns that follow conventions of the web in general.

Instead of using the view to control the UI, you can use append() and remove().

See codepen from @ReneRubalcava: https://codepen.io/odoe/pen/GgKqagp

Egge-Jan_Pollé · ‎12-12-2024

Hi @OmarKawach,

Thanks! This is what I was looking for. Yeah, I still have to make a few steps to learn to work with these components... Web Components in general, and the new Map Components in the ArcGIS Javascript SDK in particular...

I have slightly modified the Hide Compass example provided by @ReneRubalcava to take into account the rotation of the map - see code below.

And yeah, don't forget to set the autoDestroyDisabled property of the component to be able to append and rempove the component multiple times.

Thanks again,

Egge-Jan

<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>Compass | ArcGIS Maps SDK for JavaScript - Map Components</title>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    #header {	
      width: 100%;
      height: 70px;
      background-color: #0047AB;
      color:#FFFFFF;
      margin: 0;
      position: fixed;
      z-index: 1;
      top: 0;
    }
    #headertext {
      float: left;
      font-size: 35px;
      color: white;
      line-height: 70px;
      padding-left: 10px;
    }
    #column {
      margin-top: 70px;
      margin-left: 20%;
      width: 60%;
      border: 1px solid #0047AB;
      height: 800px
    }
  </style>
   <!-- Load Calcite components from CDN -->
   <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />
   <script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>
   <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
   <link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css" />
   <script src="https://js.arcgis.com/4.31/"></script>
   <!-- Load Map components from CDN-->
   <script
     type="module"
     src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"
   ></script>
</head>
<body>
  <div id="header">
      <div id="headertext">Compass | ArcGIS Maps SDK for JavaScript - Map Components</div>
  </div>
  <div id="column">
  <arcgis-map item-id="7aea6fa913a94176a1074edb40690318">
    <arcgis-zoom position="top-left"></arcgis-zoom>
	<arcgis-compass auto-destroy-disabled position="top-left"></arcgis-compass>
  </arcgis-map>
  <p>Kleine demonstratie app, gebouwd met <a href="https://developers.arcgis.com/javascript/latest/" target="_blank">ArcGIS Maps SDK for JavaScript</a>, en dan speciaal de recent geïntroduceerde <a href="https://developers.arcgis.com/javascript/latest/references/map-components/" target="_blank">Map Components</a>.</p>
  <p>Kaart: <a href="https://www.arcgis.com/home/item.html?id=7aea6fa913a94176a1074edb40690318" target="_blank">Web Map Topo RD van Esri Nederland uit de Levende Atlas</a>.</p>
  <h3>Demo:</h3>
  <p>Het toevoegen en verwijderen van een component, in dit geval het Compass, afhankelijk van de rotatie van de kaart.</p>
  <p>De kaart is standaard noordgericht, en dan is de Compass button niet echt nodig. Maar als de gebruiker de kaart roteert met <code>Right-click + Drag</code>, dan verschijnt het Compass zodat men de kaartoriëntatie kan resetten. En zodra dat gebeurt is (de kaart is weer noordgericht), dan verdwijnt het Compass ook weer.<br><br>Let op:<br>Het is van belang dat je bij het arcgis-compass component de property <b>autoDestroyDisabled</b> instelt. Je wilt het component immers meerdere keren toevoegen en verwijderen, zonder dat het bij de eerste keer verwijderen automatisch vernietigd wordt.</p>
  </div>
  <script>
    const arcgisMap = document.querySelector("arcgis-map");
    const arcgisCompass = document.querySelector("arcgis-compass");
	
    arcgisMap.addEventListener("arcgisViewChange", (event) => {

      if (arcgisMap.rotation != 0){
        arcgisMap.append(arcgisCompass);
      } else {
        arcgisCompass.remove();
      }
	  console.log(arcgisMap.rotation);

    });
  </script>
</body>
</html>