Arrows along a line

This sample demonstrates how to place arrows along a line using CIMSymbols to visualize the direction of one-way streets in Redlands. CIMSymbols are used to display multi-layer vector symbols, and can allow for custom symbols and visualizations in your layer. See the CIM specification for more information.

How it works

A UniqueValueRenderer is used to create the visualization for this layer. If the street is a one-way street, a CIMSymbol of a black line with arrows is created to visualize the movement of traffic on that street. If the street is not one-way, a default SimpleLineSymbol is used.

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
renderer: {
  type: "unique-value", // autocasts as UniqueValueRenderer
  field: "oneway",
  defaultSymbol: {
    type: "simple-line" // default SimpleLineSymbol
  },
  uniqueValueInfos: [{
    value: "yes", // when one-way='yes', create CIMSymbol line with arrows
    symbol: {
      type: "cim", // autocasts as CIMSymbol
      data: {
        type: "CIMSymbolReference",
        symbol: {
          type: "CIMLineSymbol",
          symbolLayers: [{
            // black 1px line symbol
            type: "CIMSolidStroke",
            enable: true,
            width: 1,
            color: [0, 0, 0, 255]
          },
          {
            // arrow symbol
            type: "CIMVectorMarker",
            enable: true,
            size: 5,
            markerPlacement: {
              type: "CIMMarkerPlacementAlongLineSameSize", // places same size markers along the line
              endings: "WithMarkers",
              placementTemplate: [19.5], // determines space between each arrow
              angleToLine: true // symbol will maintain its angle to the line when map is rotated
            },
            frame: {
              xmin: -5,
              ymin: -5,
              xmax: 5,
              ymax: 5
            },
            markerGraphics: [{
              type: "CIMMarkerGraphic",
              geometry: {
                rings: [
                  [
                    [-8, -5.47],
                    [-8, 5.6],
                    [1.96, -0.03],
                    [-8, -5.47]
                  ]
                ]
              },
              symbol: {
                // black fill for the arrow symbol
                type: "CIMPolygonSymbol",
                symbolLayers: [{
                  type: "CIMSolidFill",
                  enable: true,
                  color: [0, 0, 0, 255]
                }]
              }
            }]
          }]
        }
      }
    }
  }]
}

CIM line symbols are not currently supported in 3D SceneViews. Additionally, not everything listed in the CIM specification is currently supported.

Click here for more information on CIMSymbol limitations.

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