Graphics

Point, polyline, and polygon geometries displayed using graphics and a graphics layer

What is a graphic?

A graphic is a visual element displayed on a map or scene. A graphic is used to temporarily display features as points, lines, and polygons on a map or scene. For example, you can use a graphic to display a marker with your current GPS location.

You can use graphics to:

Display points, lines, polygons, and text in a map or scene.
Display geometry with different symbols in 2D and 3D.
Move elements on the display.
Display attributes in a pop-up when an element is clicked.

How a graphic works

Graphics are used to display a point, line, polygon, or text on a map or scene. They are temporary and are created at runtime by an application. For example, you can use data from a GPS to display a graphic on a map that represents the location of a device. The graphic (and data) do not persist when the application closes.

Graphics can be added to a graphics layer, graphic overlay, or view. To ensure they are always visible, they are typically added on top of all other layers. When a map view displays a map, graphics are the last to be displayed.

Figure 1: Graphics displayed on top of a basemap layer and data layers.

Graphic composition

A graphic is composed of a geometry, symbol, and attributes.

ArcGIS JS API

ArcGIS .NET API

ArcGIS Android API

ArcGIS iOS API

ArcGIS Java API

ArcGIS Qt API (C++)

ArcGIS Qt API (QML)

// Remove this line

const pointGraphic = new Graphic({
 geometry: point,
 symbol: simpleMarkerSymbol,
 attributes: attributes
});


const point = {
  type: "point",
  longitude: -118.80657463861,
  latitude: 34.0005930608889
};


const attributes = {
  name: "Point",
  description: "I am a point"
}


const simpleMarkerSymbol = {
  type: "simple-marker",
  color: [226, 119, 40],  // orange
  outline: {
    color: [255, 255, 255], // white
    width: 1
  }
};


const simpleMarkerSymbol = {
  type: "point-3d",
  symbolLayers: [
    {
      type: "object",
      width: 100,
      height: 100,
      resource: {
        primitive: "cylinder"
      },
      material: {
        color: "#000000",
        outline: {
          color: "#ffffff"
        }
      }
    }
  ]
};

Geometry

A graphic contains a geometry which defines its position on earth. A geometry is a geometric shape such as a point, polyline, or polygon.

ArcGIS JS API

ArcGIS .NET API

ArcGIS Android API

ArcGIS iOS API

ArcGIS Java API

ArcGIS Qt API (C++)

ArcGIS Qt API (QML)

// Remove this line

const pointGraphic = new Graphic({
 geometry: point,
 symbol: simpleMarkerSymbol,
 attributes: attributes
});


const point = {
  type: "point",
  longitude: -118.80657463861,
  latitude: 34.0005930608889
};


const attributes = {
  name: "Point",
  description: "I am a point"
}


const simpleMarkerSymbol = {
  type: "simple-marker",
  color: [226, 119, 40],  // orange
  outline: {
    color: [255, 255, 255], // white
    width: 1
  }
};


const simpleMarkerSymbol = {
  type: "point-3d",
  symbolLayers: [
    {
      type: "object",
      width: 100,
      height: 100,
      resource: {
        primitive: "cylinder"
      },
      material: {
        color: "#000000",
        outline: {
          color: "#ffffff"
        }
      }
    }
  ]
};

Symbol

A graphic contains a symbol that defines how it is displayed. A symbol contains styling information. Simple symbols have one layer and are displayed as vectors. More complex symbols can be composed of multiple layers. Marker symbols can display an image at the location of a point geometry.

To display a graphic in 2D or 3D, in most cases you can use a 2D symbol.

ArcGIS JS API

ArcGIS .NET API

ArcGIS Android API

ArcGIS iOS API

ArcGIS Java API

ArcGIS Qt API (C++)

ArcGIS Qt API (QML)

// Remove this line

const pointGraphic = new Graphic({
 geometry: point,
 symbol: simpleMarkerSymbol,
 attributes: attributes
});


