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

  1. 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

  1. 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

  1. 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);
    
  2. Run the app and you should see a point graphic in Griffith Park.

Add a polyline graphic

  1. 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);
    
  2. Run the app again and you should also see a line graphic next to Griffith Park.

Add a polygon graphic

  1. 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);
    
  2. 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.

Challenge

Add graphics with different symbols and styles

  1. Add a composite symbol: Composite symbols are simply a combination of two or more symbols. Change the polygon graphic in the lab to use a composite symbol.
  2. Add a text symbol: Text symbols are used to display text for graphics and features. Add text symbols for the line graphic used in the lab.
  3. Change the marker symbol: Use a different shape (for example a square) for the SimpleMarkerSymbol used in the lab using the available styles, and also try rotating it using the properties defined on MarkerSymbol.

Add multiple graphics overlays

Instead of using a single graphics overlay for point, line, and polygons, create three of them and add them to map view.