Renderers

[jaykapalczynski]

I have two renders that I am using to render my Streets.  They both work independently but lost on how to get them into the same renderer...because If I try and use them independently it cancels one out.

1st RENDERER

var RoadColor1 = new Color("#eae5e5");
var RoadLine1 = new SimpleLineSymbol("solid", RoadColor1, 1.5);
var RoadSymbol1 = new SimpleFillSymbol("solid", RoadLine1, null);
var RoadRenderer1 = new SimpleRenderer(RoadSymbol1);

RoadBlack1.setRenderer(RoadRenderer1);


‍‍‍‍‍‍‍‍

2nd RENDERER

//Assign parameters for road width by SPEED
var sizeInfo = {
  field:"SPEED",
  minSize:.2,
  maxSize:10,
  minDataValue:0,
  maxDataValue:70
};
     
RoadBlack1.renderer.setSizeInfo(sizeInfo);‍‍‍‍‍‍‍‍‍‍

How can I combine them so they both work?

[RobertScheitlin__GISP]

Jay,

   This is very confusing. You are calling the symbol and layer roads (which normally would be a line) but you are applying a SimpleFillSymbol and then trying to use a SizeInfo (which normally is either a marker or a line)... What gives?

[KristianEkenes]

Good catch, Robert. Yes, the SimpleFillSymbol won't work for a sizeInfo visual variable.

Jay, Scrap that symbol and stick to a line and you should be good to go with the snippet I added below.

[KristianEkenes]

I just updated the snippet to reflect the issue Robert pointed out.

[KristianEkenes · Accepted solution]

Layers can only have one renderer at a time. What you're attempting to do is possible, you're just confusing the visual variable object with the renderer. visualVariables is a property of the renderer. Just reorganize your code a bit and it should work.

Here's what you need to do:

var RoadColor = new Color("#eae5e5");
var RoadSymbol = new SimpleLineSymbol("solid", RoadColor, 1.5);
var RoadRenderer = new SimpleRenderer(RoadSymbol);

//Assign parameters for road width by SPEED
var sizeInfo = {
  type: "sizeInfo",   // type must be specified otherwise the renderer 
                      //doesn't know which visual variable type it is
  field:"SPEED",
  minSize: 0.2,
  maxSize: 10,
  minDataValue: 0,
  maxDataValue: 70
};
     
RoadRenderer.setVisualVariables([sizeInfo]);
RoadBlack.setRenderer(RoadRenderer);

[jaykapalczynski]

Thank you both for your thoughts and help...yea I was confusing myself there...lol....thanks

Gonna test this out and will get back with ya

[jaykapalczynski]

This is what I have....

No matter what I change the RoadColor to it still comes up green (in the example the Hex color is red)
The LabelClass for the Roads work Fine
I even changed the road width on the SizeInfo to 40 and all the roads are the same width

   var RoadEndPoint1 = "https://xxxxx/FeatureServer/11";
    var RoadBlack1 = new FeatureLayer(RoadEndPoint1, {
      mode: FeatureLayer.MODE_ONDEMAND,
       id: "Roads1",
       minScale: 50000,
       visible: false,
      outFields: ["STREET_NAME_FULL", "SPEED"]
    });
     // Push layer to the legend
     legendLayers.push({ layer: RoadBlack1, title: 'Roads Centerline 2' });
     //Create a new Label Class for the Street Labels     
     var labelClass1 = new LabelClass({
        labelExpressionInfo: {"value": "{STREET_NAME_FULL}"},
        symbol: {
          "type": "esriTS",
           "color": [255,255,255],
          "haloColor": [0,0,0],
          "haloSize": "1.25",
          "verticalAlignment": "middle",
          "horizontalAlignment": "center",
          "yoffset": "0",
          "font": {
            "family": "Arial",
            "size": "12px",
            "weight": "BOLDER"
          }  
        }  
     });  
     //Apply the labelingInfo to the States feature layer and add to the map
     RoadBlack1.setLabelingInfo([ labelClass1 ]);

     var RoadColor = new Color("#FF0000");
     var RoadSymbol = new SimpleLineSymbol("solid", RoadColor, 1.5);
     var RoadRenderer = new SimpleRenderer(RoadSymbol);
     
        //Assign parameters for road width by SPEED
     var sizeInfo = {
       type: "sizeInfo",   // type must be specified otherwise the renderer doesn't know which visual variable type it is
       field:"SPEED",
       minSize: 0.2,
       maxSize: 40,
       minDataValue: 0,
       maxDataValue: 70
     };
     
     RoadRenderer.setVisualVariables(sizeInfo);
     RoadBlack.setRenderer(RoadRenderer);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[jaykapalczynski]

OK fixed the road color issue....your code snip had 

RoadBlack.setRenderer(RoadRenderer);

needed to be RoadBlack1

RoadBlack1.setRenderer(RoadRenderer);

Now just need to figure out why the roads are not varying widths

[jaykapalczynski]

Got it...I removed the [ ] at one point on the line: RoadRenderer.setVisualVariables([sizeInfo]);

ALL GOOD TO GO....THANK YOU ALL SO MUCH

[KristianEkenes]

I took the liberty of renaming variables in my snippet. Maybe that's the issue? You're setting labelingInfo on RoadBlack1, but the renderer on RoadBlack.

RoadBlack.setRenderer(RoadRenderer);

// should be
RoadBlack1.setRenderer(RoadRenderer);