Custom symbol that renders differently based on attributes?

DavidElies

I want to render features using something similar to the ClassBreaksRenderer, but instead of discrete breaks, I want a smoothly sliding scale.  I accomplished this in the Flex API by creating a custom Symbol which had a different color based on an attribute value.  I'm brand new to the javascript API, (and not too experienced with Javascript in general -- I come from a Java background), and I'd like to know how to do something similar with Javascript.  Is this possible?  I've been told that Javascript is classless, so I'm not clear on what the objects (Layer,Symbol,etc) really are.  Any help would be greatly appreciated!

JacobBrozenick

I'm not sure I understand exactly what your asking for, but it sounds similar to something I have done in the past.

I run a query and get back a featureSet, in each feature that returns there is an attribute object in my case there was a particular variable in that attribute object called entityType.  Depending on the entityType I displayed a different symbol on the map.

for example if the feature had an entityType of "Person" I displayed a red teardrop, if the feature had an entityType of "Organization" I displayed a green teardrop, for "Vehicle" it was yellow, etc, etc...

I handled this by setting up what I called a symbolBank, which was a javascript object that worked pretty much like a java HashMap; the code looks like this...

symbolBank = {
    "Person": new esri.symbol.PictureMarkerSymbol('/images/red_teardrop.png', 25, 25),
    "Organization": new esri.symbol.PictureMarkerSymbol('/images/green_teardrop.png', 25, 25),
    "Vehicle": new esri.symbol.PictureMarkerSymbol('/images/yellow_teardrop.png', 25, 25)
}

Access the object by looping through the featureSet and keying off of the attribute you need to create the symbol.  In my case it looks like this...

dojo.forEach(featureSet, function(feature){
    var symbol = symbolBank[feature.attributes.entityType];
    var graphic = new esri.Graphic(feature.geometry, symbol);
    map.graphics.add(graphic);
});