topic Re: Add custom content to Expand widget in ArcGIS JavaScript Maps SDK Questions

Add custom content to Expand widget

Aeseir — Sun, 29 Jan 2023 02:58:40 GMT

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.

Re: Add custom content to Expand widget

Sage_Wall — Sun, 29 Jan 2023 13:26:25 GMT

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

Re: Add custom content to Expand widget

Aeseir — Mon, 30 Jan 2023 10:17:58 GMT

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?

Re: Add custom content to Expand widget

Sage_Wall — Mon, 30 Jan 2023 16:49:21 GMT

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

Re: Add custom content to Expand widget

Aeseir — Tue, 31 Jan 2023 09:05:35 GMT

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