The ArcGIS Maps SDK for JavaScript provides a comprehensive set of symbols to represent and visualize geographic features on maps. These symbols enable developers to customize the appearance and style of point, line, and polygon features in 2D and 3D map environments.

2D symbols

With 2D symbols, you can utilize simple markers, images, lines, fills, and text labels to create visually appealing representations. These classes allow you to configure symbols with basic shapes and patterns:

  • SimpleMarkerSymbol: Represents point features as simple markers with customizable color, size, style, and outline.
  • SimpleLineSymbol: Symbolizes line features with color, width, and style options.
  • SimpleFillSymbol: Symbolizes polygon features with customizable fill color, outline color, and style.
  • PictureMarkerSymbol: Uses custom images as markers for point features, with options to customize size, angle, and offset.
  • PictureFillSymbol: Uses images to fill polygon features, allowing customization of image URL, size, and scale.
  • TextSymbol: Displays text labels on the map with customizable content, font, color, size, and positioning.

3D symbols

3D symbols represent features in three-dimensional space using basic primitive for points, lines, polygons, and mesh geometries. These symbols can be flat, billboarded or draped on a scene, or volumetric shapes.

  • PointSymbol3D: Represents individual points in 3D space, with options for shape, size, color, and other properties.
  • LineSymbol3D: Symbolizes line features in 3D space with customizable shape, width, color, and other properties.
  • PolygonSymbol3D: Represents and styles polygon features in 3D space, allowing customization of shape, height, extrusion properties, color, etc.
  • MeshSymbol3D: Represents features using custom 3D mesh geometries, allowing you to use complex 3D models or mesh files to visualize features.

Complex symbols

You can also create your own complex 2D or 3D symbols by either consuming them as pre-defined web styles, or as fully custom CIMSymbols.

  • CIMSymbol: Allows you to create fully custom, advanced, scalable symbols using the Cartographic Information Model (CIM). This symbol exposes a wide range of capabilities for highly detailed and complex symbol design.
  • WebStyleSymbol: Allows you to access a vast library of pre-defined 2D and 3D symbols. These styles provide ready-to-use vector symbols and 3D shapes for, POIs, landmarks, buildings, vegetation, infrastructure, etc.

The API reference provides more detailed information on each symbol's specific properties and methods.

Symbol Builder

Symbol Builder application provides a UI for creating any symbol

Image preview of related sample Visualize all features with the same symbol

Visualize all features with the same symbol

Visualize all features with the same symbol

Image preview of related sample Intro to graphics

Intro to graphics

Intro to graphics

Image preview of related sample CIMSymbol lines and polygons

CIMSymbol lines and polygons

Learn how to create CIM line and polygon symbols.

Image preview of related sample WebStyleSymbol (2D)

WebStyleSymbol (2D)

WebStyleSymbol (2D)

Image preview of related sample Realistic WebStyleSymbols

Realistic WebStyleSymbols

Visualize features with realistic WebStyleSymbols

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