topic How To Add CSS Class to SimpleMarkerSymbol in GraphicsLayer in ArcGIS JavaScript Maps SDK Questions

How To Add CSS Class to SimpleMarkerSymbol in GraphicsLayer

BruceGreen — Fri, 10 Dec 2021 20:48:14 GMT

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

Re: How To Add CSS Class to SimpleMarkerSymbol in GraphicsLayer

RobertScheitlin__GISP — Fri, 09 Dec 2016 21:02:14 GMT

Behrouz,

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

Re: How To Add CSS Class to SimpleMarkerSymbol in GraphicsLayer

BruceGreen — Fri, 09 Dec 2016 21:14:51 GMT

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?

Re: How To Add CSS Class to SimpleMarkerSymbol in GraphicsLayer

RobertScheitlin__GISP — Fri, 09 Dec 2016 21:31:10 GMT

No a point can be SVG or an HTML5 canvas graphic

Re: How To Add CSS Class to SimpleMarkerSymbol in GraphicsLayer

BruceGreen — Fri, 09 Dec 2016 21:44:02 GMT

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

Re: How To Add CSS Class to SimpleMarkerSymbol in GraphicsLayer

RobertScheitlin__GISP — Fri, 09 Dec 2016 21:50:50 GMT

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

Re: How To Add CSS Class to SimpleMarkerSymbol in GraphicsLayer

BruceGreen — Fri, 09 Dec 2016 22:25:28 GMT

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 Information Systems …

Re: How To Add CSS Class to SimpleMarkerSymbol in GraphicsLayer

RobertScheitlin__GISP — Mon, 12 Dec 2016 14:14:33 GMT

Behrouz,

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

Re: How To Add CSS Class to SimpleMarkerSymbol in GraphicsLayer

TyroneBiggums — Tue, 13 Dec 2016 14:49:49 GMT

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.