Visualize features with realistic WebStyleSymbols

For quickly applying web styles, features can be rendered using WebStyleSymbol. The symbol can be set either in a renderer, or directly on the graphic:

var renderer = new SimpleRenderer({
  symbol: new WebStyleSymbol({
    name: "Light_On_Post_-_Light_on",
    portal: {
      url: "https://www.arcgis.com"
    },
    styleName: "EsriRealisticStreetSceneStyle"
  })
})

A WebStyleSymbol's size, rotation or color can't be directly modified. However, using its fetchSymbol() method, a PointSymbol3D representation of it can be retrieved and modified.

webStyleSymbol.fetchSymbol().then(function(pointSymbol3D){
  // clone the retrieved symbol, as properties on it are immutable
  var newSymbol = pointSymbol3D.clone();
  // the first symbolLayer contains the properties that can be modified
  var symbolLayer = newSymbol.symbolLayers.getItemAt(0);
  // change for example the height of the object
  symbolLayer.height *= scale;
  // do something with newSymbol, like setting it on a layer renderer
  var newRenderer = layer.renderer.clone();
  newRenderer.symbol = newSymbol;
  layer.renderer = newRenderer;
})

Another way to modify WebStyleSymbols is by using them in a renderer with visualVariables. This sample creates a city scene of Logan square in Philadelphia. WebStyleSymbols are used for representing street lamps, benches, cars and vegetation. Using visualVariables we scale these features to their real world sizes.

var streetFurnitureRenderer = new UniqueValueRenderer({
  field: "CATEGORY",
  uniqueValueInfos: [{
    value: "Overhanging street",
    symbol: new WebStyleSymbol({
      name: "Overhanging_Street_-_Light_on",
      styleName: "EsriRealisticStreetSceneStyle"
    })
  }, {
    value: "Trash bin",
    symbol: new WebStyleSymbol({
      name: "Trash_bin_1",
      styleName: "EsriRealisticStreetSceneStyle"
    })
  }, {
    value: "Park bench 1",
    symbol: new WebStyleSymbol({
      name: "Park_bench_1",
      styleName: "EsriRealisticStreetSceneStyle"
    })
  }],
  visualVariables: [{
    type: "rotation",
    field: "ROTATION"
  }, {
    type: "size",
    field: "SIZE",
    axis: "height"
  }]
});

See the Visualizing points with 3D symbols guide to view a full list of all the 3D symbols and styles available for use in the WebStyleSymbol class. You can also experiment with any style using the Symbol Playground.