2

I am working on a code which focuses on a city where it displays age concentrations with a BlendRenderer. In addition, it also displays the total population in each block using size. The BlendRenderer uses green to indicate the under 19 age group, red is 20-29, whereas blue represents 30 years and above. The more opaque the color, the higher the concentration for that age group. Also, more densely populated blocks will display with a larger symbol.

But after spending, so much time, my code is not returning any symbology on the map. Can any body help me , where I went wrong?

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="https://js.arcgis.com/3.38/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.38/esri/css/esri.css">
  <style>
    html, body, #map {
      height: 100%;
      margin: 0;
    }

    #meta {
      position: absolute;
      left: 20px;
      bottom: 20px;
      width: 20em;
      height: 19em;
      z-index: 40;
      background: #ffffff;
      color: #777777;
      padding: 5px;
      border: 2px solid #666666;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      font-family: arial;
      font-size: 0.9em;
    }

    #meta h3 {
      color: #666666;
      font-size: 1.1em;
      padding: 0px;
      margin: 0px;
      display: inline-block;
    }
  </style>
  <script src="https://js.arcgis.com/3.38/"></script>
  <script>
    require([
      "dojo/_base/array", "esri/Color", "esri/dijit/PopupTemplate", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/FeatureLayer",
      "esri/map", "esri/renderers/BlendRenderer", "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol", "dojo/domReady!"
    ], function (array, Color, PopupTemplate, ArcGISTiledMapServiceLayer, FeatureLayer, Map, BlendRenderer, SimpleFillSymbol, SimpleLineSymbol,
      SimpleMarkerSymbol){

      map = new Map("map", {
        basemap: "gray-vector", //"topo"
        center: [-95.28, 38.959],
        zoom: 12
      });

      var layerUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Lawrence_KS_Demographic_Info/FeatureServer/0";

      //Set the blendRenderer's parameters
      var blendRendererOptions = {
       
        symbol: new SimpleMarkerSymbol().setOutline(new SimpleLineSymbol().setWidth(0)),
        fields: [
          {
            field: "TotalPop2015_above30", //.65 to .26
            color: new Color("#0000e6") //blue
          }, {
            field: "POP2015_20to30", //.44 to .1
            color: new Color("#e60000") //red
          }, {
            field: "PopUnder18_2015", //.3 to .11
            color: new Color("#00e600") //green
          }
        ],

        normalizationField: "TOTPOP_CY"
      };
      renderer = new BlendRenderer(blendRendererOptions);

      //set background fill symbol to show census block outlines
      renderer.backgroundFillSymbol = new SimpleFillSymbol().setColor(null).setOutline(new SimpleLineSymbol().setWidth(1).setColor(new Color([
        200, 200, 200
      ])));
      renderer.setVisualVariables([
        {
          type: "sizeInfo",
          field: "TOTPOP_CY",
          minSize: 5,
          maxSize: 50,
          minDataValue: 50,
          maxDataValue: 1000
        }
      ]);

     
      var template = new PopupTemplate({
        "fieldInfos": [
          {
            "fieldName": "POP2015_20to30",
            "label": "Population age 20 to 29",
            "visible": true,
            "format": {
              "places": 0,
              "digitSeparator": true
            }
          }, {
            "fieldName": "TotalPop2015_above30",
            "label": "Population age 30 and above",
            "visible": true,
            "format": {
              "places": 0,
              "digitSeparator": true
            }
          }, {
            "fieldName": "PopUnder18_2015",
            "label": "Population age 19 and under",
            "visible": true,
            "format": {
              "places": 0,
              "digitSeparator": true
            }
          }, {
            "fieldName": "TOTPOP_CY",
            "label": "Total Population",
            "visible": true,
            "format": {
              "places": 0,
              "digitSeparator": true
            }
          }
        ]
      });

      layer = new FeatureLayer(layerUrl, {
        outFields: ["TOTPOP_CY", "PopUnder18_2015", "TotalPop2015_above30", "POP2015_20to30"],
        opacity: 1,
        infoTemplate: template
      });

      layer.setRenderer(renderer);
      map.addLayer(layer);

    });
     </script>
  </head>
  <body class="claro">
    <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'">
         <div id="meta">

            <br> it also displays the total population in each block using size.
            <ul>
               <li>Red: 20-29</li>
               <li>Blue: 30 and above</li>
               <li>Green: Under 19</li>
            </ul>
            The more opaque the color, the higher the concentration for that age group. In addition, the larger the symbol, the higher the population density for that block.
         </div>
      </div>
    </div>
  </body>
</html>

1 Answers1

0

You are missing the opacityStops in your renderer. This is needed in order to set the opacity bounds of the colors that you are trying to blend. With an example it might be easier to explain, let say that you want to vary between your pure colors if 100% to no color if 0%, then you will set like this,

opacityStops: [
    {
        value: 0,
        opacity: 0
    },
    {
        value: 1,
        opacity: 1
    }
]
cabesuon
  • 4,860
  • 2
  • 15
  • 24