topic Re: Popup Window in ArcGIS JavaScript Maps SDK Questions

Popup Window

NicholasKnabe — Tue, 30 Jul 2013 13:48:57 GMT

I have a popup window when you click on my features. I have 15 different layers but only one is visible from the start. I cannot for the life of me figure out how to identify just the layers that are visible. I have gone through all the tutorials and read through all the forums as well. I had it working before I got my rest services to say that the features are visible by default.

Also I cannot figure out how to incorporate a hyperlink (youtube link) attribute into my popup window so it is clickable

Thanks

Re: Popup Window

KenBuja — Sun, 12 Dec 2021 07:10:49 GMT

What are the parameters you're setting for the IdentifyTask? This should return just the visible layers

        identifyTask = new esri.tasks.IdentifyTask(yourUrl);
        identifyParams = new esri.tasks.IdentifyParameters();
        identifyParams.tolerance = 3;
        identifyParams.returnGeometry = true;
        identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;
        identifyParams.width = map.width;
        identifyParams.height = map.height;

Re: Popup Window

NicholasKnabe — Sun, 12 Dec 2021 07:10:51 GMT

  function mapReady(map) {
          dojo.connect(map, "onClick", executeIdentifyTask);
          //create identify tasks and setup parameters 
          identifyTask = new esri.tasks.IdentifyTask("http://maps101.gis.halff.com/ladon/rest/services/Lubbock/LubbockCCTVAssets/MapServer/");
          identifyParams = new esri.tasks.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];
          identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
          identifyParams.width = map.width;
          identifyParams.height = map.height;

      }

Re: Popup Window

KenBuja — Sun, 12 Dec 2021 07:10:54 GMT

  function mapReady(map) {
          dojo.connect(map, "onClick", executeIdentifyTask);
          //create identify tasks and setup parameters 
          identifyTask = new esri.tasks.IdentifyTask("http://maps101.gis.halff.com/ladon/rest/services/Lubbock/LubbockCCTVAssets/MapServer/");
          identifyParams = new esri.tasks.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];
          identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
          identifyParams.width = map.width;
          identifyParams.height = map.height;

      }

You can set the layerIds property to the visible layers (setting this property any time you change the visibility of one of the layers) or you can leave that property off and set the layerOption property to esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE

Re: Popup Window

NicholasKnabe — Tue, 30 Jul 2013 16:17:40 GMT

I've done both and it still ID's every layer. Thanks for the try. Been stumped for a month now

Re: Popup Window

KenBuja — Tue, 30 Jul 2013 16:32:16 GMT

Can you post your full code or make a Fiddle that shows the problem?

Re: Popup Window

NicholasKnabe — Tue, 30 Jul 2013 16:42:16 GMT

They are secured services and I do not know if my IT would want me to share the login credentials. It just doesn't make sense I have it changed to VISIBLE and it still ID's every layer that is within the tolerance no matter if it is turned on or off.

Thanks for trying

Re: Popup Window

