AnsweredAssumed Answered

LayerList zoom button event

Question asked by Beata_R on Nov 22, 2016
Latest reply on Nov 23, 2016 by rscheitlin

I am using LayerList widget which I am filling on layer-add even of the map. The layers are generated from the geoprocessing service based on the user interaction (so the number of layers varies).

Every time a new layer is added I am building the LayerList. I would like to be able to zoom to each layer so I decided to use the button which can be added to each layer on the LayerList.

I have problem with linking the onclick event of each button to my zoom function. I have tried different approaches (using dojo.connect, dojo.on, dojo.registry) – but none of them works. I do not quite yet understand the difference between them yet.

What is strange is that when using for example dojo.connect line the zoom function is fired once (I assume during loading of the layer) but without clicking the button (!). Why?

Can anyone please help and point me to the right solution – I have found only one example on the internet using the dojo.registry and dojo.ready function but that is assuming fixed number of layers. I have tried it too and I found that the dojo.ready function is fired before map layer-add event (WHY?) so it is of no use because the button does not exist yet.

I am pasting part of the code related to the explained issue only.

 

var map = new Map("mapDiv", {

   });

 

 

   var layerList = new LayerList({

       map: map,

       showLegend: true,

       showSubLayers: true,

       showOpacitySlider: true,

       layers: []

   }, "layersDiv");

 

       //ready(function () {

   //   registry.byId("baseLayer").on("click", function () {

   //       alert();

   //   });

   //});

 

   map.on("layer-add", function () {

       var tempLayers = [];

 

       for (var i = 0; i < map.layerIds.length; i++) {

 

           var btnZoom = domConstruct.create("button", { type: "button", id: map.layerIds[i], innerHTML: "Zoom" }, "divZoomButtons");

 

           //dojo.connect(btnZoom, "onclick", ZoomToLayerID(map.layerIds[i]));

 

           //on(btnZoom, "onclick", ZoomToLayerID(map.layerIds[i]));

 

           tempLayers.push(

               {

                   layer: map.getLayer(map.layerIds[i]),

                   button: btnZoom

               });

 

       }

 

       layerList.layers = tempLayers;

       //layerList.refresh();

       layerList.startup();

 

   })

 

   //layerList.on('load', function () {

   //   var a = dojo.byId("baselayer");

   //   on(a, "onclick", ZoomToLayerID("baseLayer"));

   //   //dojo.connect(a, "onclick", ZoomToLayerID(a.id));

   //})

 

   function ZoomToLayerID(layerID) {

       var ext = map.getLayer(layerID).fullExtent;

       map.setExtent(ext);

   }

 

 

   var baseLayer = new esri.layers.ArcGISDynamicMapServiceLayer("<link to the service – removed by me>", { id: "baseLayer", opacity: 0.5 });

   baseLayer.name = "Base map";

   map.addLayer(baseLayer);

 

HTML part:

<div id="mapDiv"></div> <div id="layersDiv"></div> <div id="divZoomButtons"></div>

 

Outcomes