Context: I am trying to simply create a 'Save Button' from selection of basemap in basemap gallery...The only thing missing is I cannot find the 'well known string ids' from the basemaps in the basemap gallery for which I can use to reference later, i.e. streets, streets-vector, topo dark-gray, etc etc. I am getting the objects responses with the below on any change of selection to the basemap gallery, I am seemingly getting EVERYTHING back but the 'well known string ids' in which I can save and use later to render that basemap. I am getting the title and property ID but the ids to change the map, i.e. topo are no where to be found within the object responses. basemapGallery . watch ( 'activeBasemap' , function ( newBasemap , property , object ) console . log ( 'new active basemap' , { newBasemap , property , object }); .......... // also have tried pulling in the basemap obj here as well i.e. I can programmatically, manually, change the basemap in my application or in the dev console with the below. myapp . widgets . basemapManager . basemapGallery . activeBasemap = "streets" The docs lead me to believe I can use portal item id to reference the basemaps but this did not work. I have tried to reference it every which way in accordance to the above line. Below is a screenshot of my watch function after a selection has been made to the basemap gallery. No named string ids to change the map found, i.e. 'dark-grey' 'topo' 'streets' etc.

Cam, There is no good way to get those well know ids. But you can use the portal item id. basemapGallery . activeBasemap = { portalItem : { id : "588f0e0acc514c11bc7c898fed9fc651" } } ; This sets the basemap to "topo".

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

how to get base map ids from basemap gallery arcgis js (i.e. topo)

CamCode

Context: I am trying to simply create a 'Save Button' from selection of basemap in basemap gallery...

The only thing missing is I cannot find the 'well known string ids' from the basemaps in the basemap gallery for which I can use to reference later, i.e. streets, streets-vector, topo dark-gray, etc etc.

I am getting the objects responses with the below on any change of selection to the basemap gallery, I am seemingly getting EVERYTHING back but the 'well known string ids' in which I can save and use later to render that basemap. I am getting the title and property ID but the ids to change the map, i.e. topo are no where to be found within the object responses.

<SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">basemapGallery</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">watch</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">(</SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">'activeBasemap'</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #101094; border: 0px; font-weight: inherit; font-size: 13px;">function</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">(</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">newBasemap</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> property</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> object</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">)</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">        console</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">log</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">(</SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">'new active basemap'</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">{</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">newBasemap</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> property</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">,</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> object</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">});</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"></SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">..........</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #858c93; border: 0px; font-weight: inherit; font-size: 13px;">// also have tried pulling in the basemap obj here as well</SPAN>

i.e. I can programmatically, manually, change the basemap in my application or in the dev console with the below.

<SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">myapp</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">widgets</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">basemapManager</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">basemapGallery</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">.</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">activeBasemap </SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;">=</SPAN><SPAN class="" style="color: #303336; border: 0px; font-weight: inherit; font-size: 13px;"> </SPAN><SPAN class="" style="color: #7d2727; border: 0px; font-weight: inherit; font-size: 13px;">"streets"</SPAN>

The docs lead me to believe I can use portal item id to reference the basemaps but this did not work. I have tried to reference it every which way in accordance to the above line.

Below is a screenshot of my watch function after a selection has been made to the basemap gallery. No named string ids to change the map found, i.e. 'dark-grey' 'topo' 'streets' etc.

Vind meer berichten getagd met

Accepted answers

RobertScheitlin__GISP

Cam,

There is no good way to get those well know ids. But you can use the portal item id.

basemapGallery<SPAN class="punctuation token">.</SPAN>activeBasemap <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"588f0e0acc514c11bc7c898fed9fc651"</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

This sets the basemap to "topo".

All comments

ScottDavis3

Use toJSON and fromJSON.

To save the current basemap to localstorage, for example:

let basemapGallery = new BasemapGallery({ view: view });
basemapGallery.watch("activeBasemap", (evt) => {
localStorage.opsBaseMap = JSON.stringify(evt.toJSON());
});

To load the basemap into a new Map:

require(["esri/views/MapView", "esri/Map", "esri/Basemap"], (MapView, Map, Basemap) => {
let tmap = Basemap.fromJSON(JSON.parse(localStorage.opsBaseMap));
map = new Map({
basemap: tmap
});

});

MattStayner

Hi all,

I am running into the same issue. Have there been any updates to the API that make it easier to get the well known string ids for a basemap that is selected from the basemap gallery? That seems silly to have to work with the portal ID, and deal with it not always being there.

CamCode

I do not think so. I'm thinking I may to manually create an associative array of some sorts for these 4. So close, yet so far away....

Edit, Update:

So the above did not work, I tried grabbing the maps that weren't returning a portal item and assigning one to them. However it didn't work, any options to capture these and re-render?

I tried every which way just setting a portal item id within the below format for my failing maps.

if (newBasemap.id === 'shaded_relief_light') {

} else if (newBasemap.id === 'shaded_relief_dark') {

} else if (newBasemap.id === 'world_nav_charts') {

} else if (newBasemap.id === 'skyvector_hi_map') {

} else if (newBasemap.id === 'skyvector_lo_map') {

} if (newBasemap.id === 'skyvector_vfr_map') {

}

RobertScheitlin__GISP

Are they maps that would normally have a well known id?

CamCode

Thanks Robert,

This is mostly working for all maps in my basemap gallery.

However, sadly... there are 4 maps that do not have a portalItem object. Alas their portal item ids are returning null. Any options for me here?

newBasemap: {…}, property: {…}, object: "activeBasemap"}
1. newBasemap:
  1. baseLayers: (...)
  2. id: (...)
  3. load: ƒ ()
  4. loadError: (...)
  5. loadStatus: (...)
  6. loadWarnings: (...)
  7. loaded: (...)
  8. portalItem: null

RobertScheitlin__GISP

Ulrich,

In your case it would be:

basemapGallery<SPAN class="punctuation token">.</SPAN>activeBasemap <SPAN class="operator token">=</SPAN>‍ myBasemap<SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

Use the actual basemap object.

UlrichOpalka

Hello,

i have the same problem, only that I use
self-defined basemaps.

       myBasemap = new Basemap({
           baseLayers: [new TileLayer({title: 'Basiskarte', url: arcgisServerUrl + "Basiskarte/Basiskarte2c/                                        MapServer",visible: true}),
                                       id: "Basiskarte",
                                       title: "Basiskarte",
                                      thumbnailUrl: "img/Basemap/Basiskarte.jpg"
        });

....

How do I set the basemap active :

basemapGallery.activeBasemap = {id: "Basiskarte"}; ???

RobertScheitlin__GISP

Cam,

There is no good way to get those well know ids. But you can use the portal item id.

basemapGallery<SPAN class="punctuation token">.</SPAN>activeBasemap <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"588f0e0acc514c11bc7c898fed9fc651"</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

This sets the basemap to "topo".

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.