dynamicMapservice.setVisibleLayers() doesn't seems to work when two different mapservices are involved.

AlifShaikh — Sun, 12 Dec 2021 00:19:06 GMT

Hi All,

I am using ArcGIS JS API 3.28

I have two mapservices lets say mapservice1 and mapservice2. I am setting the visibility of the layer using two different buttons.

//on button1 click.
mapservice1.setVisibleLayers([1]);‍‍‍‍‍
mapservice2.setVisibleLayers([3]);‍‍‍‍‍

//on button2 click.

mapservice1.setVisibleLayers([-1]);‍‍‍‍‍ //this works
mapservice2.setVisibleLayers([-1]);‍‍‍‍‍ //this doesn't‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

what am I doing wrong here? any help would be greatly appreciated.

Regards,

Alif

Re: dynamicMapservice.setVisibleLayers() doesn't seems to work when two different mapservices are involved.

RobertScheitlin__GISP — Sun, 12 Dec 2021 00:19:09 GMT

Alif,

It has something to do with your data. This sample using two dynamic layers works fine.

<!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">
  
  
  
  <meta name="apple-mobile-web-app-capable" content="yes">
  
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  
  <meta name="mobile-web-app-capable" content="yes">
  <title>ArcGIS dynamic and tile layers using Popup and InfoTemplates</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.30/esri/css/esri.css">
  <style>
    html, body, #ui-esri-map {
      width:   100%;
      height:  100%;
      margin:  0;
      padding: 0;
    }

    #ui-esri-dijit-geocoder {
      top:      20px;
      left:     70px;
      position: absolute;
      z-index:  3;
    }
    
    #myButton {
      top:      60px;
      left:     70px;
      position: absolute;
      z-index:  3;
    }

    .esriPopup .titlePane {
      text-shadow: none;
    }

    .esriPopup .titleButton.next {
      right: 40px;
    }

    .esriPopup .titleButton.prev {
      right: 53px;
    }

    .demographicInfoContent {
      padding-top: 10px;
    }

    .demographicInnerSpacing {
      display: inline-block;
      width:   8px;
    }

    .demographicNumericPadding {
      width:      90px;
      display:    inline-block;
      text-align: right;
    }
  </style>
  <script src="https://js.arcgis.com/3.30/"></script>
  <script>
    var map;
    require([
      "dojo/dom-construct",
      "esri/Color",
      "esri/dijit/Geocoder",
      "esri/dijit/Popup",
      "esri/InfoTemplate",

      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/map",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "dojo/on",
      "dojo/_base/lang",
      "dojo/domReady!"
    ], function(
      domConstruct, Color, Geocoder, Popup, InfoTemplate, 
      ArcGISDynamicMapServiceLayer, Map, SimpleFillSymbol, SimpleLineSymbol, on, lang
    ) {
      var myBtn = document.getElementById('myButton');
      on(myBtn, 'click', lang.hitch(this, function(){
        demographicsLayer.setVisibleLayers([-1]);
        oilAndGasLayer.setVisibleLayers([-1]);
      }));
      
      var sls = new SimpleLineSymbol("solid", new Color("#444444"), 3);
      var sfs = new SimpleFillSymbol("solid", sls, new Color([68, 68, 68, 0.25]));

      var popup = new Popup({
        fillSymbol: sfs,
        lineSymbol: null,
        markerSymbol: null
      }, domConstruct.create("div"));

      map = new Map("ui-esri-map", {
        basemap: "topo",
        center: [-94.75290067627297, 39.034671990514816], // long, lat
        zoom: 12,
        sliderStyle: "small",
        infoWindow: popup
      });

      var geocoder = new Geocoder({
        arcgisGeocoder: {
          placeholder: "Search "
        },
        map: map
      }, "ui-esri-dijit-geocoder");

      var _countyCensusInfoTemplate = new InfoTemplate();
      _countyCensusInfoTemplate.setTitle("<b>Census Information</b>");

      var _blockGroupInfoTemplate = new InfoTemplate();
      _blockGroupInfoTemplate.setTitle("<b>Census Information</b>");

      var _censusInfoContent =
        "<div class=\"demographicInfoContent\">" +
        "<div class='demographicNumericPadding'>${AGE_5_17:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 5 - 17<br>" +
        "<div class='demographicNumericPadding'>${AGE_40_49:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 40 - 49<br>" +
        "<div class='demographicNumericPadding'>${AGE_65_UP:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 65 and older" +
        "</div>";

      _countyCensusInfoTemplate.setContent("Demographics for:<br>${NAME} ${STATE_NAME:getCounty}, ${STATE_NAME}<br>" + _censusInfoContent);
      _blockGroupInfoTemplate.setContent("Demographics for:<br>Tract: ${TRACT:formatNumber} Blockgroup: ${BLKGRP}<br>" + _censusInfoContent);

      var _oilAndGasInfoTemplate = new InfoTemplate();
      _oilAndGasInfoTemplate.setTitle("<b>Oil and Gas data</b>");

      var _oilAndGasInfoContent =
        "<div class=\"demographicInfoContent\">" +
        "Gas production: ${PROD_GAS}<br>Oil production: ${PROD_OIL:formatNumber}" +
        "</div>";

      _oilAndGasInfoTemplate.setContent("${FIELD_NAME} production field<br>" +
        _oilAndGasInfoContent);

      var demographicsLayerURL = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
      var demographicsLayerOptions = {
        "id": "demographicsLayer",
        "opacity": 0.8,
        "showAttribution": false
      };
      var demographicsLayer = new ArcGISDynamicMapServiceLayer(demographicsLayerURL, demographicsLayerOptions);
      demographicsLayer.setInfoTemplates({
        1: { infoTemplate: _blockGroupInfoTemplate },
        2: { infoTemplate: _countyCensusInfoTemplate }
      });
      demographicsLayer.setVisibleLayers([1, 2]);
      map.addLayer(demographicsLayer);

      var oilAndGasLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer", {
        "id": "oilAndGasLayer",
        "opacity": 0.75
      });
      oilAndGasLayer.setInfoTemplates({
        0: { infoTemplate: _oilAndGasInfoTemplate }
      });
      map.addLayer(oilAndGasLayer);

      geocoder.startup();
    });

    var formatNumber = function(value, key, data) {
      var searchText = "" + value;
      var formattedString = searchText.replace(/(\d)(?=(\d\d\d)+(?!\d))/gm, "$1,");
      return formattedString;
    };

    var getCounty = function(value, key, data) {
      if (value.toUpperCase() !== "LOUISIANA") {
        return "County";
      } else {
        return "Parish";
      }
    };
  </script>
