I'm sure there's a way to do this, but I can't find it anywhere.
I'm wanting to have a text box that can be accessed from an Expand widget in an ArcGIS javascript map. I don't have a lot of scripting experience, so I may be missing something obvious!
Thanks Nate
You just need to use the content property of Expand widget (ArcGIS API - Expand.content). It accepts, Widget, string, or a html node.
Here is a simple example U put for you,
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS API for JavaScript Hello World App</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#infoDiv {
width: 300px;
background-color: white;
padding: 10px;
}
#infoDiv h1 {
font-size: 16px;
}
#infoDiv p {
font-style: italic;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/css/main.css">
<script src="https://js.arcgis.com/4.21/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Expand"
], function (Map, MapView, Expand) {
const map = new Map({
basemap: "topo-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-118.71511, 34.09042],
zoom: 11
});
const expand = new Expand({
expandIconClass: "esri-icon-comment",
expandTooltip: "Expand Lorem Ipsum",
collapseTooltip: "Collapse Lorem Ipsum",
view: view,
content: document.getElementById("infoDiv")
});
view.ui.add(expand, "bottom-left");
});
</script>
</head>
<body>
<div id="viewDiv">
<div id="infoDiv">
<h1>The standard Lorem Ipsum passage, used since the 1500s</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</body>
</html>