topic Re: Problem with visibility of layers and popup in ArcGIS JavaScript Maps SDK Questions

Problem with visibility of layers and popup

EduardoDomínguez — Wed, 01 Jul 2015 10:15:11 GMT

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:

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.checked) {

visibleLayerIds.push(inputs.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>

Re: Problem with visibility of layers and popup

RobertScheitlin__GISP — Wed, 01 Jul 2015 13:30:25 GMT

Eduardo,

Your code is kind of hard to follow. But why do you not just add the layer once and set a PopupTemplate for that one layer, that way when the layer is turned off the popups will not function. You know you can have a PopupTemplate without using the identify task right? Here is a sample:

Popup | ArcGIS API for JavaScript

Re: Problem with visibility of layers and popup

EduardoDomínguez — Wed, 01 Jul 2015 14:16:28 GMT

Thanks, but I think that a template is not the best thing because I need information of 21 layers.

Or is it also possible by using template? (I am a beginner with js so sorry for my code)

Thanks,

El 01/07/2015, a las 16:31, "Robert Scheitlin, GISP" <geonet@esri.com> escribió:
GeoNet
Problem with visibility of layers and popup
reply from Robert Scheitlin, GISP in ArcGIS API for JavaScript - View the full discussion
Eduardo,

Your code is kind of hard to follow. But why do you not just add the layer once and set a PopupTemplate for that one layer, that way when the layer is turned off the popups will not function. You know you can have a PopupTemplate without using the identify task right? Here is a sample:

Popup | ArcGIS API for JavaScript
Reply to this message by replying to this email, or go to the message on GeoNet
Start a new discussion in ArcGIS API for JavaScript by email or at GeoNet
Following Problem with visibility of layers and popup in these streams: Inbox
This email was sent by GeoNet because you are a registered user.
You may unsubscribe instantly from GeoNet, or adjust email frequency in your email preferences

Re: Problem with visibility of layers and popup

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:27:03 GMT

Eduardo,

You can have a template setup for all 21 of your layers of your Dynamic service. The sample I linked is just for one feature layer but the PopupTemplate can be applied to each sub layer of a ArcGISDynamicMapServiceLayer as well using the setInfoTemplates method.

ArcGISDynamicMapServiceLayer | API Reference | ArcGIS API for JavaScript | setInfoTemplates

Like this:

      var demographicsLayer = new ArcGISDynamicMapServiceLayer(demographicsLayerURL, demographicsLayerOptions);
      demographicsLayer.setInfoTemplates({
        1: { infoTemplate: _blockGroupInfoTemplate },
        2: { infoTemplate: _countyCensusInfoTemplate }
      });

The above code snippet came from this sample:

Add two dynamic maps | ArcGIS API for JavaScript

Re: Problem with visibility of layers and popup

EduardoDomínguez — Wed, 01 Jul 2015 17:17:41 GMT

Many thanks. So can it be used to create popup from a dynamic service layer with 21 layers??

El 1/7/2015, a las 17:33, Robert Scheitlin, GISP <geonet@esri.com> escribió:
GeoNet
Problem with visibility of layers and popup
reply from Robert Scheitlin, GISP in ArcGIS API for JavaScript - View the full discussion
Eduardo,

You can have a template setup for all 21 of your layers of your Dynamic service. The sample I linked is just for one feature layer but the PopupTemplate can be applied to each sub layer of a ArcGISDynamicMapServiceLayer as well using the setInfoTemplates method.

ArcGISDynamicMapServiceLayer | API Reference | ArcGIS API for JavaScript | setInfoTemplates

Like this:

var demographicsLayer = new ArcGISDynamicMapServiceLayer(demographicsLayerURL, demographicsLayerOptions);
demographicsLayer.setInfoTemplates({
1: { infoTemplate: _blockGroupInfoTemplate },
2:
});

The above code snippet came from this sample:
Add two dynamic maps | ArcGIS API for JavaScript
Reply to this message by replying to this email, or go to the message on GeoNet
Start a new discussion in ArcGIS API for JavaScript by email or at GeoNet
Following Problem with visibility of layers and popup in these streams: Inbox
This email was sent by GeoNet because you are a registered user.
You may unsubscribe instantly from GeoNet, or adjust email frequency in your email preferences

Re: Problem with visibility of layers and popup

RobertScheitlin__GISP — Wed, 01 Jul 2015 17:24:18 GMT

Yes.