I am trying to create content that is displayed when a Expand widget is activated for it. simple example Please select importance High Medium Low 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.

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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.

Encuentra más publicaciones etiquetadas con

Accepted answers

Sage_Wall

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")
})

All comments

Aeseir

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

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

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

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")
})

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.