Legend & Simple Renderer Error

[jaykapalczynski]

I am rendering a point Map Service with a SimpleMarkerSymbol and then a Renderer to set rotation and Color.

This all works fine until I try and add this to a Legend.

If I use the below code the Legend Fails.

If I comment it out the and use a general point the Legend works fine.

This causes the error:

var marker = new SimpleMarkerSymbol().setPath("M14.5,29 23.5,0 14.5,9 5.5,0z").setAngle(180).setSize(20).setOutline(new SimpleLineSymbol().setColor("#ffffff").setWidth(2));

var renderer = new SimpleRenderer(marker);
  renderer.setRotationInfo({
     field: "HEAD",
     rotationType: "arithmetic"
  });
  renderer.setColorInfo({
     field: "SPEED",
     minDataValue: 0,
     maxDataValue: 150,
     colors: [
        new Color([255,0,0]), new Color([255,0,0]), new Color([34,139,34]), new Color([34,139,34]), new Color([34,139,34]), new Color([34,139,34]), new Color([34,139,34]), new Color([34,139,34])
     ]     
  });
CurrentLoc.setRenderer(renderer);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

What can I do to keep the SimpleMarkerSymbol and the Renderer?

var CurrentLoc = new FeatureLayer("https://xxx/arcgis/rest/services/xxx/MapServer/1", {
   mode: FeatureLayer.MODE_ONDEMAND,
   outFields:["*"],
   infoTemplate: new InfoTemplate("Locations - ${C_ID} - ${ORG}")
});

var marker = new SimpleMarkerSymbol().setPath("M14.5,29 23.5,0 14.5,9 5.5,0z").setAngle(180).setSize(20).setOutline(new SimpleLineSymbol().setColor("#ffffff").setWidth(2));

var renderer = new SimpleRenderer(marker);
  renderer.setRotationInfo({
     field: "HEAD",
     rotationType: "arithmetic"
  });
  renderer.setColorInfo({
     field: "SPEED",
     minDataValue: 0,
     maxDataValue: 150,
     colors: [
        new Color([255,0,0]), new Color([255,0,0]), new Color([34,139,34]), new Color([34,139,34]), new Color([34,139,34]), new Color([34,139,34]), new Color([34,139,34]), new Color([34,139,34])
     ]     
  });
CurrentLoc.setRenderer(renderer);



//add the legend
map.on("layers-add-result", function (evt) {
   var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
       return {layer:layer.layer, title:layer.layer.name};
   });     
   if (layerInfo.length > 0) {
     var legendDijit = new Legend({
        map: map,
        layerInfos: layerInfo,
     }, "legend");
     legendDijit.startup();
   }
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Is it because of this:  If so how can I create an Arrow Symbol and set it to a specific angle via an attribute in the data?

var marker = new SimpleMarkerSymbol().setPath("M14.5,29 23.5,0 14.5,9 5.5,0z").setAngle(180).setSize(20).setOutline(new SimpleLineSymbol().setColor("#ffffff").setWidth(2));
‍

[jaykapalczynski]

I pretty much narrowed it down to this

var marker = new SimpleMarkerSymbol().setPath("M14.5,29 23.5,0 14.5,9 5.5,0z").setAngle(180).setSize(20).setOutline(new SimpleLineSymbol().setColor("#ffffff").setWidth(2));‍‍‍‍

But I want to have an arrow that I can change the rotation angle on...

I did this and everything worked including the legend.

So eliminating the setPath etc. as seen above eliminated the error....

Anyone have any ideas on creating an Arrow other than my example above?

var symbol = new SimpleMarkerSymbol({
   "color": [255,255,255,64],
   "size": 12,
   "xoffset": 0,
   "yoffset": 0,
   "type": "esriSMS",
   "style": "esriSMSCircle",
   "outline": {
     "color": [0,0,0,255],
     "width": 1,
     "type": "esriSLS",
     "style": "esriSLSSolid"
    }
});

var renderer = new SimpleRenderer(symbol);
renderer.setRotationInfo({
   field: "HEAD",
   rotationType: "arithmetic"
});
renderer.setColorInfo({
   field: "SPEED",
   minDataValue: 0,
   maxDataValue: 85,
   colors: [
     new Color([255,0,0]), new Color([255,0,0]), new Color([34,139,34]), new Color([34,139,34]), new Color([34,139,34]), new Color([34,139,34]), new Color([34,139,34]), new Color([34,139,34])
   ]     
}); 
CurrentLoc.setRenderer(renderer);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP · Accepted solution]

Jay,

   It looks like you got your code basis from this sample:

https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=renderer_class_breaks_proport... 

Which has not problem using the SimpleMarkerSymbol.setPath, so it seems that is is something in your code implementation. Nothing stands out as wrong in your code though. The main difference I see is that you are setting the Angle and Size in your symbol initial constructor. Maybe try to use the exact code the sample does with only the size applied and not the angle since you are setting the rotation based on a field.

var marker = new SimpleMarkerSymbol().setPath("M14.5,29 23.5,0 14.5,9 5.5,0z").setSize(20).setOutline(new SimpleLineSymbol().setWidth(0.5));‍‍

[jaykapalczynski]

I dug deeper like I should have in the first place .... but I was fixated on the

.setPath("M14.5,29 23.5,0 14.5,9 5.5,0z")

I started removing each one and came up with the .setColor (which I didn't even need in the first place as I am setting that int the renderer)

var marker = new SimpleMarkerSymbol().setPath("M14.5,29 23.5,0 14.5,9 5.5,0z")
    .setSize(20)
    .setOutline(new SimpleLineSymbol() 
    .setColor("#ffffff") 
    .setWidth(2));
‍‍‍‍‍‍‍

I removed the .setColor and added everything back in and it works now...

var marker = new SimpleMarkerSymbol().setPath("M14.5,29 23.5,0 14.5,9 5.5,0z")
   .setAngle(180)
   .setSize(20)
   .setOutline(new SimpleLineSymbol()
   .setWidth(0.5));‍‍‍‍‍

Sorry for wasting your time...

[jaykapalczynski]

With set color removed HOW can I set the outline color of the arrow?

Is there a way to set the outline color in the renderer?

var renderer = new SimpleRenderer(marker);
   renderer.setRotationInfo({
     field: "HEAD",
     rotationType: "arithmetic"
   });
   renderer.setColorInfo({
     field: "SPEED",
     minDataValue: 0,
     maxDataValue: 150,
     colors: [
       new Color([255,0,0]), new Color([255,0,0]), new Color([34,139,34]), new Color([34,139,34]), new Color([34,139,34]), new Color([34,139,34]), new Color([34,139,34]), new Color([34,139,34])
     ]     
   });‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Jay,

   Sure you can you just need to use a different syntax in the line constructor:

var marker = new SimpleMarkerSymbol().setPath("M14.5,29 23.5,0 14.5,9 5.5,0z").setSize(20).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, "#ffffff", 0.5));‍

[jaykapalczynski]

I think I got it...switched to JSON...this look correct?  Not getting any errors so excited.

     var marker = new SimpleMarkerSymbol({
       "xoffset": 0,
       "angle": 0,
       "yoffset": 0,
       "outline": {
          "color": [0,0,0,255],
          "width": .5,
          "type": "esriSLS",
          "style": "esriSLSSolid"
       }
     });
     marker.setPath("M14.5,29 23.5,0 14.5,9 5.5,0z");‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Jay,

   That is fine too.

[jaykapalczynski]

Any pros or cons between the two methods?

[RobertScheitlin__GISP]

Jay,

  Not really more of a preference thing (more lines of code vs. code readability).