Using a Draw surface
A Draw surface is an interactive surface that provides a simple way to draw on a Map. The Draw surface allows you to easily capture geometries that are drawn by users of your application. Once you retrieve these geometries, you can add them to a Graphics layer or use them as input for other operations such as identify or buffer. To use a Draw surface in your application, you must:
- Set the Symbols for the Draw operations.
- Set the Draw surface's map.
- Implement logic to activate and deactivate the surface.
- Process the geometries that are drawn on the surface.
Creating an application with a Draw surface
The following steps will walk you through creating a simple application with a Draw surface. The application will allows users to draw polygons on a map.
- Create an ArcGIS API for Windows Phone application with a Map, GraphicsLayer, and SimpleFillSymbol, as described in the topics Creating a map, Creating a graphics layer, and Managing graphic features.
Your ContentGrid XAML should look as follows:
<esri:Map x:Name="MyMap" Extent="-120, 20, -100, 40"> <esri:Map.Layers> <esri:ArcGISTiledMapServiceLayer ID="StreetMapLayer" Url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"> </esri:ArcGISTiledMapServiceLayer> <esri:GraphicsLayer ID="MyGraphicsLayer"/> </esri:Map.Layers> </esri:Map>
Also add a SimpleFillSymbol as a resource in your LayoutRoot Grid with the following XAML:
<Grid.Resources> <esriSymbols:SimpleFillSymbol x:Name="RedFillSymbol" Fill="#66FF0000" BorderBrush="Red" BorderThickness="2" /> </Grid.Resources>
Note:
- Don't forget to add references to the ESRI.ArcGIS.Client and System.Runtime.Serialization assemblies to your project.
- Make sure you include XML namespace references for both the ESRI.ArcGIS.Client and ESRI.ArcGIS.Client.Symbols namespaces in the ESRI.ArcGIS.Client assembly as attributes on the phone:PhoneApplicationPage element.
xmlns:esri="clr-namespace:ESRI.ArcGIS.Client;assembly=ESRI.ArcGIS.Client" xmlns:esriSymbols="clr-namespace:ESRI.ArcGIS.Client.Symbols;assembly=ESRI.ArcGIS.Client"
- Also add a blue fill symbol, so that you can see how the symbol used on the Draw surface and that used in the GraphicsLayer differ.
<Grid.Resources> <esriSymbols:SimpleFillSymbol x:Name="RedFillSymbol" Fill="#66FF0000" BorderBrush="Red" BorderThickness="2" /> <esriSymbols:SimpleFillSymbol x:Name="BlueFillSymbol" Fill="#660000FF" BorderBrush="Blue" BorderThickness="2" /> </Grid.Resources>
- Open the code-behind and add using statements for ESRI.ArcGIS.Client and ESRI.ArcGIS.Client.Symbols.
using ESRI.ArcGIS.Client; using ESRI.ArcGIS.Client.Symbols;
- In the Page constructor create a new Draw object. Include the Map name in the Draw constructor.
Draw MyDrawObject = new Draw(MyMap);
- Specify the surface's DefaultPolygonSymbol property to be the RedFillSymbol object defined in the Grid's resources. This sets the symbol that will be used to show polygons while they are being drawn.
Draw MyDrawObject = new Draw(MyMap) { FillSymbol = LayoutRoot.Resources["RedFillSymbol"] as FillSymbol };
- Declare a handler for the surface's OnDrawComplete event. This event fires whenever a user finishes drawing a shape on the surface.
Draw MyDrawObject = new Draw(MyMap) { FillSymbol = LayoutRoot.Resources["RedFillSymbol"] as FillSymbol }; MyDrawObject.DrawComplete += MyDrawObject_DrawComplete;
- Activate the Draw surface by specifying a DrawMode and setting IsEnabled to true. Usually activation of a Draw surface is initiated by a user event (e.g. button click). When the Draw surface is active, click events will result in geometries being drawn on the Map. The DrawMode determines the type of geometry that will be drawn.
MyDrawObject.DrawMode = DrawMode.Polygon; MyDrawObject.IsEnabled = true;
- Implement a handler for the Draw surface's OnDrawComplete event. This handler will be called whenever the user is done drawing a polygon. The handler's args parameter holds a reference to the user-drawn geometry.
private void MyDrawObject_OnDrawComplete(object sender, ESRI.ArcGIS.Client.DrawEventArgs args) { }
- Create a Graphic. Assign the Graphic the geometry drawn by the user and the blue SimpleFillSymbol specified in the application's XAML.
private void MyDrawObject_OnDrawComplete(object sender, ESRI.ArcGIS.Client.DrawEventArgs args) { Graphic graphic = new Graphic() { Geometry = args.Geometry, Symbol = BlueFillSymbol }; }
- Retrieve the GraphicsLayer that is specified in the application's XAML.
private void MyDrawObject_OnDrawComplete(object sender, ESRI.ArcGIS.Client.DrawEventArgs args) { Graphic graphic = new Graphic() { Geometry = args.Geometry, Symbol = BlueFillSymbol }; GraphicsLayer graphicsLayer = MyMap.Layers["MyGraphicsLayer"] as GraphicsLayer; }
- Add the Graphic to the GraphicsLayer. This will display the Graphic on the Map, as the Draw surface is cleared and ready for additional user drawing.
private void MyDrawObject_OnDrawComplete(object sender, ESRI.ArcGIS.Client.DrawEventArgs args) { Graphic graphic = new Graphic() { Geometry = args.Geometry, Symbol = BlueFillSymbol }; GraphicsLayer graphicsLayer = MyMap.Layers["MyGraphicsLayer"] as GraphicsLayer; graphicsLayer.Graphics.Add(graphic); }
Enabling and disabling the Draw surface
While the application created above has a Draw surface that is always enabled, many applications will have a Draw surface that is only enabled during certain operations or states. In that case, the Draw surface will need to be enabled and disabled over the life of the application. As shown in the example above, the Draw surface is enabled by setting the IsEnabled property to true, and specifying a DrawMode.
MyDrawObject.DrawMode = DrawMode.Polygon;
MyDrawObject.IsEnabled = true;
Disabling the Draw surface is done by setting the DrawMode to None and the IsEnabled property to false.
MyDrawObject.DrawMode = DrawMode.None;
MyDrawObject.IsEnabled = false;
Drawing different geometries
In the application above, the Draw surface is used to draw polygons. To do this, a SimpleFillSymbol was bound to the Draw surface's FillSymbol property and a DrawMode of Polygon was used. The relationships between Symbol types and Draw surface properties for all the supported geometry types are summarized in the table below.
Draw Mode | Supported Symbol Types | Bound Property |
---|---|---|
Point | none | none |
Polyline | CartographicLineSymbol | LineSymbol |
Polygon | SimpleFillSymbol | PolygonSymbol |
Rectangle | SimpleFillSymbol | PolygonSymbol |
Freehand | CartographicLineSymbol | LineSymbol |
As shown in the table above, while there is a Point draw mode, no symbol types are supported, and there is no property to use to customize the point symbol used on a Draw surface. The properties and symbolizations are for use while interacting with the Draw surface. In Point mode, there is no intermediate display before the Draw event is completed. The points are just captured from the Draw surface and then processed, often being added to a GraphicsLayer (as shown with the polygons in the above example). In this case, the symbols (SimpleMarkerSymbol, TextSymbol, or PictureMarkerSymbol) are set as the symbol for the graphic added to the GraphicsLayer, and not on the Draw surface used to generate their geometries.