[GIS] Change the symbology of a dynamic map service in client

arcgis-javascript-apiarcgis-server

I am trying to use someone else's map service in my web map, but their symbology is atrocious so I need to render new colors through JavaScript API.

I try the following (amongst many other efforts spanning 2 days):

       parcels = new ArcGISDynamicMapServiceLayer(config.mapServices.parcels, {id:"Parcels"});
       parcels.on("load", function(){

           var layerDrawingOptions = [];
           var layerDrawingOption = new LayerDrawingOptions();

            // set symbology overrides
            layerDrawingOption.renderer = new SimpleRenderer(symbols.polygon);

            // the following index represents the layers in the service to apply the renderer to
            layerDrawingOptions[8] = layerDrawingOption;

            parcels.setLayerDrawingOptions(layerDrawingOptions);
            parcels.setImageFormat("png32");
            parcels.setVisibleLayers([8]); //schools,streets,parks,parcels,boundaries,shields

       })   ;       

        map.addLayer(parcels);

I am following this currently:
https://developers.arcgis.com/javascript/jsapi/layerdrawingoptions-amd.html#renderer

The few examples at the API deal with renderers for class-breaks, etc, I need to resymbolize all parcels, which should be a similar concept. Any ideas on how I can symbolize a dynamic layer at the client rather than the server using JS API?

Best Answer

the two most common gotchas for Dynamic Layers are:

  1. the service itself doesn't support requests to alter symbology. (make sure Supports Dynamic Layers is true in the service metadata)

  2. the index position in the layer drawing options array doesn't match the index position of the layer.

    var sfs = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
  new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
  new esri.Color([0,255,0]), 2),new esri.Color([0,0,255,1])
);

app.renderer = new esri.renderer.SimpleRenderer(sfs);
var optionsArray = [];
var drawingOptions = new esri.layers.LayerDrawingOptions();
drawingOptions.renderer = app.renderer;
//since we're attempting to alter the drawing rule for layer 3, we insert into the same position
optionsArray[3] = drawingOptions;
app.usaLayer.setLayerDrawingOptions(optionsArray);

i published a working sample here

Related Question