topic Re: Custom symbol that renders differently based on attributes? in ArcGIS JavaScript Maps SDK Questions

Custom symbol that renders differently based on attributes?

DavidElies — Tue, 14 Dec 2010 19:50:54 GMT

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!

Re: Custom symbol that renders differently based on attributes?

timgogl — Tue, 14 Dec 2010 22:19:08 GMT

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

Re: Custom symbol that renders differently based on attributes?

DavidElies — Thu, 16 Dec 2010 19:44:10 GMT

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?

Re: Custom symbol that renders differently based on attributes?

JacobBrozenick — Sat, 11 Dec 2021 16:52:21 GMT

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