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; } } }

setBasemap() not working on webmap with string or object value

deleted-user-RAnWn8DDSd1P

http://www.portlandmaps.com/arcmaps/setBasemap.html

You can see in console both map objects reflect the change of basemap in _basemap and _layers has the new layer, but neither the string value 'topo' or an object of type esri/utils/Basemap work as a param to setBasemap() to successfully swap it out. what am i missing here?

Vind meer berichten getagd met

Accepted answers

All comments

JonathanUihlein

It works for a split second when I add:

var mapDeferred = new esriUtils.createMap('ec7080edfb7c4197989dee3c6207264c', 'map1', {
 mapOptions:{
  basemap:"streets"
 }
});

However, the 'streets' basemap gets covered near instantly by another layer.

From my point of view, it looks like a specific layer in your webmap is completely covering the basemap.

deleted-user-RAnWn8DDSd1P

only layers on in the webmap are the basemap and a second tile layer for labeling. they continue covering after setBasemap().

[ATTACH=CONFIG]25879[/ATTACH]

Property.png

JonathanUihlein

Not sure how much this helps, but I got the basemap to change by using the following code:

           
var baseMapLayer = new ArcGISTiledMapServiceLayer("http://services.portlandmaps.com/ags/rest/services/Public/Basemap_Gray/MapServer");
map1.addLayer(baseMapLayer);

I added the above two lines after "var map1 = response.map;"

You'll also need to change your require statement.

require(["esri/layers/ArcGISTiledMapServiceLayer", ... ], function(ArcGISTiledMapServiceLayer, ... ){ ... });

API Ref: https://developers.arcgis.com/en/javascript/jsapi/arcgistiledmapservicelayer-amd.html

JeffreyThompson2_2-1749585725848.png

deleted-user-RAnWn8DDSd1P

yeah i know i could manually add and toggle ArcGISTiledMapServiceLayer's with visibility to change basemaps, but setBasemap() is supposed to handle this, and does correctly for non-webmap map objects. I added the non-webmap cases to my example to show them working for non-webmap.

JonathanUihlein

Hey Aaron, I may have found a temporary solution.

I created a copy of your webmap and made some changes.
I was able to successfully change the basemap via code with the following steps:

1) Change the 'Basemap Color' layer of your webmap to 100% transparent in the webmap interface

2) Use

 map1.setBasemap('topo');

This fixed the problem.

The basemap you were using in the webmap didn't seem to be implemented correctly so you can either change the 'Basemap Color' layer to 100% transparent or remove that layer completely.

For some reason,the basemap you are using in your current webmap is being treated like a standard layer and not an actual basemap ( I have no idea why ).

My code (using the edited webmap):

[HTML]<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Basemap Test</title>
        <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css" type="text/css"/>

<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
<script type="text/javascript">
require(['esri/arcgis/utils',
'esri/dijit/BasemapLayer',
'esri/dijit/Basemap',
'dojo/ready',
'esri/layers/ArcGISTiledMapServiceLayer'
],
function(esriUtils,esriBasemapLayer,esriBasemap,ready, ArcGISTiledMapServiceLayer){

var webmapID = '2e3365c4e32d45138fa5c3c115eaf66b';

ready(function(){

   var mapDeferred = new esriUtils.createMap(webmapID,'map1');

   mapDeferred.then(function(response){

    var map1 = response.map;
    map1.setBasemap('topo');
    //var baseMapLayer = new ArcGISTiledMapServiceLayer("http://services.portlandmaps.com/ags/rest/services/Public/Basemap_Gray/MapServer");
    // map1.addLayer(baseMapLayer);
   });

   var mapDeferred2 = new esriUtils.createMap(webmapID,'map2');

   mapDeferred2.then(function(response){

    var map2 = response.map;
    var grayB = new ArcGISTiledMapServiceLayer( 'http://services.portlandmaps.com/ags/rest/services/Public/Basemap_Gray/MapServer');

    var grayBase = new esriBasemap({
     layers: [grayB],
     title: 'Gray Basemap',
     thumbnailUrl: 'http://services.portlandmaps.com/ags/rest/services/Public/Basemap_Gray/MapServer/info/thumbnail'
    });

     //map2.addLayer(grayBase);
     map2.setBasemap(grayBase);

   });
});//end ready
});
</script>
</head>
<body class="claro">
<div id="map1"></div>
<div id="map2"></div>
</body>
</html>
[/HTML]

