My map app loads a webmap hosted on our Portal. The webmap has the national-geographic as its basemap. I've added a BasemapToggle to the map app - it uses hybrid. When the map loads the BasemapToggle icon displays with a generic appearance - and not as icon representing the national-geographic basemap. Then the basemap gets toggled, the generic icon gets put under the hybrid icon.
My question is:
When the map loads in I add the BasemapToggle to the scene, can I interrogate the webmap to get the correct icon for the basemap?
TIA
Solved! Go to Solution.
Dirk,
By observing the network requests when using a web map that has NG as its basemap, I can see there is no request for the NG basemap thumbnail so this seems to be a bug that needs to be reported to esri tech support.
Dirk,
Strange I don't have that problem with this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Get started with widgets using BasemapToggle - 4.3</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/BasemapToggle",
"dojo/domReady!"
],
function(Map, MapView, BasemapToggle) {
// Create the Map with an initial basemap
var map = new Map({
basemap: "national-geographic"
});
// Create the MapView and reference the Map in the instance
var view = new MapView({
container: "viewDiv",
map: map,
center: [-86.049, 38.485],
zoom: 3
});
// 1 - Create the widget
var toggle = new BasemapToggle({
// 2 - Set properties
view: view, // view that provides access to the map's 'topo' basemap
nextBasemap: "hybrid" // allows for toggling to the 'hybrid' basemap
});
// Add widget to the top right corner of the view
view.ui.add(toggle, "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Let me clarify with code - am referring to webmap hosted on AGOL/Portal that have a basemap. The code below is linear. This also occurs when the mapView is returned in a promise:
var webMap = new WebMap({ // has "national-geographic" basemap
portalItem: {
id: <CRYPTIC_WEBMAP_ID_IN_AGOL_OR_PORTAL>
}
});var mapView = new MapView({
map: webMap,
container: "mapDiv"
})var basemapToggle = new BasemapToggle({
view: mapView,
nextBasemap: "hybrid" // Allows for toggling to the "hybrid" basemap
});
mapView.ui.add(basemapToggle, "top-right");
Dirk,
By observing the network requests when using a web map that has NG as its basemap, I can see there is no request for the NG basemap thumbnail so this seems to be a bug that needs to be reported to esri tech support.
I am also using a Portal webmap and two Portal basemaps. You have to call load() on your Portal nextbasemap to make the thumbnail appear.
Have You found a solution? I am also having this issue (as well as others)
Hi, any solution to this? The thumbnail of the default basemap(webmap) is still using the default thumbnail. We already generated a thumbnail in the portal. Thanks