Custom symbol that renders differently based on attributes?

679
3
12-14-2010 11:50 AM
DavidElies
New Contributor III
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!
0 Kudos
3 Replies
timgogl
New Contributor II
you can use the setColor() method to change the color of your symbol based on what ever you are basing a change on....

http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jsapi_start.htm#jsapi/editor.htm
0 Kudos
DavidElies
New Contributor III
Thanks for your response lowgas!

The link you posted points to the editor widget.  Since I'm not editing anything, I don't think this is what I'm looking for.  Should I not be using a feature layer if I'm not doing selection/editing?  If you have any more ideas about how to change the look of individual graphics in a feature layer based on their attributes, please let me know.  Otherwise, I will probably have to use the ClassBreaksRenderer and choose some arbitrary breaks.

The other question I had was if it were possible to create a custom symbol.  Does anybody have any ideas or suggestions?
0 Kudos
JacobBrozenick
New Contributor II
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);
});
0 Kudos