2

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

This example here uses the layer's feature-draw event to get access to the marker's/feature's underlying SVG node, you can add a custom CSS class that way:

// require "dojo/on" as "on"
on(graphicsLayer, "graphic-draw", function (evt) {
  evt.node.setAttribute("class", "marker");
});

Or, if your layer has an id set (e.g. new GraphicsLayer({ id: "circles" });) you can use that in your CSS definition by appending _layer to its name:

#circles_layer circle { /* CSS here */ }
  • Thanks for your comment chrki, but the first example is using FeatureLayer how can I use same mechanism in GraphicsLayer? – user1106951 Dec 10 '16 at 17:54
  • @user1106951 I tested both solutions with GraphicsLayer and it worked, see demo: plnkr.co/edit/TityFSESgxE7l6ZvJVJm?p=preview – chrki Dec 10 '16 at 18:19
  • @user1106951 Figured it out I think: 1. Move the on block outside of the $.each (move it above or below), it only needs to run once, 2. event name is graphic-draw (you added an s), 3. looks like you need to set a default marker symbol, i.e. include the schoolMarker code from your original post and set the symbol on the graphics: var pointGraphic = new Graphic(point, schoolMarker); – chrki Dec 10 '16 at 19:01
  • Thanks a lot chrki, Can I also ask you to take a look at thois post as well? apparently no body has idea about it! gis.stackexchange.com/questions/220851/… – user1106951 Dec 10 '16 at 20:48
  • @user1106951 I might take a look later. Give it some time though, that question was only asked yesterday and it's the weekend, I'm sure someone here knows an answer :) – chrki Dec 10 '16 at 20:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.