</head>
<body>
<div id="ui-esri-map"></div>
<div id="ui-esri-dijit-geocoder"></div>
<button id="myButton">Clear Layers...</button>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: dynamicMapservice.setVisibleLayers() doesn't seems to work when two different mapservices are involved.

kathysll — Tue, 27 Dec 2022 20:11:27 GMT

(index):142 GET https://sampleserver1.arcgisonline.com/ArcGIS/rest/info?f=json net::ERR_NAME_NOT_RESOLVED
m @ (index):142
b.xhr @ (index):93
b.xhrGet @ (index):93
C @ (index):962
z @ (index):971
_load @ (index):1069
(anonymous) @ (index):64
constructor @ (index):2136
(anonymous) @ (index):201
(anonymous) @ nassau3.html:157
ja @ (index):28
(anonymous) @ (index):29
ka @ (index):29
ha @ (index):29
q @ (index):31
(anonymous) @ (index):36
load (async)
Oa @ (index):35
g.injectUrl @ (index):35
ra @ (index):33
e @ (index):10
(anonymous) @ (index):20
ka @ (index):29
oa @ (index):20
(anonymous) @ (index):34
e @ (index):10
ab @ (index):34
q @ (index):31
(anonymous) @ (index):36
load (async)
Oa @ (index):35
g.injectUrl @ (index):35
ra @ (index):33
e @ (index):10
(anonymous) @ (index):20
ka @ (index):29
oa @ (index):20
(anonymous) @ (index):34
e @ (index):10
ab @ (index):34
q @ (index):31
(anonymous) @ (index):36
load (async)
Oa @ (index):35
g.injectUrl @ (index):35
ra @ (index):33
e @ (index):10
(anonymous) @ (index):20
ka @ (index):29
oa @ (index):20
Qa @ (index):20
g @ (index):11
(anonymous) @ nassau3.html:68
dojo.js:153 GET https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer?f=json&dpi=96&transparent=true&format=png8&callback=dojo_request_script_callbacks.dojo_request_script0 net::ERR_NAME_NOT_RESOLVED

topic Re: dynamicMapservice.setVisibleLayers() doesn't seems to work when two different mapservices are involved. in ArcGIS JavaScript Maps SDK Questions

dynamicMapservice.setVisibleLayers() doesn't seems to work when two different mapservices are involved.

Re: dynamicMapservice.setVisibleLayers() doesn't seems to work when two different mapservices are involved.

Re: dynamicMapservice.setVisibleLayers() doesn't seems to work when two different mapservices are involved.