AnsweredAssumed Answered

Problem with visibility of layers and popup

Question asked by edudom on Jul 1, 2015
Latest reply on Jul 1, 2015 by rscheitlin

Hi all,

 

I am having a problem because I cannot use the same layer for popup and visibility. What I want is when a layer is off, this layer has not popup window till is in on again. But if I put the same layer for both an error emerges like layer is not a function.

Here goes the code, TAKE INTO ACCOUNT THAT layerA = layerB. Thanks in advance:

 

<script src="http://js.arcgis.com/3.13/"></script>

  <script>

   var map, identifyTask, findTask, findParams, identifyParams;

    require([

      "esri/map",

      "esri/geometry/Extent",

      "esri/layers/FeatureLayer",

      "esri/dijit/Legend",

      "esri/layers/ArcGISDynamicMapServiceLayer",

      "esri/layers/ImageParameters",

      "esri/InfoTemplate",

      "esri/dijit/BasemapGallery",

      "esri/dijit/Scalebar",

      "esri/symbols/SimpleFillSymbol",

       "esri/symbols/SimpleLineSymbol",

       "esri/symbols/SimpleMarkerSymbol",

       "esri/tasks/IdentifyTask",

       "esri/tasks/IdentifyParameters",

       "esri/tasks/FindParameters",

       "esri/dijit/Popup",

       "esri/dijit/Measurement",

        "esri/toolbars/draw",

        "esri/graphic",

        "dojo/on",

        "esri/tasks/query",

        "esri/layers/LayerDrawingOptions",

        "dojo/_base/Color",

        "dojo/dom-construct",

        "dojo/dom",

        "dojo/query",

        "esri/tasks/FindTask",

        "dojo/_base/array",

        "dojo/_base/connect",

        "dojox/grid/DataGrid",

        "dojo/data/ItemFileReadStore",

        "dojo/_base/array", "dojo/parser",

        "dijit/layout/BorderContainer",

        "dijit/layout/ContentPane",

        "dijit/layout/AccordionContainer",

        "dijit/form/ComboBox",

        "dojo/domReady!"

    ], function(

      Map,

      Extent,

      FeatureLayer,

      Legend,

      ArcGISDynamicMapServiceLayer,

      ImageParameters,

      InfoTemplate,

      BasemapGallery,

      Scalebar,

      SimpleFillSymbol,

      SimpleLineSymbol,

      SimpleMarkerSymbol,

      IdentifyTask,

      IdentifyParameters,

      FindParameters,

      Popup,

      Measurement,

      Draw,

      Graphic,

      on,

      Query,

      LayerDrawingOptions,

      Color,

      domConstruct,

      dom,

      query,

      FindTask,

      arrayUtils,

      connect,

      DataGrid,

      ItemFileReadStore,

      arrayUtils,

      parser

    ) {

       

      parser.parse();

     

 

      

 

var extentinitial= new Extent({

 

 

"xmin":5533768.561124517,

"ymin":2910407.85970325,

"xmax":5969153.874236671,

"ymax":3018948.4398681484,

"spatialReference":{"wkid":102100,"latestWkid":2932}

 

 

 

 

});

 

 

var popup = new Popup({

    

          fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,

            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

              new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))

        }, domConstruct.create("div"));

 

      map = new Map("map", {

        basemap:"topo",

        extent: extentinitial,

        zoom: 9

      });

 

 

 

var layerA = new ArcGISDynamicMapServiceLayer("http://XXX", {

     

    });

     

 

 

 

var basemapGallery = new BasemapGallery({

        showArcGISBasemaps: true,

        map: map

        }, "basemapGallery");

        basemapGallery.startup();

      

        basemapGallery.on("error", function(msg) {

        console.log("basemap gallery error:  ", msg);

        });

 

 

 

 

 

 

      //add the legend

     var legend = new Legend({

        map: map,

        }, "legendDiv");

        legend.refresh([{layer:layerA, title:'LEGEND'}]);

 

        legend.startup();

     

     

