We have set showAttribution to true while creating map object and the attribution changes properly until we handle map.onLayerAdd and map.onLayerRemove Events.
As soon as we handel map.onLayerAdd and map.onLayerRemove Events Map Attribution is not working properly.
Steps to reproduce:
Solved! Go to Solution.
Sumit,
In order to listen for the layer add and remove events you should be doing something like this:
map.on("layer-add", function(layer){ console.log("Layer added - " + layer.id); }); map.on("layer-remove", function(layer){ console.log("Layer removed - " + layer.id); });
I switched out your existing code that set map.onLayerAdd and map.onLayerRemove to the above and the attribution works as expected.
Sumit,
In order to listen for the layer add and remove events you should be doing something like this:
map.on("layer-add", function(layer){ console.log("Layer added - " + layer.id); }); map.on("layer-remove", function(layer){ console.log("Layer removed - " + layer.id); });
I switched out your existing code that set map.onLayerAdd and map.onLayerRemove to the above and the attribution works as expected.
Thanks kelly !
It work as expected now.
May I know what is the difference between this two different implementation, its Just for the information.
When working with the JSAPI you want to use dojo/on to handle events. More details can be found here:
We are facing same of problem of attribution not getting updated on basemap change if we create a map using any webmap which having “National Geographic word map” as a basemap.
Please Suggest.
I can't reproduce with the sample below - can you provide a code sample that shows the problem.
http://developers.arcgis.com/javascript/samples/widget_basemap/
We have found that this is occuring only when we have webmap and the webmap has "National Geographic Map" as a default basemap.
I have Attached the Code and also below is the code for the same sample.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Create web map from id</title> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } body { background-color: #FFF; overflow: hidden; font-family: "Trebuchet MS"; } #toggleButton { position: absolute; z-index: 1000; top: 20px; right: 24px; } #handelButton { position: absolute; z-index: 1000; top: 20px; right: 150px; } </style> <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css"> <script src="http://js.arcgis.com/3.13/"></script> <script> var map, basemapIndex = 1, handeledLayerEvents = false; require([ "dojo/_base/array", "dojo/dom", "esri/urlUtils", "esri/arcgis/utils", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ArcGISTiledMapServiceLayer", "esri/config", "dojo/domReady!" ], function( array, dom, urlUtils, arcgisUtils, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, esriConfig ) { esriConfig.defaults.io.proxyUrl = "/proxy/"; //load basemap arcgisUtils.arcgisUrl = "http://www.arcgis.com/sharing/rest/content/items"; var webmap = arcgisUtils.createMap("ceccc4e5a9dd4f649b3448c6638f4532", "map").then(function(response) { map = response.map; basemapIndex = 2; if (response.itemInfo.itemData.baseMap.baseMapLayers) { _setBasemapLayerId(response.itemInfo.itemData.baseMap.baseMapLayers); } }, function(err) { console.log(err); }); dom.byId("toggleButton").onclick = function() { var basemap; map.removeAllLayers(); if (basemapIndex == 1) { basemapIndex = 2; basemap = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer", { id: "defaultBasemap", visible: true }); map.addLayer(basemap, 0); } else { basemapIndex = 1; basemap = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer", { id: "defaultBasemap", visible: true }); map.addLayer(basemap, 0); } map.addLayer(basemap, 0); }; /** * set default id for basemaps * @memberOf widgets/mapSettings/mapSettings */ function _setBasemapLayerId(baseMapLayers) { var i = 0, defaultId = "defaultBasemap"; if (baseMapLayers.length === 1) { _setBasemapId(baseMapLayers[0], defaultId); } else { for (i = 0; i < baseMapLayers.length; i++) { _setBasemapId(baseMapLayers, defaultId + i); } } } /** * set default id for each basemap of web map * @memberOf widgets/mapSettings/mapSettings */ function _setBasemapId(basmap, defaultId) { var layerIndex; map.getLayer(basmap.id).id = defaultId; map._layers[defaultId] = map.getLayer(basmap.id); layerIndex = array.indexOf(map.layerIds, basmap.id); if (defaultId !== basmap.id) { delete map._layers[basmap.id]; } map.layerIds[layerIndex] = defaultId; } }); </script> </head> <body class="claro"> <div id="map"> <button id="toggleButton"> Change BaseMap</button> </div> </body> </html>
Have you thought about just using the BasemapToggle widget? There are a few workarounds you have to add to support web maps but its not too bad. Here's an example of how to use the basemap toggle widget with a web map.
Thanks Kelly this is good sample, but we have our own custom implementation of BasemapToggle widget with different UI and also supporting different types of layers, so we cant use the base map toggle widget.
We are using same techniquie as shown in the attached sample in our custom implementation of BasemapToggle widget It would be great help if we could solve this issue by some other way.
please suggest.