Select to view content in your preferred language

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

4437
8
Jump to solution
03-19-2015 03:46 AM
SumitZ
by
Occasional Contributor

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.
0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Notable Contributor

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

0 Kudos
8 Replies
KellyHutchins
Esri Notable Contributor

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.

0 Kudos
SumitZ
by
Occasional Contributor

Thanks kelly !

It work as expected now.

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

0 Kudos
KellyHutchins
Esri Notable Contributor

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

0 Kudos
sumitzarkar
Deactivated User

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.

0 Kudos
KellyHutchins
Esri Notable Contributor

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/

0 Kudos
sumitzarkar
Deactivated User

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>
0 Kudos
KellyHutchins
Esri Notable Contributor

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

0 Kudos
sumitzarkar
Deactivated User

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.

0 Kudos