LayerList zoom button event

BeataRutkowska · ‎11-22-2016

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, innerHTML: "Zoom" }, "divZoomButtons");

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

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

tempLayers.push(

{

layer: map.getLayer(map.layerIds),

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:

RobertScheitlin__GISP · ‎11-23-2016

Beata,

Here is a sample for that:

<!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>Layer List Dijit</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.18/esri/css/esri.css">

    <style>
        html, body, .container, #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            margin: 0;
            font-family: "Open Sans";
        }

        #map {
            padding: 0;
        }

        #layerListPane {
            width: 25%;
        }

        .esriLayer {
            background-color: #fff;
        }

        .esriLayerList .esriList {
            border-top: none;
        }

        .esriLayerList .esriTitle {
            background-color: #fff;
            border-bottom: none;
        }

        .esriLayerList .esriList ul {
            background-color: #fff;
        }
    </style>
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://js.arcgis.com/3.18/"></script>
    <script>
        require([
            "esri/map",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/dijit/LayerList",
            "dojo/ready",
            "dijit/registry",
            "dojo/query",
            "esri/tasks/GeometryService",
            "esri/tasks/ProjectParameters",
            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dojo/domReady!"
        ], function (
            Map,
            ArcGISDynamicMapServiceLayer,
            LayerList,
            ready, registry, query, GeometryService, ProjectParameters
        ) {
            ready(function () {
                registry.byId("btnZoom").on("click", function (evt) {
                    console.info(query(".esriLabel", evt.target.parentNode.parentNode.parentNode)[0].innerHTML);
                    ZoomToLayerID(query(".esriLabel", evt.target.parentNode.parentNode.parentNode)[0].innerHTML);
                });
            });
            var geomSvc = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
            //Create a map based on an ArcGIS Online web map id
            var map = new Map("map", {
                basemap: "topo",
                center: [-123, 47], // long, lat
                zoom: 8,
                sliderStyle: "small"
            });

            var atlasLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", {
                "id": "Atlas layers",
                "showAttribution": false
            });

            map.addLayer(atlasLayer);

            var myWidget = new LayerList({
                map: map,
                layers: [{
                    layer: atlasLayer,
                    id: "Atlas_layers",
                    button: "ZoomButton",
                    subLayers: true
                }],
            }, "layerList");

            function ZoomToLayerID(layerID) {
               var ext = map.getLayer(layerID).fullExtent;
               if(ext.spatialReference !== map.spatialReference){
                 var params = new ProjectParameters();
                 params.outSR = map.spatialReference;
                 params.geometries = [ext];
                 geomSvc.project(params, function(geoms){
                   map.setExtent(geoms[0], true);
                 });
               }else{
                 map.setExtent(ext, true);
               }
           }
        });
    </script>
</head>
<body class="claro">
    <div class="container" data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline',gutters:false">
        <div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
            <div id="layerList"></div>
        </div>
        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
    </div>
    <div id="ZoomButton">
        <button data-dojo-type="dijit/form/Button" type="button" title="Zoom To" id="btnZoom">
            Zoom To
        </button>
    </div>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