Create geometries and graphics from coordinates and add them to a map.
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 tutorial, 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.
Start Visual Studio.
Choose File > New > Project and select the ArcGIS Runtime App template for your chosen platform.
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);
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 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);
Run the app and you should see a point graphic in Griffith Park.
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);
Run the app again and you should also see a line graphic next to Griffith Park.
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);
Run the app again and you should also see the polygon graphic next to Griffith Park.
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.
SimpleMarkerSymbol used in the tutorial using the available styles, and also try rotating it using the properties defined on MarkerSymbol.Instead of using a single graphics overlay for point, line, and polygons, create three of them and add them to map view.