Vjylku

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)(?=(ddd)+(?!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

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.