How to Get Div to Be Contained in a Map?

3013
2
09-16-2019 09:32 AM
JerryChen
New Contributor III

I have a div that I want to put inside the map, but either placing 'sidePanel' outside or inside 'viewDiv' don't work. I'm curious about is there any approach other than customizing a widget with TypeScript and SASS? To be specific, is it possible to do those widget tricks with generic HTML and CSS like I'm attempting?

my code :

Snippet

<style>
htmlbody,
#viewDiv {
padding0;
margin0;
height100%;
width100%;
}
#sidePanel  {
background-color:#f00;
height100px;
width100px;
}
</style>

Snippet
<div id="sidePanel"></div>
<div id="viewDiv" class="esri-widget"></div>

screenshot :

2 Replies
AnneFitz
Esri Regular Contributor

Hi Jerry,

The sample mentioned above is a great way to create a side panel if you are trying to place something next to your map. You can also put HTML elements inside of your map (like you would with a widget) by using

view.ui.add(yourDiv, "top-right").

See UI | ArcGIS API for JavaScript 4.12 for more information.