JavaScript API 4.24 Widgets being placed below MapView

barmstrong — Fri, 02 Sep 2022 18:57:25 GMT

Hi everyone. Noobie JavaScript API user question here. I have a very simple web map that I'm building and having trouble with placing widgets where I'd like them to go. This web map has just one div element, and a MapView is applied to that div. I then add two widgets; a scale bar, and a basemap gallery. I set the view=view, and am trying to use the view.ui.add method to place the widgets within the MapView. However, both widgets appear underneath the map, not visible on the webpage until the user scrolls down. I've also tried setting the container property of the widgets to the one and only div, and they still appear under the map. I'm sure there's something I'm missing but I am having a challenging time finding the answer. Any help would be appreciated!

<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ArcGIS API for JavaScript Tutorials: Display a map</title>

// Add widget to the bottom left corner of the view
view.ui.add(scaleBar, {
position: "bottom-left"
});

view.ui.add(
new ScaleBar({
view,
unit: "dual"
}),
{
position: "bottom-left"
});

// Add basemap gallery -------------------------------------------------

const basemapGallery = new BasemapGallery({
view: view
});

// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
position: "top-right"
});

});

</script>

</head>
<body>

<div id="viewDiv"></div>

</body>
</html>

Re: JavaScript API 4.24 Widgets being placed below MapView

KenBuja — Fri, 02 Sep 2022 19:33:58 GMT

You have an extra space in your css link line. It should be

Re: JavaScript API 4.24 Widgets being placed below MapView

barmstrong — Fri, 02 Sep 2022 20:45:21 GMT

Thank you!

topic Re: JavaScript API 4.24 Widgets being placed below MapView in ArcGIS JavaScript Maps SDK Questions

JavaScript API 4.24 Widgets being placed below MapView

Re: JavaScript API 4.24 Widgets being placed below MapView

Re: JavaScript API 4.24 Widgets being placed below MapView