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>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri /themes/light/main.css">
<script src="https://js.arcgis.com/4.24/"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer",
"esri/layers/VectorTileLayer",
"esri/widgets/Legend",
"esri/widgets/LayerList",
"esri/widgets/ScaleBar",
"esri/widgets/BasemapGallery"
], function (esriConfig,Map, MapView, Graphic, GraphicsLayer, FeatureLayer, VectorTileLayer, Legend, LayerList, ScaleBar, BasemapGallery) {
esriConfig.apiKey = "AAPK2bcfac8c83094b77ac3df10268c0211d6sgT90p_JTa1Vlhb6eVQWqdUfS7E1YDU9AWCMzOVvkEldF2PkWJ4SxhXMZuXm1Dl";
const map = new Map({
basemap: "arcgis-light-gray" // Basemap layer service
});
//instantiate the MapView class on view
const view = new MapView({
//map property of Mapview == map variable
map: map,
center: [-118.805, 34.027], // Longitude, latitude
zoom: 10, // Zoom level
container: "viewDiv" // Div element
});
// Add a scalebar -------------------------------------------------------
let scaleBar = new ScaleBar({
view: view
});
// 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>
