[GIS] Picture Symbol Proportion in ESRI Javascript API

arcgis-javascript-apicartographysymbology

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]);

Best Answer

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
    }
});
Related Question