Show/hide components?

Question

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é · Accepted Answer

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 Compass | ArcGIS Maps SDK for JavaScript - Map Components

Kleine demonstratie app, gebouwd met ArcGIS Maps SDK for JavaScript, en dan speciaal de recent geïntroduceerde Map Components.

Kaart: Web Map Topo RD van Esri Nederland uit de Levende Atlas.

Demo:

Het toevoegen en verwijderen van een component, in dit geval het Compass, afhankelijk van de rotatie van de kaart.

De kaart is standaard noordgericht, en dan is de Compass button niet echt nodig. Maar als de gebruiker de kaart roteert met Right-click + Drag, 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.

Let op:
Het is van belang dat je bij het arcgis-compass component de property autoDestroyDisabled instelt. Je wilt het component immers meerdere keren toevoegen en verwijderen, zonder dat het bij de eerste keer verwijderen automatisch vernietigd wordt.