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:

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
const 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.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
webStyleSymbol.fetchSymbol().then((pointSymbol3D) => {
  // clone the retrieved symbol, as properties on it are immutable
  const newSymbol = pointSymbol3D.clone();
  // the first symbolLayer contains the properties that can be modified
  const 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
  const 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.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const 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 Builder.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.