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;

      function (
        esriConfig, InfoTemplate, Map, Popup, PopupTemplate, Extent, ArcGISDynamicMapServiceLayer, FeatureLayer, 
        ArcGISTiledMapServiceLayer, SimpleFillSymbol, SimpleLineSymbol,
        GeometryService, Query, domConstruct, domClass, parser, Color, lang, locale, Geocoder, LocateButton 
      ) {


        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" +

      _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);
        1: { infoTemplate: _blockGroupInfoTemplate },
        2: { infoTemplate: _countyCensusInfoTemplate }
      demographicsLayer.setVisibleLayers([1, 2]);


      var geoLocate = new LocateButton({
      map: map,
      highlightLocation: false
      }, "LocateButton"

    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,

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

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


        function getTextContent (graphic) {
          var attributes = graphic.attributes;
          var namepark =
            .replace('"', "")
            .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>" + 

        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,


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


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

  • Cross-posted from stackoverflow.com/questions/34120616/…
    – PolyGeo
    Dec 8 '15 at 0:06
  • 1
    Welcome to GIS SE! As a new user be sure to take the Tour. For some ideas on how to structure a question to attract potential answerers I recommend reviewing meta.gis.stackexchange.com/a/3353/115
    – PolyGeo
    Dec 8 '15 at 0:10
  • 2. Using htmlPrettify you will see that your code isn't able to format properly, that's how I found the extra closures in there. 3. Yes name the popups differently, but you cannot change the class name! ie "var popup1 = new Popup()" - where Popup() is the class name. You can differentiate the variable name (you must in fact) ie "var parkPopup" vs "var blockPopup" but you must leave " = new Popup()" as is - that is the class.
    – Tom
    Dec 8 '15 at 15:52
  • Ok the map is rendering but the demographics info only comes up on the first click. I assume this relates to your comment "Make the div first with dojo attach point?" but I'm not sure what you mean.
    – Staley
    Dec 8 '15 at 17:44
  • This is my latest point of hangup...students.washington.edu/sbuffor/combined_census_parks.html I can't get the demographics info to show after the first click, if you click the parks first demographics doesn't come up at all.
    – Staley
    Dec 8 '15 at 19:09

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,

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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.