Map Attribution is not working after handling map.onLayerAdd and map.onLayerRemove Events

SumitZ · ‎03-19-2015

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:

In attached sample click on "change basemap" button and observe map attribution is changing.
Now click on "Handel Layer Add/Remove Events" button
Now click on "change basemap" button and observe the map attribution is not changing.

KellyHutchins · ‎03-19-2015

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.

View solution in original post

KellyHutchins · ‎03-19-2015

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.

SumitZ · ‎03-19-2015

Thanks kelly !

It work as expected now.

May I know what is the difference between this two different implementation, its Just for the information.

KellyHutchins · ‎03-20-2015

When working with the JSAPI you want to use dojo/on to handle events. More details can be found here:

Working with events | Guide | ArcGIS API for JavaScript

sumitzarkar · ‎04-10-2015

Kelly Hutchins

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.

KellyHutchins · ‎04-10-2015

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/

sumitzarkar · ‎04-10-2015

Kelly Hutchins

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>

KellyHutchins · ‎04-10-2015

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.

Create web map from id

sumitzarkar · ‎04-10-2015

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.