Visualize features with realistic WebStyleSymbols

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

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 = {
  type: "simple",  // autocasts as new SimpleRenderer()
  symbol: {
    type: "web-style",  // autocasts as 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 = {
  type: "unique-value",  // autocasts as new UniqueValueRenderer()
  field: "CATEGORY",
  uniqueValueInfos: [{
    value: "Overhanging street",
    symbol: {
      type: "web-style",  // autocasts as new WebStyleSymbol()
      name: "Overhanging_Street_-_Light_on",
      styleName: "EsriRealisticStreetSceneStyle"
    }
  }, {
    value: "Trash bin",
    symbol: {
      type: "web-style",  // autocasts as new WebStyleSymbol()
      name: "Trash_bin_1",
      styleName: "EsriRealisticStreetSceneStyle"
    }
  }, {
    value: "Park bench 1",
    symbol: {
      type: "web-style",  // autocasts as 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.