Select to view content in your preferred language

Cloning basemap makes it blank (4.33)

454
2
09-17-2025 03:15 PM
mjperez-usgs
Emerging Contributor

I'm working on a web app that has multiple mapviews, built on node (so not using CDN). We have one primary map that has a basemap selector, and I'd like to propagate the basemap that one is using to others. As the user moves around the app, there are instances where maps are destroyed and removed from the page, and I'd prefer to just recreate new resources rather than have to write code for each to remove things like the basemap before calling .destroy().

---------------------

// ESRI basemap is so nice...
const defaultBasemap = new Basemap({
    style: new BasemapStyle({
        id: "arcgis/topographic",
        worldview: "unitedStatesOfAmerica"
    })
});


/** The BasemapController class is used to handle updating all map basemaps and change them all when the main map one is changed. */
export class BasemapController {
    /** The current basemap in use. */
    static _currentBasemap : Basemap;

    /** Returns the current basemap. Unless the user chooses a different one, this will be the DefaultBasemap(). */
    static GetCurrentBasemap() : Basemap {
        if (this._currentBasemap == null) {
            this._currentBasemap = this._getDefaultBasemap();
        }

        // Return clone so if it is destroyed it doesn't blow up the rest
        let clone = this._currentBasemap.clone(); // Invoking .clone() makes the returned one not draw
        return clone;
    }

====================
// Usage:

        this.mainMap= new Map({
            basemap: BasemapController.GetCurrentBasemap()
         });


====================


I don't understand why this occurring. Is this a bug in the SDK? I see nothing in the output on the console.

Tags (2)
0 Kudos
2 Replies
alc381
by
New Contributor

I have the same issue using the same LocalBasemapsSource for two maps. I tried making two identical variables, but that also did not work. 

const topovector = Basemap.fromId("topo-vector") as Basemap
const streets = Basemap.fromId("streets") as Basemap
const satellite = Basemap.fromId("satellite") as Basemap
export const basemapssource = new LocalBasemapsSource({basemaps: [ satellite, topovector, streets ]})
Then, I added export const startbasemapssource = new LocalBasemapsSource({basemaps: [ satellite, topovector, streets ]}) for the "start" map, but that did not fix the problem. 
 
This happened to me in 4.34. I had to downgrade to 4.33 for another issue and this problem is still there.

 

0 Kudos
alc381
by
New Contributor

Turns out I was getting a "Basemap already destroyed" error. The basemaps were being destroyed by the first map and weren't able to be used again. The solution I got to was making a function 

export const GenerateLocalBasemapsSource = () => {

const topovector = Basemap.fromId("topo-vector") as Basemap

const streets = Basemap.fromId("streets") as Basemap

const satellite = Basemap.fromId("satellite") as Basemap

return new LocalBasemapsSource({basemaps: [ satellite, topovector, streets ]}) }

Then calling the function to get the source for my basemap gallery like so: 

<arcgis-basemap-gallery source={GenerateLocalBasemapsSource()}/>

0 Kudos