topic Re: Disable infotemplate for one of ArcGISDynamicMapServiceLayer in ArcGIS JavaScript Maps SDK Questions

Disable infotemplate for one of ArcGISDynamicMapServiceLayer

KPearson — Wed, 02 Dec 2015 15:53:54 GMT

I have a service with 2 layers that I add to my application with a ArcGISDynamicMapServiceLayer.

var myLayer = new ArcGISDynamicMapServiceLayer("http....."{});

I only want to set up a InfoTemplate for layer [1] and not [0] but make them both visible. It still displays a infotemplate with "no information available" for [0].

myLayer.setInfoTemplates({

1: { infoTemplate: protrackInfoTemplate }

});

myLayer.setVisibleLayers([0, 1]);

I've also tried 0: { infoTemplate: null } but it still displays a blank infotemplate.

I've looked through the documentation and I can't determine how to disable [0] while still making it visible.

Re: Disable infotemplate for one of ArcGISDynamicMapServiceLayer

TracySchloss — Wed, 02 Dec 2015 16:34:11 GMT

Why not load 0 and 1 each as a separate layer? Then you could define an infoTemplate on one, but not the other.

It's hard to tell from your code - are you doing an identify? When I wanted to suppress the infoWindow when there wasn't any data, I put an if statement in the results handler to check if the length === 0. If it is, then I used map.infoWindow.clearFeatures(); which keeps the infoWindow from ever displaying.

Re: Disable infotemplate for one of ArcGISDynamicMapServiceLayer

RobertScheitlin__GISP — Wed, 02 Dec 2015 17:49:39 GMT

K Pearson,

I can not find a way to prevent the infoWindow from appearing as the info window does not know which layer has been clicked until it queries the maps services to see if anything is intersected by the point. But you can make the infoWindow go away if there are no results by setting the visibleWhenEmpty property.

map.InfoWindow.visibleWhenEmpty = false;

Popup | API Reference | ArcGIS API for JavaScript

Re: Disable infotemplate for one of ArcGISDynamicMapServiceLayer

KPearson — Wed, 02 Dec 2015 20:05:40 GMT

I'm only using a infoTemplate, not a popup(which is a subclass of infoTemplate), popuptemplate, or infoWindow. I create the content and then add that to the infoTemplate(protracklInfoTemplate).

As for loading each as a separate layer that would definitely solve the infotemplate issue, but then causes duplicates of each in my layerlist.

Re: Disable infotemplate for one of ArcGISDynamicMapServiceLayer

RobertScheitlin__GISP — Wed, 02 Dec 2015 20:11:53 GMT

K Pearson,

FYI,The map objects InfoWindow is a popup dijit by default and not an InfoTemplate. So the code I provide should work fine.

Re: Disable infotemplate for one of ArcGISDynamicMapServiceLayer

KPearson — Wed, 02 Dec 2015 20:19:51 GMT

I did try that and it didn't work.

Re: Disable infotemplate for one of ArcGISDynamicMapServiceLayer

RobertScheitlin__GISP — Wed, 02 Dec 2015 20:22:53 GMT

K Pearson,

OK, let me make sure we are clear on what this should be doing then. When you click on the map the infoWindow will still appear and say searching and then change to no information available for a second and then hide automatically when clicking on the layer that does not have the infoTemplate setup.

Re: Disable infotemplate for one of ArcGISDynamicMapServiceLayer

KPearson — Wed, 02 Dec 2015 20:36:32 GMT

WHen I click on layer [1] it works as expected. When I click on layer[0] it displays infotemplate with 'no info available'.

Re: Disable infotemplate for one of ArcGISDynamicMapServiceLayer

RobertScheitlin__GISP — Wed, 02 Dec 2015 21:45:49 GMT

K Pearson,

And that InfoWindow does not automatically close after a second?

Re: Disable infotemplate for one of ArcGISDynamicMapServiceLayer

RobertScheitlin__GISP — Fri, 10 Dec 2021 23:36:51 GMT

K Pearson,

Here is a sample of what I am talking about working:

<!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.15/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;
    }

    .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.15/"></script>
  <script>
    var map;
    require([
      "dojo/dom-construct",
      "dojo/aspect",
      "dojo/_base/lang",
      "dojo/on",
      "esri/Color",
      "esri/dijit/Geocoder",
      "esri/dijit/Popup",
      "esri/InfoTemplate",

      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/map",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol", "dojo/domReady!"
    ], function(
      domConstruct, aspect, lang, on, Color, Geocoder, Popup, InfoTemplate,
      ArcGISDynamicMapServiceLayer, Map, SimpleFillSymbol, SimpleLineSymbol
    ) {
      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 preventPopupShow = false;
      aspect.before(popup, "show", lang.hitch(this, function(evt){
        if(preventPopupShow){
          evt.preventDefault();
          evt.stopPropagation();
        }
      }));

      on(popup, "set-features", function(evt){
        if(!evt.target.features){
          preventPopupShow = true;
        }else{
          preventPopupShow = false;
        }
      });

      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 = "http://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 }
      });
      demographicsLayer.setVisibleLayers([1, 2]);
      map.addLayer(demographicsLayer);

      var oilAndGasLayer = new ArcGISDynamicMapServiceLayer("http://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>
</body>
</html>