map.addLayer(layerA);

 

 

 

 

 

 

 

      var visibleLayerIds = []

     

          on(dom.byId("layer0CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer1CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer2CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer3CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer4CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer5CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer6CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer7CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer8CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer9CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer10CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer11CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer12CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer13CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer14CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer15CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer16CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer17CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer18CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer19CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer20CheckBox"), "change", updateLayerVisibility);

           on(dom.byId("layer21CheckBox"), "change", updateLayerVisibility);

 

 

          function updateLayerVisibility () {

            var inputs = query(".list_item");

            var inputCount = inputs.length;

 

            visibleLayerIds = [];

 

            for (var i = 0; i < inputCount; i++) {

              if (inputs[i].checked) {

                visibleLayerIds.push(inputs[i].value);

              }

            }

 

            if (visibleLayerIds.length === 0) {

              visibleLayerIds.push(21);

            }

 

            layerA.setVisibleLayers(visibleLayerIds);

          }

 

     

     

       map.on("load", mapReady);

      

      

       var imageParameters = new ImageParameters();

          imageParameters.layerIds = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21];

          imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;

      

 

        var layerB = "http://XXX";

        map.addLayer(new ArcGISDynamicMapServiceLayer(layerB,

          {"imageParameters": imageParameters, visible: false }));

 

   

 

          function mapReady () {

          mapClick = map.on("click", function(event){

            executeIdentifyTask(event);

          });

 

          identifyTask = new IdentifyTask(layerB);

 

          identifyParams = new IdentifyParameters();

          identifyParams.tolerance = 3;

          identifyParams.returnGeometry = true;

          identifyParams.layerIds = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21];

          identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE;

          identifyParams.width = map.width;

          identifyParams.height = map.height;

        }

 

        function executeIdentifyTask (event) {

          identifyParams.geometry = event.mapPoint;

          identifyParams.mapExtent = map.extent;

 

          var deferred = identifyTask

            .execute(identifyParams)

            .addCallback(function (response) {

 

              return arrayUtils.map(response, function (result) {

                var feature = result.feature;

                var layerName = result.layerName;

 

                feature.attributes.layerName = layerB;

                if (layerName === 'L1') {

                  var azTemplate = new InfoTemplate("L1");

                  feature.setInfoTemplate(azTemplate);

                }

               

                else if (layerName === 'L2') {

                  var hyTemplate = new InfoTemplate(

                    "L2");

                  feature.setInfoTemplate(hyTemplate);

                }

                else if (layerName === 'L3') {

                  var siTemplate = new InfoTemplate(

                    "L3");

                  feature.setInfoTemplate(siTemplate);

                }

                else if (layerName === 'L4') {

                  var psTemplate = new InfoTemplate(

                    "L4");

                  feature.setInfoTemplate(psTemplate);

                }

                 else if (layerName === 'L5') {

                  var daTemplate = new InfoTemplate(

                    "L5");

                  feature.setInfoTemplate(daTemplate);

                }

                else if (layerName === 'L6') {

                  var slTemplate = new InfoTemplate(

                    "L6");

                  feature.setInfoTemplate(slTemplate);

                }

                else if (layerName === 'L7') {

                  var tsTemplate = new InfoTemplate(

                    "L7");

                  feature.setInfoTemplate(tsTemplate);

                }

                 else if (layerName === 'L8') {

                  var acoTemplate = new InfoTemplate(

                    "L8");

                  feature.setInfoTemplate(acoTemplate);

                }

                 else if (layerName === 'L9') {

                  var ceTemplate = new InfoTemplate(

                    "L9");

                  feature.setInfoTemplate(ceTemplate);

                }

                 else if (layerName === 'L10') {

                  var vrsTemplate = new InfoTemplate(

                    "L10");

                  feature.setInfoTemplate(vrsTemplate);

                }

                  else if (layerName === 'L11') {

                  var rsTemplate = new InfoTemplate(

                    "L11");

                  feature.setInfoTemplate(rsTemplate);

                }

                 else if (layerName === 'L12') {

                  var cuTemplate = new InfoTemplate(

                    "L12");

                  feature.setInfoTemplate(cuTemplate);

                }

                 else if (layerName === 'L13') {

                  var rmTemplate = new InfoTemplate(

                    "L13");

                  feature.setInfoTemplate(rmTemplate);

                }

                 else if (layerName === 'L14') {

                  var shTemplate = new InfoTemplate(

                    "L14");

                  feature.setInfoTemplate(shTemplate);

                }

                else if (layerName === 'L15') {

                  var acTemplate = new InfoTemplate(

                    "L15");

                  feature.setInfoTemplate(acTemplate);

                }

                else if (layerName === 'L16') {

                  var foTemplate = new InfoTemplate(

                    "L16");

                  feature.setInfoTemplate(foTemplate);

                }

                  else if (layerName === 'L17') {

                  var geTemplate = new InfoTemplate(

                    "L17");

                  feature.setInfoTemplate(geTemplate);

                }

                 else if (layerName === 'L18') {

                  var geTemplate = new InfoTemplate(

                    "L18");

                  feature.setInfoTemplate(geTemplate);

                }

                 else if (layerName === 'L19') {

                  var pvTemplate = new InfoTemplate(

                    "L19");

                  feature.setInfoTemplate(pvTemplate);

                }

                else if (layerName === 'L20') {

                  var lpTemplate = new InfoTemplate(

                    "L20");

                  feature.setInfoTemplate(lpTemplate);

                }

                else if (layerName === 'L21') {

                  var lpTemplate = new InfoTemplate(

                    "L21");

                  feature.setInfoTemplate(lpTemplate);

                }

                    else if (layerName === 'L22') {

                  var bsTemplate = new InfoTemplate(

                    "L22");

                  feature.setInfoTemplate(bsTemplate);

                }

              

                return feature;

              });

            });

      

          map.infoWindow.setFeatures([deferred]);

          map.infoWindow.show(event.mapPoint);

        }

     

     

     

     

    

     

     

     

     

       var scalebar = new Scalebar({

          map: map,

          scalebarUnit: "metric"

        });

     

     

     

   

        function initt() {

 

        esri.config.defaults.io.proxyUrl = "/proxy/";

        esri.config.defaults.io.alwaysUseProxy = false;

       

 

        esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

       

        dojo.connect(map, 'onLoad', function(map) {

 

        });

      

        var measurement = new Measurement({

          map: map

        }, dom.byId("measurementDiv"));

        measurement.startup();

       

 

        on(measurement, "tool-change", function(){

          mapClick.remove();

        });

       

        on(measurement, "measure-end", function(){

          measurement.setTool("distance", false); 

          measurement.setTool("area", false);

          measurement.setTool("location", false);      

          mapReady();

           map.graphics.clear();

        });

 

      }

      dojo.ready(initt);

     

     

     

     

     

     

    });

  </script>

Outcomes