topic Re: Legend & Simple Renderer Error in ArcGIS JavaScript Maps SDK Questions

Legend & Simple Renderer Error

jaykapalczynski — Sun, 12 Dec 2021 06:39:50 GMT

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

Re: Legend & Simple Renderer Error

jaykapalczynski — Sun, 12 Dec 2021 06:39:53 GMT

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

Re: Legend & Simple Renderer Error

RobertScheitlin__GISP — Thu, 28 Dec 2017 15:14:36 GMT

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_proportional_rotation

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

Re: Legend & Simple Renderer Error

jaykapalczynski — Sun, 12 Dec 2021 06:39:56 GMT

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...

Re: Legend & Simple Renderer Error

jaykapalczynski — Sun, 12 Dec 2021 06:39:59 GMT

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

Re: Legend & Simple Renderer Error

RobertScheitlin__GISP — Thu, 28 Dec 2017 16:06:35 GMT

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

Re: Legend & Simple Renderer Error

jaykapalczynski — Sun, 12 Dec 2021 06:40:01 GMT

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");‍‍‍‍‍‍‍‍‍‍‍‍

Re: Legend & Simple Renderer Error

RobertScheitlin__GISP — Thu, 28 Dec 2017 16:10:40 GMT

Jay,

That is fine too.

Re: Legend & Simple Renderer Error

jaykapalczynski — Thu, 28 Dec 2017 16:13:02 GMT

Any pros or cons between the two methods?

Re: Legend & Simple Renderer Error

RobertScheitlin__GISP — Thu, 28 Dec 2017 16:14:54 GMT

Jay,

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

Re: Legend & Simple Renderer Error

jaykapalczynski — Thu, 28 Dec 2017 16:52:22 GMT

Thanks for all your help....Cheers