topic Re: Map Attribution is not working after handling map.onLayerAdd and map.onLayerRemove Events in ArcGIS JavaScript Maps SDK Questions

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

SumitZ — Thu, 19 Mar 2015 10:46:45 GMT

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.

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

KellyHutchins — Sat, 11 Dec 2021 20:23:46 GMT

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.

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

SumitZ — Fri, 20 Mar 2015 00:08:47 GMT

Thanks kelly !

It work as expected now.

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

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

KellyHutchins — Fri, 20 Mar 2015 16:45:27 GMT

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

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

sumitzarkar — Fri, 10 Apr 2015 08:24:02 GMT

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.

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

KellyHutchins — Fri, 10 Apr 2015 16:20:51 GMT

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/

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

sumitzarkar — Sat, 11 Dec 2021 20:23:49 GMT

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>

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

KellyHutchins — Fri, 10 Apr 2015 18:16:54 GMT

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

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

sumitzarkar — Fri, 10 Apr 2015 18:36:21 GMT

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.