Display point, line, and polygon graphics

Overview

You will learn: how to create geometries and graphics from coordinates and add them to a map.

With the ArcGIS Runtime SDK for .NET it's easy to add graphics to the MapView that represent geographic features. Graphics always live in their own container (graphics overlay) and are commonly positioned on top of all of the other layers. They have a single geometry type (point, line, or polygon) and a unique symbol style. Graphics can be created interactively by listening for mouse or touch events or manually by providing the map coordinates.

In this lab, you will build a simple app that creates point, line, and polygon graphics and then displays them using a graphic overlay. The graphics will be created directly from latitude and longitude coordinates.

Steps

Create a new ArcGIS Runtime App Visual Studio Project

1. Start Visual Studio.

2. Choose File > New > Project and select the ArcGIS Runtime App template for your chosen platform.

Change map initial viewpoint

3. Notice the Map property in MapViewModel.cs. The way it is currently defined, it will show you the entire world. Change it so it zooms to an area near Griffith Park in Los Angeles.

   private Map _map = new Map(BasemapType.Streets, 34.05293, -118.24368, 11);
   

Add a graphics overlay to the map view

4. Before you can add graphics to the map you need to create a place to store them. A graphics overlay is a container for temporary graphics to display on your map view. In your MainWindow.xaml file, create a GraphicsOverlay and add it to your MapView.

   <esri:MapView.GraphicsOverlays>
      <esri:GraphicsOverlay x:Name="MapGraphics"/>
   </esri:MapView.GraphicsOverlays>
   

Add a point graphic

5. Add a point graphic to the map. Create a point geometry and marker symbol and then assign these to the graphic. Then add the graphic to the graphics overlay. Add the following code after the InitializeComponent() method in the MainWindow.xaml.cs

   //Create a point geometry
   var point = new MapPoint(-118.29507, 34.13501, SpatialReferences.Wgs84);
   
   //Create point symbol with outline
   var pointSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbolStyle.Circle, Color.FromRgb(226, 119, 40), 10);
   pointSymbol.Outline = new SimpleLineSymbol(SimpleLineSymbolStyle.Solid, Color.FromRgb(0, 0, 255), 2);
   
   //Create point graphic with geometry & symbol
   var pointGraphic = new Graphic(point, pointSymbol);
   
   //Add point graphic to graphic overlay
   MapGraphics.Graphics.Add(pointGraphic);
   

6. Run the app and you should see a point graphic in Griffith Park.

Add a polyline graphic

7. Create a line geometry and line symbol and then assign these to the graphic. Add the graphic to the graphics overlay. Add the following code after the code you added in the previous step.

   //Create polyline geometry
   var polylinePoints = new Esri.ArcGISRuntime.Geometry.PointCollection(SpatialReferences.Wgs84);
   polylinePoints.Add(new MapPoint(-118.29026, 34.1816));
   polylinePoints.Add(new MapPoint(-118.26451, 34.09664));
   var polyline = new Polyline(polylinePoints);
   
   //Create symbol for polyline
   var polylineSymbol = new SimpleLineSymbol(SimpleLineSymbolStyle.Solid, Color.FromRgb(0, 0, 255), 3);
   
   //Create a polyline graphic with geometry and symbol
   var polylineGraphic = new Graphic(polyline, polylineSymbol);
   
   //Add polyline to graphics overlay
   MapGraphics.Graphics.Add(polylineGraphic);
   

8. Run the app again and you should also see a line graphic next to Griffith Park.

Add a polygon graphic

9. Create a polygon geometry and fill symbol and then assign these to a polygon graphic. Add the graphic to the graphics overlay. Add the following code after the code you added in the previous step.

   //Create polygon geometry
   var polygonPoints = new Esri.ArcGISRuntime.Geometry.PointCollection(SpatialReferences.Wgs84);
   polygonPoints.Add(new MapPoint(-118.27653, 34.15121));
   polygonPoints.Add(new MapPoint(-118.24460, 34.15462));
   polygonPoints.Add(new MapPoint(-118.22915, 34.14439));
   polygonPoints.Add(new MapPoint(-118.23327, 34.12279));
   polygonPoints.Add(new MapPoint(-118.25318, 34.10972));
   polygonPoints.Add(new MapPoint(-118.26486, 34.11625));
   polygonPoints.Add(new MapPoint(-118.27653, 34.15121));
   var polygon = new Polygon(polygonPoints);
   
   //Create symbol for polygon with outline
   var polygonSymbol = new SimpleFillSymbol(SimpleFillSymbolStyle.Solid, Color.FromRgb(226, 119, 40),
    new SimpleLineSymbol(SimpleLineSymbolStyle.Solid, Color.FromRgb(0, 0, 255), 2));
   
   //Create polygon graphic with geometry and symbol
   Graphic polygonGraphic = new Graphic(polygon, polygonSymbol);
   
   //Add polygon graphic to graphics overlay
   MapGraphics.Graphics.Add(polygonGraphic);
   

10. Run the app again and you should also see the polygon graphic next to Griffith Park.

Congratulations, you're done!

Your map should show Griffiths Park in Los Angeles, with three graphics (a point, a line, and a polygon), over a vector basemap.

Check out and compare with our completed solution project.

Next labs

Search for an address

Find addresses and places with the ArcGIS World Geocoding Service.

15 minutes Start Lab

Get a route and directions

Find the optimal route and directions for multiple stops with the ArcGIS Route service.

20 minutes Start Lab

Get a route and directions (offline)

Find the optimal route and directions offline for multiple stops with the ArcGIS Online Network Analytics Route service and StreetMap Premium.

30 minutes Start Lab

Add layers to a map (offline)

Load a basemap and feature layers from a mobile map package (.mmpk) file.

15 minutes Start Lab

Challenge

Add graphics with different symbols and styles

Add multiple graphics overlays