const point = {
  type: "point",
  longitude: -118.80657463861,
  latitude: 34.0005930608889
};


const attributes = {
  name: "Point",
  description: "I am a point"
}


const simpleMarkerSymbol = {
  type: "simple-marker",
  color: [226, 119, 40],  // orange
  outline: {
    color: [255, 255, 255], // white
    width: 1
  }
};


const simpleMarkerSymbol = {
  type: "point-3d",
  symbolLayers: [
    {
      type: "object",
      width: 100,
      height: 100,
      resource: {
        primitive: "cylinder"
      },
      material: {
        color: "#000000",
        outline: {
          color: "#ffffff"
        }
      }
    }
  ]
};

To display a graphic with a 3D shape, use a 3D symbol.

ArcGIS JS API

ArcGIS .NET API

ArcGIS Android API

ArcGIS iOS API

ArcGIS Java API

ArcGIS Qt API (C++)

ArcGIS Qt API (QML)

// Remove this line

const pointGraphic = new Graphic({
 geometry: point,
 symbol: simpleMarkerSymbol,
 attributes: attributes
});


const point = {
  type: "point",
  longitude: -118.80657463861,
  latitude: 34.0005930608889
};


const attributes = {
  name: "Point",
  description: "I am a point"
}


const simpleMarkerSymbol = {
  type: "simple-marker",
  color: [226, 119, 40],  // orange
  outline: {
    color: [255, 255, 255], // white
    width: 1
  }
};


const simpleMarkerSymbol = {
  type: "point-3d",
  symbolLayers: [
    {
      type: "object",
      width: 100,
      height: 100,
      resource: {
        primitive: "cylinder"
      },
      material: {
        color: "#000000",
        outline: {
          color: "#ffffff"
        }
      }
    }
  ]
};

Attributes

Graphics can also contain attributes. Attributes are field and data values that describe the graphic. For example, a graphic can contain name, ID, and type attributes. Attributes are useful for displaying information when a user clicks on a graphic.

ArcGIS JS API

ArcGIS .NET API

ArcGIS Android API

ArcGIS iOS API

ArcGIS Java API

ArcGIS Qt API (C++)

ArcGIS Qt API (QML)

// Remove this line

const pointGraphic = new Graphic({
 geometry: point,
 symbol: simpleMarkerSymbol,
 attributes: attributes
});


const point = {
  type: "point",
  longitude: -118.80657463861,
  latitude: 34.0005930608889
};


const attributes = {
  name: "Point",
  description: "I am a point"
}


const simpleMarkerSymbol = {
  type: "simple-marker",
  color: [226, 119, 40],  // orange
  outline: {
    color: [255, 255, 255], // white
    width: 1
  }
};


const simpleMarkerSymbol = {
  type: "point-3d",
  symbolLayers: [
    {
      type: "object",
      width: 100,
      height: 100,
      resource: {
        primitive: "cylinder"
      },
      material: {
        color: "#000000",
        outline: {
          color: "#ffffff"
        }
      }
    }
  ]
};

Examples

Display graphics in a map

This example displays a point, line, and polygon in a map. It adds graphics to a graphics layer or an overlay. It also adds a simple pop-up when the graphic is clicked.

Steps

Create a geometry to define the coordinates and shape.
Create a symbol to define the style.
Define attributes to show data when they are clicked.
Add the graphic to a graphics layer, graphics overlay, or view.

Map

ArcGIS JS API

ArcGIS .NET API

ArcGIS Android API

ArcGIS iOS API

ArcGIS Java API

ArcGIS Qt API (C++)

ArcGIS Qt API (QML)

Go to tutorial

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS Developer Guide: Display graphics</title>
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.18/"></script>

