[GIS] Esri API JS, popup not displaying after first click

arcgis-javascript-apidojo

Demographics data shows upon first click but not after, park information does work. I've changed around almost everything with non real solution. I feel like for whatever reason my feature server data is preferred over the dynamiclayer in the map. Is there a way to make the js bounce based on where you click?

    var map;

    require([
      "esri/config",
      "esri/InfoTemplate",
      "esri/map",
      "esri/dijit/Popup",
      "esri/dijit/PopupTemplate",
      "esri/geometry/Extent",
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/layers/FeatureLayer",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/tasks/GeometryService",
      "esri/tasks/query",
      "dojo/dom-construct",
      "dojo/dom-class",
      "dojo/parser",
      "esri/Color",
      "dojo/_base/lang",
      "dojo/date/locale",
      "esri/dijit/Geocoder",
      "esri/dijit/LocateButton",      
      "dojo/domReady!"
    ],
      function (
        esriConfig, InfoTemplate, Map, Popup, PopupTemplate, Extent, ArcGISDynamicMapServiceLayer, FeatureLayer, 
        ArcGISTiledMapServiceLayer, SimpleFillSymbol, SimpleLineSymbol,
        GeometryService, Query, domConstruct, domClass, parser, Color, lang, locale, Geocoder, LocateButton 
      ) {

        parser.parse();


        var popup = new Popup({
          fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([0, 0, 0]), 2), new Color([128, 128, 128, 0.25]))
        }, domConstruct.create("div"));

        domClass.add(popup.domNode, "myTheme");

        map = new Map("map", { 
          basemap: "topo",
          center: [-122.402, 47],
          zoom: 9,
          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_18_21:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 18 - 21<br>" +
        "<div class='demographicNumericPadding'>${AGE_22_29:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 22 - 29<br>" +
        "<div class='demographicNumericPadding'>${AGE_30_39:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 30 - 39<br>" +
        "<div class='demographicNumericPadding'>${AGE_40_49:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 40 - 49<br>" +
        "<div class='demographicNumericPadding'>${AGE_50_64:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 50 - 64<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 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 },
        2: { infoTemplate: _countyCensusInfoTemplate }
      });
      demographicsLayer.setVisibleLayers([1, 2]);
      map.addLayer(demographicsLayer);

      geocoder.startup();

      var geoLocate = new LocateButton({
      map: map,
      highlightLocation: false
      }, "LocateButton"
      );
      geoLocate.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";
      }
    };

        map.on("click", function (event) {
          var query = new Query();
          query.geometry = pointToExtent(map, event.mapPoint, 10);
          var deferred = featureLayer.selectFeatures(query,
            FeatureLayer.SELECTION_NEW);
          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.show(event.mapPoint);
        }); 

      var template = new InfoTemplate();
        template.setTitle("Park Information");
        template.setContent(getTextContent);

        var featureLayer = new FeatureLayer("https://services3.arcgis.com/J1Locv0GPOt6yBRR/ArcGIS/rest/services/Parks_polygons_Feb2012/FeatureServer/0",
          {            
            outFields: ["*"],
            infoTemplate: template
          });

        map.addLayer(featureLayer);

        function getTextContent (graphic) {
          var attributes = graphic.attributes;
          var namepark =
            attributes.ParkName
            .replace('"', "")
            .split("::")
            .map(function (name) {
              return lang.trim(name);
            });

          var parkdata = namepark[0];
          var commonName = namepark[1];
          var parks;

          if (commonName) {
            parks = "<b>" + commonName + "</b><br/>" +
                          "<i>" + parkdata + "</i>";
          }
          else {
            parks = "<i>" + parkdata + "</i>";
          }

          return  parks + "<br>" +
                  attributes.Owner + "<br>" + 
                  attributes.ParkWebLin 
        }        

        function pointToExtent (map, point, toleranceInPixel) {
          var pixelWidth = map.extent.getWidth() / map.width;
          var toleranceInMapCoords = toleranceInPixel * pixelWidth;
          return new Extent(point.x - toleranceInMapCoords,
                            point.y - toleranceInMapCoords,
                            point.x + toleranceInMapCoords,
                            point.y + toleranceInMapCoords,
                            map.spatialReference);
        }    

      });
  </script>
</head>

<body class="claro">
  <div id="map">
  <div id="LocateButton"></div>
</div>
<div id="ui-esri-dijit-geocoder"></div>

</body>

link to is http://students.washington.edu/sbuffor/combined_census_parks.html

Best Answer

I started removing pieces and found a piece that I didn't completely understand what it was doing and pulled it out. 

map.on("click", function (event) {
          var query = new Query();
          query.geometry = pointToExtent(map, event.mapPoint, 10);
          var deferred = featureLayer.selectFeatures(query,
            FeatureLayer.SELECTION_NEW);
          map.infoWindow.setFeatures([deferred]);
          map.infoWindow.show(event.mapPoint);
        });

Upon doing this the map now is completely operational!

Also I took the advice to add the URL to the park info, got that added in as well, although I did remove the "getTextContent" piece out of it to get it to render properly but it works quite well. I also added another piece to open the link in a new tab.

Related Question