This is what my site looks like:
[ATTACH=CONFIG]25892[/ATTACH]

basemap.jpg

deleted-user-RAnWn8DDSd1P

do you mean there's an improper transparency setting on the service? where in /arcgis/manager/ would i change that?

http://services.portlandmaps.com/ags/rest/services/Public/Basemap_Color/MapServer

JonathanUihlein

I wish I could provide an answer to that question but to be honest I have no idea. I'm mainly a JS guy.

How I edited the webmap:

1) Went to
http://jsapi.maps.arcgis.com/home/webmap/viewer.html?webmap=ec7080edfb7c4197989dee3c6207264c
(or rather, made a duplicate of your webmap, but the above is yours)

2) Clicked Content Tab

3) Click the 'down-arrow' next to 'Basemap Color'

4) Selected Transparency - changed to 100% transparent

Pic of steps:
[ATTACH=CONFIG]25893[/ATTACH]

*NOTE

You need to use setBasemap(); in code after loading the webmap because otherwise a basemap will not show at all.

Hopefully you find the answers you seek; I wish I could be more helpful!

basemap2.jpg

deleted-user-RAnWn8DDSd1P

if i set the basemap in the webmap to 100% transparent then my webmap would not have a basemap shown by default. I want to rely on the default basemap being in the webmap, as a webmap structure has a basemap layer. no matter what's in a webmap, the documentation tells me there's a setBasemap() method that seeks to do exactly that. I'm not interested in workarounds. I need a confirmation that this is either a bug because, for some reason, with this particular type of webmap or its contents, the method does not perform as advertised, or if the basemap service or webmap has been set up wrong such that it causes the method to falter.

JonathanUihlein

I think your webmap is set up incorrectly so I am unable to offer any further advice.

Hopefully you find the answers you seek; I wish I could be more helpful!

I would love to know why this doesn't work if someone else can jump in and provide some answers 🙂

Remember to mark useful posts and to mark the thread as 'answered' when someone provides a legitimate answer.

deleted-user-RAnWn8DDSd1P

nothing is wrong with the webmap if arcgis online let me build it this way.

moved to jsfiddle http://jsfiddle.net/akkakk/pnnr6/

HaroldBostic

The issue is webMaps by default don't honor the named values for basemaps. You have to set a base map using setBaseMap before you can set another base maps. My workaround is to use a dictionary that maps base maps titles to their valid string equivalent
https://developers.arcgis.com/en/javascript/jsapi/map-amd.html#setbasemap

then I remove the base map and useSetBaseMap of the equivalent

   //get title of basemap
var currentBasemapName = webmapResponse.itemInfo.itemData.baseMap.title
var bmNameEqiv = bmDict[currentBasemapName ];             esriMap.removeLayer(webmapResponse.itemInfo.itemData.baseMap.baseMapLayers[0].layerObject);
                //just reset the base map so we can use setBaseMap later
                esriMap.setBasemap(bmNameEqiv);

YuqianHuang

Thanks for the answer, which is still helpful three more years later. This solution fixed the problem that setBaseMap cannot recognize the basemap from web map.

I think the possible mechanism of setBaseMap() might be: Delete the basemap of map.basemapLayerIds, and then import the new one.

StevenFabijanski1

I had a similar problem setting the basemap using map.setBasemap and stumbled on this thread. After a bit of investigation I discovered that when using a webmap the map object holds a reference to the initial basemap as 'defaultBasemap'. You can see that by examining map.layerIds. As long as that layer remains in the map, setting a new basemap with `map.setBasemap('topo')` will not work properly. The new layer gets added, but the 'defaultBasemap' layer remains. The easiest solution is removing the 'defaultBasemap' layer just before setting a new basemap. Here's how I achieved it:

<SPAN class="keyword token">const</SPAN> baseMap <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'defaultBasemap'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN> baseMap <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeLayer</SPAN><SPAN class="punctuation token">(</SPAN>baseMap<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setBasemap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'streets'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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.