NicholasKnabe — Sun, 12 Dec 2021 07:10:56 GMT

          var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer")
          map.addLayer(basemap);



          var lubbock = new esri.layers.ArcGISDynamicMapServiceLayer("http://maps101.gis.halff.com/ladon/rest/services/Lubbock/LubbockCCTVAssets/MapServer", {
              id: 'lubbock',
              opacity: 0.8
          });

          map.addLayers([lubbock]);



          dojo.connect(map, 'onLayersAddResult', function (results) {
              var toc = new agsjs.dijit.TOC({
                  map: map,
                  layerInfos: [{
                      layer: lubbock,
                      title: "Lubbock CCTV Assets"
                  }, ]
              }, 'tocDiv');
              toc.startup();

              lubbock.setVisibleLayers([9]);

              

          });
          function mapReady(map) {
              dojo.connect(map, "onClick", executeIdentifyTask);
              //create identify tasks and setup parameters 
              identifyTask = new esri.tasks.IdentifyTask("http://maps101.gis.halff.com/ladon/rest/services/Lubbock/LubbockCCTVAssets/MapServer/");
              identifyParams = new esri.tasks.IdentifyParameters();
              identifyParams.tolerance = 3;
              identifyParams.returnGeometry = true;
              
              identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_VISIBLE;
              identifyParams.width = map.width;
              identifyParams.height = map.height;

          }

          function executeIdentifyTask(evt) {
              identifyParams.geometry = evt.mapPoint;
              identifyParams.mapExtent = map.extent;
             






              var deferred = identifyTask.execute(identifyParams);

              deferred.addCallback(function (response) {
                  // response is an array of identify result objects    
                  // Let's return an array of features.
                  return dojo.map(response, function (result) {
                      var feature = result.feature;
                      feature.attributes.layerName = result.layerName;

                      if (result.layerName === 'Survey Points') {
                          console.log(feature.attributes.OBJECTID);
                          var template = new esri.InfoTemplate("Survey Points", "<br/> Unique ID: ${UNIQUE_ID}<br/> X Coord: ${X_COORD}<br/> Y Coord: ${Y_COORD}<br/> Z Coord: ${Z_COORD}<br/> Type:${Type}<br/> Status: ${Status}<br/> Data Source: ${DATA_SOURCE}<br/> Shape: ${SHAPE}<br/> Survey Date: ${SURVEY_DATE}<br/>Alternate Name: ${ALT_NAME}");


                          feature.setInfoTemplate(template);

                      }
                      else if (result.layerName === 'CCTV Observations') {
                          var template = new esri.InfoTemplate("CCTV Observations", "<br/> CCTV Route: ${CCTV_ROUTE}<br/> CCTV Distance: ${CCTV_DISTANCE}<br/> CCTV Code: ${CCTV_CODE}<br/> CCTV Value Percent: ${CCTV_VALUE_PERCENT}<br/> CCTV Clock From: ${CCTV_CLOCK_FROM}<br/> CCTV Clock To: ${CCTV_CLOCK_TO}<br/> CCTV Grade: ${CCTV_GRADE} <br/>CCTV Continuous: ${CCTV_CONTINUOUS}<br/> CCTV Observation Type:${CCTV_OBS_TYPE}<br/> CCTV Observation:${CCTV_OBSERVATION}<br/> CCTV Remark:${CCTV_REMARK} <br/>Shape:${SHAPE}<br/> CCTV Attachment:${CCTV_Attach}");
                          feature.setInfoTemplate(template);
                      }

                      else if (result.layerName === 'Manholes') {
                          var template = new esri.InfoTemplate("Manholes", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Inlets') {
                          var template = new esri.InfoTemplate("Inlets", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Infalls') {
                          var template = new esri.InfoTemplate("Infalls", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Outfalls') {
                          var template = new esri.InfoTemplate("Outfalls", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Channel Features') {
                          var template = new esri.InfoTemplate("Channel Features", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Pipe Features') {
                          var template = new esri.InfoTemplate("Pipe Features", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Playa Centroids') {
                          var template = new esri.InfoTemplate("Playa Centroids", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Pipes') {
                          var template = new esri.InfoTemplate("Pipes", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Flumes') {
                          var template = new esri.InfoTemplate("Flumes", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Dams') {
                          var template = new esri.InfoTemplate("Dams", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Channels') {
                          var template = new esri.InfoTemplate("Channels", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'CCTV Routes') {
                          var template = new esri.InfoTemplate("CCTV Routes", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Virtual Links') {
                          var template = new esri.InfoTemplate("Virtual Links", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Stormwater Systems') {
                          var template = new esri.InfoTemplate("Stormwater Systems", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Asset Footprints') {
                          var template = new esri.InfoTemplate("Asset Footprints", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Playa Lakes') {
                          var template = new esri.InfoTemplate("Playa Lakes", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      map.infoWindow.setFeatures([deferred]);
                      map.infoWindow.show(evt.mapPoint);
                      return feature;
                  });
              });
          }

Re: Popup Window

KenBuja — Tue, 30 Jul 2013 18:08:41 GMT

Have you tried a case that doesn't use a secured service?

Re: Popup Window

NicholasKnabe — Tue, 30 Jul 2013 18:11:17 GMT

No I haven't. The web application I'm working on is directly for a city. If i changed the identifyparams and layerIds to just one layer then it ID's that one layer but when I add all the different layers and then change it to visible it still just ID's every layer. Just really confused and I know I'm not a programmer but trying to understand why it is not working. I tried to re do your example from about a month ago when we talked about this as well and I just cannot replicate what you were doing in your fiddle in my code.

Sorry

Re: Popup Window

KenBuja — Sun, 12 Dec 2021 07:10:59 GMT

What I was suggesting is to try this with a test service that isn't secured. If that works correctly, then there may be a bug when working with secured services.

For example, this code works as expected. Try substituting your service in to see what happens.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>TOC</title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">

    <style>
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0px;
            font-family: helvetica, arial, sans-serif;
            font-size: 90%;
        }


        #leftPane
        {
            width: 280px;
            overflow: auto;
        }
        /* this line hide layers when out of scale for the inline TOC */
        #scaleDiv .agsTOCOutOfScale
        {
            display: none;
        }
    </style>
    <script type="text/javascript">
        var djConfig = {
            parseOnLoad: true,
            packages: [{
                "name": "agsjs",
                "location": location.pathname.replace(/\/[^/]+$/, "") + '/agsjs'
                //"location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.05/xbuild/agsjs' // for xdomain load
            }]
        };
    </script>

    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>

    <script type="text/javascript">
        var map;
        var identifyTask, identifyParams;
        var urlSEFCRI = "http://egisws02.nos.noaa.gov/ArcGIS/rest/services/biogeo/SEFCRI/MapServer";

        var layerDynamic;
        var oldLayerName;
        var clickGraphicLayer;
        var visibleLayers;
        var initialExtent;

        require([
            "dojo/_base/connect",
            "dojo/_base/array",
            "dojo/parser",
            "dojo/ready",
            "dojo/Deferred",
            "dojo/dom",
            "dojo/domReady",

            "dijit/layout/ContentPane",
            "dijit/layout/TabContainer",
            "dijit/registry",
            "dijit/Dialog",

            "esri/map",
            "esri/InfoTemplate",

            "esri/dijit/Basemap",
            "esri/dijit/BasemapGallery",
            "esri/dijit/BasemapLayer",
            "esri/dijit/InfoWindow",

            "agsjs/dijit/TOC",

            "esri/arcgis/utils",

            "dijit/Menu",
            "dijit/form/DropDownButton",
            "dijit/layout/BorderContainer",

            "dojo/domReady!"

        ], function (
                connect, array, parser, ready, Deferred, dom, domReady,
                ContentPane, TabContainer, registry, Dialog,
                Map, InfoTemplate,
                Basemap, BasemapGallery, BasemapLayer, InfoWindow) {
            ready(function () {
                //parser.parse();
            });

            map = new Map("map", {
                basemap: "oceans",
                showAttribution: false,
                logo: false,
                center: [-80.2, 26.67],
                zoom: 11
            });
            map.resize();
            layerDynamic = new esri.layers.ArcGISDynamicMapServiceLayer(urlSEFCRI, {
                id: 'Dynamic'
            });
            map.addLayers([layerDynamic]);
            layerDynamic.setVisibleLayers([0]);

            map.on("layers-add-result", function (event) {

                console.log("layers-add-result");

                try {
                    var toc = new agsjs.dijit.TOC({
                        map: map,
                        layerInfos: [{
                            layer: layerDynamic,
                            title: "Legend",
                            slider: true
                        }]
                    }, 'tocDiv');
                    toc.startup();
                }
                catch (e) {
                    console.log(e.message);
                }

                mapReady(map);

            });

            layerDynamic.on("load", function () {
                var deferred = new Deferred();
                deferred = map.setExtent(layerDynamic.initialExtent, true);
                deferred.then(function () {
                    console.log("Extent set");
                    initialExtent = map.extent;
                });
            });

            var resizeTimer;

            map.on("load", function (theMap) {
                connect.connect(dijit.byId('map'), 'resize', function () { //resize the map if the div is resized
                    clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(function () {
                        map.resize();
                        map.reposition();
                    }, 500);
                });
            });


            function mapReady(map) {
                console.log("MapReady");
                map.on("click", executeIdentifyTask);
                identifyTask = new esri.tasks.IdentifyTask(urlSEFCRI);
                identifyParams = new esri.tasks.IdentifyParameters();
                identifyParams.tolerance = 3;
                identifyParams.returnGeometry = true;
                //identifyParams.layerIds = [0, 117];
                identifyParams.layerIds = layerDynamic.visibleLayers;
                identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
                identifyParams.width = map.width;
                identifyParams.height = map.height;

                map.infoWindow.resize(415, 200);
                map.infoWindow.setTitle("Results");
            }

            function executeIdentifyTask(evt) {
                map.graphics.clear();
                identifyParams.geometry = evt.mapPoint;
                identifyParams.mapExtent = map.extent;
                identifyParams.layerIds = layerDynamic.visibleLayers;

                oldLayerName = "";

                var deferred = identifyTask.execute(identifyParams);
                deferred.addCallback(function (response) {
                    return dojo.map(response, function (result) {
                        var feature = result.feature;
                        var infoTemplate = new esri.InfoTemplate("test", "${*}");
                        var contentString = "";
                        var sp = new Array();
                        var sp = feature.attributes;

                        contentString += "<b>" + result.layerName + "</b><hr width = '90%'>";

                        for (x in sp) {
                            if (x != "OBJECTID" && x != "Shape") {
                                contentString += "<i>" + x + "</i>: " + feature.attributes + "<br/>";
                            }
                        }
                        var infoTemplate = new esri.InfoTemplate();
                        infoTemplate.setTitle("Results");
                        infoTemplate.setContent(contentString);
                        var data = {
                            identifier: "OBJECTID",
                            label: "ID",
                            items: sp
                        };

                        feature.setInfoTemplate(infoTemplate);

                        return feature;
                    });
                });
                map.infoWindow.setFeatures([deferred]);
                map.infoWindow.show(evt.mapPoint);
            }


        });

    </script>

</head>
<body class="claro">
    <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
        <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left" splitter="true">
            <div id="tocDiv">
            </div>
        </div>
        <div id="map" dojotype="dijit.layout.ContentPane" region="center">
        </div>
    </div>
</body>
</html>