Picture Symbol Proportion in ESRI Javascript API

Question

I am successfully using a picture marker symbol to represent tree's in a web-map built using the ESRI Javascript API. Is there a method to proportionally size the picture symbol for each scale of the map? The only way i can figure out how to do it, would be to add a different symbol for each zoom level - but that seems like an unnecessary amount of code that might hinder page performance.

To complicate this - the rendered feature layer is passed to the Editor Widget using the map.addlayers array function.

I am creating this render by first adding the picture markers:

var Tree1 = new PictureMarkerSymbol('Tree1.png', 11, 11);
        var Tree2 = new PictureMarkerSymbol('Tree2.png', 11, 11);
        var Tree3 = new PictureMarkerSymbol('Tree3.png', 11, 11);
        var Bush1 = new PictureMarkerSymbol('Bush1.png', 11, 11);
        var Bush2 = new PictureMarkerSymbol('Bush2.png', 11, 11);

I then create the renderer, which works on the feature layer LandscapePoint off the attribute Type:

var renderer = new UniqueValueRenderer(LandscapePoint, "TYPE");

Then add a symbol for each value:

renderer.addValue("Tree1", Tree1);
        renderer.addValue("Tree2", Tree2);
        renderer.addValue("Tree3", Tree3);
        renderer.addValue("Tree4", Tree1);
        renderer.addValue("Shrub1", Bush1);
        renderer.addValue("Shrub2", Bush2);
        renderer.addValue("Shrub3", Bush1);
        renderer.addValue("Shrub4", Bush1);
        renderer.addValue("Bench", redDot);

Then set the renderer to Landscape point

LandscapePoint.setRenderer(renderer);

Finally the features are added to the map and passed to the editor Widget with:

map.addLayers([Commercial, Residentail, LandscapeArea, RoadCenterline, LandscapePoint]);

Answer 1

So as I stated in my first comment, you need to add a listener for the zoom-end event. Inside of that listener, get the current map zoom level and use logic to change the picture marker symbol sizes. Here is a quick and dirty example:

map.on('zoom-end', function() { 
    var z = map.getZoom(); // GET THE CURRENT MAP ZOOM LEVEL

    //ADD LOGIC TO CHANGE SYMBOL SIZE BASED ON ZOOM LEVEL; CHANGE ACCORDINGLY
    if (z > 15){
        //USE THE setSize METHOD TO CHANGE SYMBOL SIZE
        Tree2.setSize(100); //CHANGES Tree2 SYMBOL TO 100px
    } else {
        Tree2.setSize(150); //CHANGES Tree2 SYMBOL TO 150px
    }
});

Answer 2

Another way is to use a classbreaksrenderer: Add a break for each symbol and use the setVisualVariables with type sizeinfo, expression view.scale, and stops on minSize and maxSize fields, which will scale the image based on where the current view scale falls within the stops.

The most complicated part is understanding what minSize and maxSize mean for an image. I just set minSize stops to very small values like 1, 2, 4, 6, 8, 10, 16 etc. and maxSize to what I want, like 4, 10, 20, 30, 40, 60, 150, 300 etc. I think it subtracts min from max and then ratios in-between the stops. I never quite figured it out, but playing with the numbers a bit when looking at the output and adjusting accordingly, I manage to dial it in fairly quickly to something that looks nice to me.