<script>
  require([
    "esri/config",
    "esri/Map",
    "esri/views/MapView",
    "esri/Graphic",
    "esri/layers/GraphicsLayer"
  ], function(esriConfig,Map, MapView, Graphic, GraphicsLayer) {

    esriConfig.apiKey = "YOUR-API-KEY";
    const map = new Map({
      basemap: "arcgis-topographic"
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.80500,34.02700],
      zoom: 13,
      constraints: {
        snapToZoom: false
      }
    });

    const graphicsLayer = new GraphicsLayer();
    map.add(graphicsLayer);

    const point = {
      type: "point",
      longitude: -118.80657463861,
      latitude: 34.0005930608889
    };

    const simpleMarkerSymbol = {
      type: "simple-marker",
      color: [0, 0, 0],
      outline: {
        color: [255, 255, 255],
        width: 1
      }
    };

    const attributes = {
      name: "Point",
      description: "I am a point"
    }

    const pointGraphic = new Graphic({
      geometry: point,
      symbol: simpleMarkerSymbol,
      attributes: attributes,
      popupTemplate: {
        title: attributes.name,
        content: attributes.description
      }
    });

    graphicsLayer.add(pointGraphic);

    const simpleLineSymbol = {
      type: "simple-line",
      color: "#ff7380",
      width: 2
    };

    const polyline = {
      type: "polyline",
      paths: [
        [-118.821527826096, 34.0139576938577],
        [-118.814893761649, 34.0080602407843],
        [-118.808878330345, 34.0016642996246]
      ]
    };

    const polylineGraphic = new Graphic({
      geometry: polyline,
      symbol: simpleLineSymbol
    })

    graphicsLayer.add(polylineGraphic);

    const polygon = {
      type: "polygon",
      rings: [
        [-118.818984489994, 34.0137559967283],
        [-118.806796597377, 34.0215816298725],
        [-118.791432890735, 34.0163883241613],
        [-118.79596686535, 34.008564864635],
        [-118.808558110679, 34.0035027131376]
      ]
    };

    const simpleFillSymbol = {
      type: "simple-fill",
      color: [50,100,200,.5],
      outline: {
        color: [255, 255, 255],
        width: 1
      }
    };

    const polygonGraphic = new Graphic({
      geometry: polygon,
      symbol: simpleFillSymbol
    });

    graphicsLayer.add(polygonGraphic);

  });
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

Display graphics in a scene

This example displays a point, line, and polygon in a scene. It adds graphics to a graphic layer or an overlay.

Steps

Create a geometry to define the coordinates and shape.
Create a symbol to define the style.
Define attributes to show data when they are clicked.
Add the graphic to a graphic layer, graphic overlay, or view.

Scene

ArcGIS JS API

ArcGIS .NET API

ArcGIS Android API

ArcGIS iOS API

ArcGIS Java API

ArcGIS Qt API (C++)

ArcGIS Qt API (QML)

Go to sample

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS Developer Guide: Display graphics (scene)</title>
   <!-- ArcGIS Mapping APIs and Location Services Developer Guide
    Learn more: https://developers.arcgis.com/documentation/mapping-apis-and-location-services/maps/
    -->
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.18/"></script>

