Location style (2D points)

--- name: Location style description: Learn how to style layers with a simple renderer using 2D and 3D symbols. keywords: - geometry - symbol - renderer --- # Location style **Location style (2D polygons)** The distribution of American Indian, Alaska Native, and Native Hawaiian (AIANNH) areas in the United States are shown using opaque, unicolored polygons. [Web map item](https://www.arcgis.com/home/item.html?id=1e200b7c14154c2baddd1383185b7fd9) ## What is the location style? The location style involves styling all features in a layer with a single symbol. This is designed to only visualize the location of features with no other data-driven attributes overriding the symbol. Location, or geometry, is the only way to distinguish one feature from another. This allows you to treat all the features equally and let their spatial pattern speak for itself on the map. ## How to style features by location In general, there are two ways to style features: 1. **Apply symbols to graphics**: Use this approach when you need to display the location for temporary graphics in a map or scene. The symbol type must match the geometry type of the graphic. Learn more about how to create graphics in [Graphics](/documentation/mapping-and-location-services/mapping/graphics/). 2. **Apply a renderer (with symbols) to a data layer**: Use this approach to define the style for all features in a data layer in a map or scene. A renderer defines the rules for applying symbols to features, such as how to color or size features based on a data value. ## Simple renderer Location styles are defined with a simple renderer. Using a simple renderer, all visual properties of the symbol (e.g. size, color, opacity, texture, etc.) are fixed for each feature. The primary purpose of the visualization is to show where a feature is located, not specifics about the feature's attributes. For example, if you want to know the locations of weather stations, but you don't need to know additional attribute information about each station, you should render all points with the same symbol. > [!NOTE] > To learn how to use other renderers to style your data using attributes and multiple symbols, visit [Data-driven styles](/visualization/data-driven-styles/). **Simple renderer** ```html Location style (2D points)

``` ## Symbols The style for features in a map are defined by a symbol. The symbol should represent the data with either what the symbol represents or how the feature is related to other features with respect to location and the data attributes being mapped. The symbol chosen for a layer depends on the view in which it is rendered (2D or 3D), and the geometry type of the features in the layer (point, polyline, polygon, or mesh). ### 2D Symbols You use 2D symbols to style point, line, and polygon geometries and display them in a map. The main types are marker, line, fill, picture, and text symbols. See below for [more examples](#2d-examples). ```js label="Simple marker and line symbols" const symbol = new SimpleMarkerSymbol({ color: "rgba(0,128,155,0.8)", size: "10px", outline: new SimpleLineSymbol({ width: 0.5, color: "rgba(255,255,255,0.3)", }), }); ``` ### 3D Symbols You use 3D symbols to style point, line, polygon, and mesh geometries and display them in a scene. In a scene, you can choose between two types of symbols: - 2D symbols such as marker symbols, line symbols and polygon fill symbols. - 3D symbols such as 3D model symbols, path symbols and extruded polygon symbols. See below for [more examples](#3d-examples). ```js label="PointSymbol3D and IconSymbol3DLayer" const pointSymbol = new PointSymbol3D({ symbolLayers: [ new IconSymbol3DLayer({ resource: { href: "pin.svg" }, size: 15, material: { color: "#4c397f", }, anchor: "bottom", }), ], }); ``` ## 2D examples ### Points To visualize the location of point features in a map, set a simple marker symbol, picture marker symbol, or a CIM symbol in a simple renderer, and set the renderer on the layer. All features will display in the view with the same symbol. **Location style (2D points)** Weather station locations are represented by dots. **Loaded from a web map** [Web map item](https://www.arcgis.com/home/item.html?id=2a0b2d7d23ef42a9ac689676bfef3fba) ```html undefined

``` **Defined in JavaScript** 1. Create a simple marker symbol and add it to a simple renderer. 2. Set the renderer to a data layer. ```html Location style (2D points)

``` ### Lines To visualize the location of line features in a map, use a simple line symbol or a cim symbol, and a simple renderer. **Location style (2D lines)** Major highway locations displayed by a line symbol. **Loaded from a web map** [Web map item](https://www.arcgis.com/home/item.html?id=0399bd26aad24a96ad741733378f7ff4) ```html undefined

``` **Defined in JavaScript** 1. Create a simple line symbol and add it to a simple renderer. 2. Set the renderer to the data layer. ```html Location style (2D lines)

``` ### Polygons To visualize the location of polygon features in a map, you can use either a simple fill symbol, a picture fill symbol, or a CIM symbol. You can also use simple marker symbol, picture marker symbol, web style symbol, or a CIM symbol to visualize the centroid of the polygon. **Location style (2D polygons)** The distribution of American Indian, Alaska Native, and Native Hawaiian (AIANNH) areas in the United States are shown using opaque, unicolored polygons. **Loaded from a web map** [Web map item](https://www.arcgis.com/home/item.html?id=1e200b7c14154c2baddd1383185b7fd9) ```html undefined

``` **Defined in JavaScript** 1. Create a simple fill symbol and add it to a simple renderer. 2. Set the renderer to the data layer. ```html Location style (2D polygons)

``` ## 3D examples ### Points To visualize the location of point features in a scene, set a marker symbol or a 3D model symbol in a simple renderer, and set the renderer on the layer. All features will display in the view with the same symbol. **Location style (3D points)** Cities, represented by pin markers, are displayed across the globe. **Loaded from a web scene** [Web scene item](https://www.arcgis.com/home/item.html?id=22a4a77a55ea46da925e04210d5c2cde) ```html undefined

``` **Defined in JavaScript** 1. Create a marker symbol and add it to a simple renderer. 2. Apply the renderer to the data layer so that each feature is displayed with the marker symbol. ```html Location style (3D points)

``` ### Lines To visualize the location of line features in a scene, set a line symbol or a 3D path symbol in a simple renderer, and set the renderer on the layer. **Location style (3D lines)** The metro lines in Lyon are styled using a path symbol. 1. Create a path symbol with a width of 5 and a height of 30 meters. 2. Add it to a simple renderer. 3. Apply the renderer to the data layer. ```html Location style (3D lines)

``` ### Polygons To visualize polygon features in a scene, use a fill symbol or extrude the polygon based on real-world heights. **Location style (3D polygons)** Building footprints are extruded with a fixed height to display schematic buildings in a city. **Loaded from a web scene** ```html Location style (3D polygons)

``` **Defined in JavaScript** 1. Create an extruded polygon symbol and add it to a simple renderer. 2. Apply the renderer to the data layer. ```html Location style (3D polygons)

```