1

I am currently porting an older app I created with ArcGIS JavaScript API 3.14 to API version 4.2. I had a search widget and a basemap toggle widget in the original application. I have successfully implemented both widgets in the new app but I can't figure out how to set the default basemaps thumbnailUrl property for my streets basemap. The current thumbnail looks like the following image after I switch to my imagery basemap.

enter image description here

In the original document I created my own custom basemaps using MapServers by doing the following:

esriBasemaps.Street = {baseMapLayers: [{url:"https://gis.linncounty.org/arcgis/rest/services/PublicBase/baseMapLinnCounty/MapServer"}],
                                                thumbnailUrl: "images/Streets.jpg",
                                                title:"Street"};
esriBasemaps.Imagery = {baseMapLayers: [{
                                            url:"https://gis.linncounty.org/arcgis/rest/services/PublicBase/baseImagery2014/MapServer"},{
                                            url:"https://gis.linncounty.org/arcgis/rest/services/PublicBase/baseImageryLabels/MapServer"}],
                                            thumbnailUrl: "images/Imagery.jpg",
                                            title:"Satellite"};     

//Default map extent
//var startExtent = new Extent(5372725,3417182,5502485,3578378,new esri.SpatialReference({wkid:102675}))

//Creates the map object
    map = new Map("map",{
    basemap:"Street",
    //extent:startExtent,
    center: new Point({x:5419598,y:3458787,spatialReference: {wkid: 102675}}),
    zoom: 3
    });

//Basemap toggle widget added to the div #BasemapToggle
    var toggle = new BasemapToggle({
        map: map,
        basemap: "Imagery"}, 
        "BasemapToggle");
    toggle.startup();

In the new app I am using WebMaps for all my layers and basemaps so I don't know if that is throwing me for a loop.

This is what the new code looks like right now:

var webMapID = "861f2064cd374eafa4bf6379bb451571";      
var webmap = new WebMap({portalItem: {id: webMapID}});      
var view = new MapView({map: webmap,container: "viewDiv",rotationEnabled:false});     
var pItem = new PortalItem({id:"cb956d729be045c1a55dd97b45994cd6"})
var Imagery = new Basemap({ title:"Imagery",
                                    id:"myBasemap",
                                    thumbnailUrl: "images/Imagery.jpg",
                                    portalItem:pItem,
                                    });

toggle = new BasemapToggle({
          view: view, // view that provides access to the map's 'topo' basemap
          nextBasemap: Imagery, // allows for toggling to the 'hybrid' basemap
        });

view.ui.add(toggle, {position:"bottom-left",index: 1});

I can change the icon after the map has loaded by doing the following in Chrome's dev console:

toggle.activeBasemap.thumbnailUrl = "images/Streets.jpg"

If I insert that into my code it doesn't work which leads me to believe that it is loaded asynchronously.

How am I able to set the webMaps basemap icon for the toggle widget? I would think it would be a property I could set when I create the new WebMap instance but I am unsure.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.