<script>
  require([
    "esri/config",
    "esri/Map",
    "esri/views/SceneView",
    "esri/Graphic",
    "esri/layers/GraphicsLayer"
  ], function(esriConfig,Map, SceneView, Graphic, GraphicsLayer) {

    esriConfig.apiKey = "YOUR-API-KEY";
    const map = new Map({
      basemap: "arcgis-topographic", // Basemap layer
      ground: "world-elevation" // Elevation service
    });

    const view = new SceneView({
      container: "viewDiv",
      map: map,
      camera: {
        position: {
          x: -118.808,
          y: 33.961,
          z: 2000 // meters
        },
        tilt: 75
      }
    });

    const graphicsLayer = new GraphicsLayer({
      elevationInfo: {
        mode: "on-the-ground"
      }
    });
    map.add(graphicsLayer);

    const point = {
      type: "point",
      x: -118.80657463861,
      y: 34.0005930608889,
      z: 100 //meters
    };

    const pointSymbol = {
      type: "point-3d",
      symbolLayers: [
        {
          type: "object",
          width: 100,
          height: 100,
          resource: {
            primitive: "cylinder"
          },
          material: {
            color: "#000000",
            outline: {
              color: "#ffffff"
            }
          }
        }
      ]
    };

    const attributes = {
      name: "Point",
      description: "I am a point"
    }

    const pointGraphic = new Graphic({
      geometry: point,
      symbol: pointSymbol,
      attributes: attributes,
      popupTemplate: {
        title: attributes.name,
        content: attributes.description
      }
    });

    graphicsLayer.add(pointGraphic);

    const lineSymbol = {
    type: "line-3d",
      symbolLayers: [{
        type: "path",
        profile: "quad",
        width: 5,  // Path width in meters
        height: 100,  // Path height in meters
        material: { color: "#ff7380" },
        cap: "square",
        profileRotation: "heading"
      }]
    };

    const polyline = {
      type: "polyline",
      paths: [
        [-118.821527826096, 34.0139576938577],
        [-118.814893761649, 34.0080602407843],
        [-118.808878330345, 34.0016642996246]
      ]
    };

    const polylineGraphic = new Graphic({
      geometry: polyline,
      symbol: lineSymbol
    })

    graphicsLayer.add(polylineGraphic);

    const polygon = {
      type: "polygon",
      rings: [
        [-118.818984489994, 34.0137559967283],
        [-118.806796597377, 34.0215816298725],
        [-118.791432890735, 34.0163883241613],
        [-118.79596686535, 34.008564864635],
        [-118.808558110679, 34.0035027131376]
      ]
    };

    const fillSymbol = {
      type: "polygon-3d",
      symbolLayers: [{
        type: "extrude",
        size: 200,  // Meters in height
        material: { color: [50,100,200,.5] }
      }]
    };

    const polygonGraphic = new Graphic({
      geometry: polygon,
      symbol: fillSymbol
    });

    graphicsLayer.add(polygonGraphic);

  });
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

Tutorials

Display a map

Create and display a map with the basemap layer service.

Display a scene

Display a scene with the basemap layer service.

Add a point, line, and polygon

Access and display point, line, and polygon features from a feature service

Add a feature layer

Access and display point, line, and polygon features from a feature service

Display a web map

Create and display a map from a web map.

Display a web scene

Create and display a scene from a web scene.

Change the basemap layer

Switch a basemap layer from streets to satellite imagery.

Services

Basemap layer service

Access streets, satellite, and other basemap styles for maps and scenes.

API support

	2D Display	3D Display	Basemap layers	Data layers	Graphics	Web maps	Web scenes
ArcGIS JS API	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported
ArcGIS Android API	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported
ArcGIS iOS API	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported
ArcGIS Java API	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported
ArcGIS .NET API	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported
ArcGIS Qt API	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported
ArcGIS Python API	Fully supported	Not supported	Fully supported	Fully supported	Fully supported	Fully supported	Fully supported
Esri Leaflet	Fully supported	Not supported	Fully supported	Feature layer, Image tile layer	Leaflet Layers	Plug-in	Not supported
MapBox GL JS	Fully supported	Not supported	Fully supported	Feature layer, Image tile layer	Mapbox Layers	Not supported	Not supported
OpenLayers	Fully supported	Not supported	Fully supported	Feature layer, Image tile layer	OpenSource Layers	Not supported	Not supported
ArcGIS REST JS	Not supported	Not supported	Direct access and authentication	Direct access and authentication	Not supported	Direct access and authentication	Direct access and authentication

Full supportPartial support (see notes)Not supported

Tools

Map Viewer

Create, explore, and share web maps for 2D applications.

DocumentationMapping APIs and location services

Graphics

Was this page helpful?

Was this page helpful?

Was this page helpful?