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


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

map.addLayers([Commercial, Residentail, LandscapeArea, RoadCenterline, LandscapePoint]);
  • You can change the size of the symbol using the setSize method. You can use this method in a zoom-end event. To get the zoom level, use getZoom method. However, if the image is not high quality, you may be forced to use multiple images to keep the clarity of the symbol when the image is quite large. If you use SVG format, this must be embedded in the application. I'm not sure how this complicates how your editor widget works, but without seeing code, it's hard to determine what may break.
    – evv_gis
    Mar 24, 2014 at 15:22
  • I don't see a setSize, method - I do see a getSize, but that is for Proportional symbols - is that what you are referring to?
    – BretW
    Mar 24, 2014 at 15:25
  • I edited my question to show by code construiction for this - I assume its not as easy as "Tree1.setSize("100");" to make the picture marker always 100px?
    – BretW
    Mar 24, 2014 at 15:44

2 Answers 2


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

    if (z > 15){
        Tree2.setSize(100); //CHANGES Tree2 SYMBOL TO 100px
    } else {
        Tree2.setSize(150); //CHANGES Tree2 SYMBOL TO 150px
  • Got it, thanks hugely! - this worked great. Because its a picture symbol, I ended up using .setWidth and .setHeight
    – BretW
    Mar 24, 2014 at 19:37

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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