AnsweredAssumed Answered

Creating a Popup Window

Question asked by jpriceFWB on Jan 2, 2018
Latest reply on Jan 2, 2018 by rscheitlin

I'm having trouble getting a popup window to show any information. When I click on the map it pops up, but has no information. I've tried everything and researched for days now on the topic. Any help would be appreciated. 

 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Future Land Use Map</title>
   <link rel="stylesheet" type="text/css" href="https://gis.fwb.org/arcgis_js_api/library/3.23/3.23/dijit/themes/claro/claro.css"/>
   <link rel="stylesheet" type="text/css" href="https://gis.fwb.org/arcgis_js_api/library/3.23/3.23/esri/css/esri.css"/>

   <style>
      html,
      body,
      #map {
         height: 100%;
         width: 100%;
         margin: 0;
         padding: 0;
      }
      #search {
         display: block;
         position: absolute;
         z-index: 2;
         top: 20px;
         left: 74px;
      }
      #mapPane {
    /*margin-left: 300px;*/
         padding: 0;
         border-left: solid 2px #224a54;
         background-color: #FFFFFF;
         height: 100%; width: 100%;
      }
      #rightPane {
      width: 20%;
    }

    #legendPane {
      border: solid #97DCF2 1px;
    }
    #opacitySliderDiv {
         display: block;
         position: absolute;
         z-index: 2;
         bottom: 20px;
         left: 74px;
    }
   </style>
   <script type="text/javascript">
               var dojoConfig = {
                    async : false,
                    mblHideAddressBar : false,
                    packages : [{
                         name : "js",
                         location : location.pathname.replace(/\/[^/]+$/, '') + '/js'
                    }]
               };
     </script>
    <script src="https://gis.fwb.org/arcgis_js_api/library/3.23/3.23/"></script>
     <script type="text/javascript" src="js/lods_extent.js"></script>
     <script type="text/javascript" src="js/IdentifyAll.js"></script>
     <script>
          var map;
          var initExtent;
          var lods = [];
          var spatialReference;
      require([
          "esri/urlUtils",
        "esri/SpatialReference",
        "esri/map",
        "esri/dijit/Search",
        "esri/basemaps",
        "esri/dijit/BasemapLayer",
        "esri/dijit/Basemap",
        "esri/dijit/BasemapGallery",
        "esri/arcgis/utils",
        "esri/SpatialReference",
        "esri/geometry/Extent",
        "esri/tasks/GeometryService",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/config",
        "esri/dijit/Legend",
        "esri/InfoWindowBase",
        "esri/InfoTemplate",
        "esri/dijit/Popup",
        "esri/dijit/PopupTemplate",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/tasks/IdentifyTask",
        "esri/tasks/IdentifyParameters",
        "esri/Color",
        "dojo/string",
        "esri/domUtils",
        "dojo/dom",
        "dojo/dom-style",
        "dojo/dom-construct",
        "dojo/on",
        "dojo/parser",
        "dijit/layout/AccordionContainer",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dijit/TitlePane",
        "dojo/_base/array",
        "dojo/domReady!",

      ], function (urlUtils, SpatialReference, Map, Search, esriBasemaps, BasemapLayer, Basemap, BasemapGallery, arcgisUtils, SpatialReference, Extent, GeometryService, ArcGISDynamicMapServiceLayer, esriConfig, Legend, InfoWindowBase, InfoTemplate, Popup, PopupTemplate, SimpleFillSymbol, SimpleLineSymbol, IdentifyTask, IdentifyParameters, Color, string, domUtils, dom, domStyle, domConstruct, on, parser, array) {
            
            parser.parse();
            
          //Geometry Service
          esriConfig.defaults.geometryService = new GeometryService("https://gis.fwb.org/arcgis/rest/services/Utilities/Geometry/GeometryServer");
          //esri.config.defaults.io.corsEnabledServers.push("https://gis.fwb.org");
          esriConfig.defaults.io.proxyUrl = "https://gis.fwb.org/proxy/proxy.ashx";
          esriConfig.defaults.io.alwaysUseProxy = false;
          esriConfig.defaults.io.corsDetection = false;
          
          urlUtils.addProxyRule({
              urlPrefix: "route.arcgis.com",
              proxyUrl: "https://gis.fwb.org/proxy/proxy.ashx"
          });
          urlUtils.addProxyRule({
              urlPrefix: "traffic.arcgis.com",
              proxyUrl: "https://gis.fwb.org/proxy/proxy.ashx"
          });
          urlUtils.addProxyRule({
              urlPrefix: "logistics.arcgis.com",
              proxyUrl: "https://gis.fwb.org/proxy/proxy.ashx"
          });
          spatialReference = new SpatialReference({
               wkid : 102100
          });
          setLods();
          setExts();
            
            var legendLayers = [];
            var basemaps = [];
            var identifyTask;
            var identifyParams;
            
            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"));
            
            var map = new Map("map", {
             extent: initExtent,
               lods: lods,
               map: aerielLayer,
               infoWindow: popup
            });

          map.on("load", mapReady);

            var aerielLayer = new BasemapLayer({
              url: "https://gis.fwb.org/arcgis/rest/services/Maps/AerialFeb2016WebM/MapServer"
         });
            
          var aerielBasemap = new Basemap({
              layers: [aerielLayer],
              id: "2016 Aeriel",
              title:"2016 Aeriel",
              thumbnailUrl:"Images/basemap_streets.jpg"
             });
            
            basemaps.push(aerielBasemap);
            
            var basemapGallery = new BasemapGallery({
                 showArcGISBasemaps: false,
                 basemaps: basemaps,
              map: map
            }, "basemapGalleryDiv");
            
            
        var search = new Search({
            map: map
         }, "search");
        
        search.startup();
       
        var fluURL = "https://gis.fwb.org/arcgis/rest/services/Maps/FLU/MapServer";
               
        var selectionHandler = dojo.connect(basemapGallery,"onSelectionChange",function(){
          dojo.disconnect(selectionHandler);
       
             var addressLayer = new ArcGISDynamicMapServiceLayer("https://gis.fwb.org/arcgis/rest/services/Maps/Addresses/MapServer", {
                    visible : true,
                    id : "addresses"
               });
                    
               var parcelsAR = new ArcGISDynamicMapServiceLayer("https://gis.fwb.org/arcgis/rest/services/Maps/ParcelsAerial/MapServer", {
                    visible : true,
                    id : "parcelsAR"
               });
                    
               var roadNames = new ArcGISDynamicMapServiceLayer("https://gis.fwb.org/arcgis/rest/services/Maps/RoadNames/MapServer", {
                    visible : true,
                    id : "roadNames"
               });
                    
               var cityLimits = new ArcGISDynamicMapServiceLayer("https://gis.fwb.org/arcgis/rest/services/Maps/CityLimits/MapServer", {
                    visible : true,
                    id : "cityLimits"
               });
                    
               var flu = new ArcGISDynamicMapServiceLayer(fluURL, {
                    visible : true,
                    outFields: ["Zoning"],
                    id : "flu",
                    opacity: 0.5
               });     
          
          
        map.on("layers-add-result", function () {
        var legend = new Legend({
            map: map,
            layerInfos: legendLayers
          }, "legendDiv");
          legend.startup();
      });
          legendLayers.push({layer: flu, title: "Future Land Use"});          
            map.addLayers([parcelsAR, flu, cityLimits, roadNames, addressLayer]);
           });
          basemapGallery.startup();
          
          function mapReady () {
          map.on("click", executeIdentifyTask);
          //create identify tasks and setup parameters
          identifyTask = new IdentifyTask("flu");

          identifyParams = new IdentifyParameters();
          identifyParams.tolerance = 3;
          identifyParams.returnGeometry = true;
          identifyParams.layerIds = [0];
          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) {
              // response is an array of identify result objects
              // Let's return an array of features.
              return arrayUtils.map(response, function (result) {
                var feature = result.feature;
                   var layerName = result.layerName;

                feature.attributes.layerName = layerName;
                    if (layerName === 'FUTURE LAND USE') {
                  var zoningTemplate = new InfoTemplate("Zoning: ${Zoning}");
                  feature.setInfoTemplate(zoningTemplate);
                }
                else if (layerName === 'FUTURE LAND USE') {
                  console.log(feature.attributes.Addresses);
                  var addressTemplate = new InfoTemplate("",
                    "Address: ${Addresses}");
                  feature.setInfoTemplate(addressTemplate);
                }
                return feature;
              });
            });

          // InfoWindow expects an array of features from each deferred
          // object that you pass. If the response from the task execution
          // above is not an array of features, then you need to add a callback
          // like the one above to post-process the response and return an
          // array of features.
          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.show(event.mapPoint);
        }
          
});
   </script>
</head>

<body class="claro">
     <div id="search"></div>
     <div data-dojo-type="dijit/layout/BorderContainer"
             data-dojo-props="design:'headline', gutters:false"
             style="width:100%;height:100%;margin:0;">

      <div id="map"
          data-dojo-type="dijit/layout/ContentPane"
        data-dojo-props="region:'center'"
        style="padding:0;">
      </div>
      <div id="rightPane"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'right'">

    <div data-dojo-type="dijit/layout/AccordionContainer">
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
           data-dojo-props="title:'Legend', selected:true">
        <div id="legendDiv"></div>
      </div>
    </div>
    <div id="mapDiv"></div>
    </div>
</body>

</html>

Outcomes