How To Add CSS Class to SimpleMarkerSymbol in GraphicsLayer

[BruceGreen]

Can you please let me know if there is a way to bind a CSS class `.marker` to an ArcGIS `SimpleMarkerSymbol` in a graphic layer?

I have a `SimpleMarkerSymbol` called `schoolMarker` which I am styling it using ESRI's options but I need to add more CSS styles like `.marker`

var schoolMarker = new SimpleMarkerSymbol();
 schoolMarker.setStyle(SimpleMarkerSymbol.STYLE_CIRCLE);
 schoolMarker.setSize(30);
 schoolMarker.setOutline(null);
 schoolMarker.setColor(new Color([255,116,0,0.25]));‍‍‍‍‍

Here is the CSS class:

.marker{
 stroke-linecap: round;
 stroke-linejoin: round;
 stroke-opacity: 1.0;
 fill-opacity: 1.0;
 background-color: rgb(0, 89, 190);
 stroke: rgb(0, 89, 190);
 fill: rgb(0, 89, 190);
 fill-opacity: 1;
 stroke-width: 70pt;
 stroke-opacity: 1;
 opacity: 0.12;
 }‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Behrouz,

   No a SimpleMarkerStmbol is not a simple dom element that you can apply css to.

[BruceGreen]

Thanks Robert,

but is there any other solution for this? I mean in case of not using SimpleMarkerStmbol? can we assign the CSS directly to the point?

[RobertScheitlin__GISP]

No a point can be SVG or an HTML5 canvas graphic

[BruceGreen]

Can you please let me know where can I find an example of Point with  HTML5 canvas graphic?

[RobertScheitlin__GISP]

Nope. The api make decisions on what is supported based on the browser and that is beyond our control.

[BruceGreen]

Ok Robert, I just have one more question. Can you please take a look at this Post and comment out you idea?

How To Create Heat Map Based on GraphicsLayer Instead of FeatureLayer In ArcGIS JS API - Geographic ...

[RobertScheitlin__GISP]

Behrouz,

   I have already seen that post, but do not have any input on that.

[TyroneBiggums]

I think BEHSEINI‌ could hack it and see what CSS gets applied if the only two options are canvas or SVG. There is a way to check to see if canvas is compatible (I think it's if (canvas.getContext) or something like that). If it is, target the canvas element to apply CSS. If not, target the SVG element to apply CSS.

It looks like jQuery is the best bet to find the right dom element. I have an app that runs 3.15 showing SVG in my browser (F12). I added a layer and I drew a point. The SVG element that contains the circle element has a child g element with an ID that matches the layer name with "_layer" appended. The jquery (call it pseudo code b/c it's untested) to return the last drawn SimpleMarkerSymbol would be $(svg g#myLayerName_layer:last).

I would need to F12 a canvas rendering to do the same thing but I just wanted to throw out the idea. I tested it with the supplied CSS. The result was a larger, light blue circle.