topic How to Get Div to Be Contained in a Map? in ArcGIS JavaScript Maps SDK Questions

How to Get Div to Be Contained in a Map?

JerryChen — Sat, 11 Dec 2021 15:47:35 GMT

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>
html, body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#sidePanel  {
background-color:#f00;
height: 100px;
width: 100px;
}
</style>

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

screenshot :

Re: How to Get Div to Be Contained in a Map?

RobertScheitlin__GISP — Mon, 16 Sep 2019 16:49:13 GMT

Jerry,

Have you not seen this sample?

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=widgets-feature-sidepanel

Re: How to Get Div to Be Contained in a Map?

AnneFitz — Tue, 17 Sep 2019 00:08:35 GMT

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.