Add custom content to Expand widget

[Aeseir]

I am trying to create content that is displayed when a Expand widget is activated for it.

simple example

<div class="bg-white">

<p>Please select importance</p>

<button (click)="trigger('high')">High</button>

<button (click)="trigger('mediumd')">Medium</button>

<button (click)="trigger('Low')">Low</button>

</div>

this is in my component currently, I'd like to have it show up in a expanded widget, but not sure where to place the content (inside the div#map) and how to then reference it back to Expand widget.

[Sage_Wall · Accepted solution]

Hi @Aeseir ,

All you really need to do is give your div an id, then add your div as the content for the expand widget.  I made a quick code pen to show how this is done, but the relevant code snippet is below.

const expandContentDiv = document.getElementById("expandContentDiv");
const expand = new Expand({
  content: expandContentDiv,
  expanded: true
})
view.when(() => {
  view.ui.add(expand, "top-right")
})

[Aeseir]

Thanks @Sage_Wall , out of curiosity what if i wanted to just add a button from that list without expansion? Is there a way to use view.ui.add to add the custom button?

[Sage_Wall]

Sure, you can add any HTML Element to the view's ui

In this example I add a calcite-button (but a normal button would work the same) to log the view's extent when clicked.

require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
  const map = new Map({
    basemap: "topo-vector"
  });

  const view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 10,
    center: [-104.5, 39.5]
  });

  const button = document.createElement("calcite-button");

  button.addEventListener("click", () => {
    console.log(view.extent.toJSON());
  });

  button.innerText = "Log the view extent";

  view.when(() => {
    view.ui.add(button, "top-right");
  });
});

[Aeseir]

Thank you, that helps with some of the other challenges I been facing.