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.
Solved! Go to 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")
})
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")
})
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?
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");
});
});
Thank you, that helps with some of the other challenges I been facing.