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

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.

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

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 …

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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`

<SPAN class="keyword token">var</SPAN> schoolMarker <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleMarkerSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 schoolMarker<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setStyle</SPAN><SPAN class="punctuation token">(</SPAN>SimpleMarkerSymbol<SPAN class="punctuation token">.</SPAN>STYLE_CIRCLE<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 schoolMarker<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setSize</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">30</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 schoolMarker<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setOutline</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 schoolMarker<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setColor</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">116</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0.25</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Here is the CSS class:

<SPAN class="selector token">.marker</SPAN><SPAN class="punctuation token">{</SPAN>
 <SPAN class="property token">stroke-linecap</SPAN><SPAN class="punctuation token">:</SPAN> round<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">stroke-linejoin</SPAN><SPAN class="punctuation token">:</SPAN> round<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">stroke-opacity</SPAN><SPAN class="punctuation token">:</SPAN> 1.0<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">fill-opacity</SPAN><SPAN class="punctuation token">:</SPAN> 1.0<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN>0, 89, 190<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">stroke</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN>0, 89, 190<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">fill</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgb</SPAN><SPAN class="punctuation token">(</SPAN>0, 89, 190<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">fill-opacity</SPAN><SPAN class="punctuation token">:</SPAN> 1<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">stroke-width</SPAN><SPAN class="punctuation token">:</SPAN> 70pt<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">stroke-opacity</SPAN><SPAN class="punctuation token">:</SPAN> 1<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">opacity</SPAN><SPAN class="punctuation token">:</SPAN> 0.12<SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Find more posts tagged with

Accepted answers

All comments

BruceGreen

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

RobertScheitlin__GISP

No a point can be SVG or an HTML5 canvas graphic

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

Behrouz,

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.