Community
Select to view content in your preferred language

Creating a Popup Window

1725
10
Jump to solution
01-02-2018 11:18 AM
deleted-user-2LRxCQRqNecK
by
Deactivated User
‎01-02-2018 11:18 AM

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
10 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎01-02-2018 01:39 PM

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

0 Kudos