Using Dynamic Layers with the new ArcGIS Online demographic service

ArcGIS Online has retired it's existing cached demographic services in favor of a new service which requires an AGOL subscription and will consume credits. The new service is not cached into separate demographic variables (e.g. Med Household Income) but it does contain all the information needed to recreate/render the same maps through the use of LayerDrawingOptions and dynamic layers. I had a need to consume this new service and thought I'd share a sample that might help someone else.

At version 10.1 of ArcGIS for Server, dynamic layers allow clients such as the JSAPI to change the rendering of the map service on the fly. If you are swapping out an old cached service for this new one there are a couple of additional steps to utilize these new features. The key pieces below are setting the DynamicLayerInfos on the layer and then setting the LayerDrawingOptions.

        var map,
            layer;
        require(["esri/urlUtils", "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/renderers/ClassBreaksRenderer", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/layers/LayerDrawingOptions", "esri/Color", "dojo/domReady!"],
        function (urlUtils, Map, ArcGISDynamicMapServiceLayer, ClassBreaksRenderer, SimpleLineSymbol, SimpleFillSymbol, LayerDrawingOptions, Color) {
            // add proxy rule
            urlUtils.addProxyRule({
                urlPrefix: 'demographics1.arcgis.com',
                proxyUrl: 'proxy.ashx'
            });

            // create map
            map = new Map("map", {
                basemap: "gray",
                center: [-77.0363700, 38.8951100], // longitude, latitude
                zoom: 10
            });

            // add demographic layer
            layer = new ArcGISDynamicMapServiceLayer("http://demographics1.arcgis.com/arcgis/rest/services/USA_Demographics_and_Boundaries/MapServer");
            layer.on("load", function (e) {
                // set up dynamic layers
                e.target.setDynamicLayerInfos(e.target.createDynamicLayerInfosFromLayerInfos());

                // set symbology overrides
                var renderer = new ClassBreaksRenderer(null, "MEDHINC_CY");
                var line = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([200, 200, 200, 1]), 1);
                renderer.addBreak({ minValue: 0, maxValue: 10000, symbol: new SimpleFillSymbol().setOutline(line).setColor(new Color([55, 75, 91, 1])), label: '$ 0 - 10,000 per year' });
                renderer.addBreak({ minValue: 10000, maxValue: 39000, symbol: new SimpleFillSymbol().setOutline(line).setColor(new Color([128, 141, 156, 1])), label: '$ 10,000 - 39,000 per year' });
                renderer.addBreak({ minValue: 39000, maxValue: 69000, symbol: new SimpleFillSymbol().setOutline(line).setColor(new Color([208, 213, 218, 1])), label: '$ 39,000 - 69,000 per year' });
                renderer.addBreak({ minValue: 69000, maxValue: 99000, symbol: new SimpleFillSymbol().setOutline(line).setColor(new Color([211, 221, 212, 1])), label: '$ 69,000 - 99,000 per year' });
                renderer.addBreak({ minValue: 99000, maxValue: 129000, symbol: new SimpleFillSymbol().setOutline(line).setColor(new Color([134, 160, 136, 1])), label: '$ 99,000 - 129,000 per year' });
                renderer.addBreak({ minValue: 129000, maxValue: 201000, symbol: new SimpleFillSymbol().setOutline(line).setColor(new Color([58, 96, 66, 1])), label: '$ 129,000 - 201,000 per year' });

                // add the symbology to the layer as drawing options
                optionsArray = [];
                var drawingOptions = new LayerDrawingOptions();
                drawingOptions.renderer = renderer;

                // the following indexes represent the layers in the service to apply the renderer to
                optionsArray[9] = optionsArray[10] = optionsArray[11] = optionsArray[12] = optionsArray[13] = optionsArray[14] = optionsArray[15] = optionsArray[16] = drawingOptions;
                layer.setLayerDrawingOptions(optionsArray);
            });
            map.addLayer(layer);
        });
Setting the renderer

Note that the renderer used can be any renderer including a dynamically generated renderer from the server. I chose to keep it simple for demonstration purposes.

Additionally, since the service now requires an ArcGIS subscription you'll have to use the proxy to assist in generating the correct token. The following snippet demonstrates the proxy configuration for this sample:

<serverUrl url="http://demographics1.arcgis.com/arcgis/rest"
               matchAll="true"
               clientId="yourClientId"
               clientSecret="yourClientSecrest"/>

Demo  View on GitHub

comments powered by Disqus