Geometry JSON Online

This sample demonstrates techniques for converting managed Geometry, such as MapPoint, Polyline, and Polygon to and from ArcGIS JSON. ArcGIS JSON geometry is defined as part of the ArcGIS Server REST API specification: http://resources.arcgis.com/en/help/rest/apiref/geometry.html. Use the buttons at the top of "From JSON" tab to populate the textbox on the tab with predefined geometry JSON. Feel free to modify the JSON content appropriately and add or update a graphic in the map with new geometry. Use the "To JSON" tab to add a graphic to the map that references MapPoint, Polyline, Polygon, or Envelope geometry. JSON for the geometry of the graphic added to the map will be displayed. Note, only one graphic is displayed in the map at a time. Switching between tabs will clear all graphics layers in the map.

XAML

<UserControl x:Class="ArcGISWPFSDK.GeometryJson"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <esri:SimpleMarkerSymbol x:Key="RedMarkerSymbol" Color="Red" Size="12" Style="Circle" />
            <esri:SimpleLineSymbol x:Key="RedLineSymbol" Color="Red" Width="4" Style="Solid" />
            <esri:SimpleFillSymbol x:Key="RedFillSymbol" Fill="#66FF0000" BorderBrush="Red" BorderThickness="2" />
            <esri:SimpleMarkerSymbol x:Key="BlueMarkerSymbol" Color="Blue" Size="12" Style="Circle" />
            <esri:SimpleLineSymbol x:Key="BlueLineSymbol" Color="Blue" Width="4" Style="Solid" />
            <esri:SimpleFillSymbol x:Key="BlueFillSymbol" Fill="#660000FF" BorderBrush="Blue" BorderThickness="2" />
            <esri:SimpleLineSymbol x:Key="DrawLineSymbol" Color="Green" Width="4" />
            <esri:SimpleFillSymbol x:Key="DrawFillSymbol" Fill="#3300FF00" BorderBrush="Green" BorderThickness="2" />
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <esri:Map x:Name="MyMap" UseAcceleratedDisplay="True"  WrapAround="True" Grid.Column="0">
            <esri:ArcGISTiledMapServiceLayer ID="TiledLayer" 
                Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer" />
            <esri:GraphicsLayer ID="MyToJsonGraphicsLayer" />
            <esri:GraphicsLayer ID="MyFromJsonGraphicsLayer" />
        </esri:Map>
        <TabControl Margin="5" Grid.Column="1" Background="White" VerticalAlignment="Stretch" 
                        SelectionChanged="TabControl_SelectionChanged">
            <TabItem Header="From JSON">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50" />
                        <RowDefinition />
                        <RowDefinition Height="40" />
                    </Grid.RowDefinitions>
                    <StackPanel Grid.Row="0" Orientation="Vertical" Margin="5" Background="LightGray">
                        <TextBlock Text="Sample JSON" FontWeight="Bold" Margin="2" />
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                            <Button Content="Point" Width="80" Margin="2" Click="PointJsonButton_Click" />
                            <Button Content="Polyline" Width="80" Margin="2" Click="PolylineJsonButton_Click" />
                            <Button Content="Polygon" Width="80" Margin="2" Click="PolygonJsonButton_Click" />
                            <Button Content="Envelope" Width="80" Margin="2" Click="EnvelopeJsonButton_Click" />
                        </StackPanel>
                    </StackPanel>
                    <ScrollViewer Grid.Row="1">
                        <TextBox x:Name="InJsonTextBox" FontSize="12" TextWrapping="Wrap" />
                    </ScrollViewer>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Grid.Row="2">
                        <Button Content="Create Geometry from JSON" Margin="5" Width="150" Click="ApplyButton_Click"  />
                        <Button Content="Reset" Margin="5" Width="150" Click="ResetButton_Click" />
                    </StackPanel>
                </Grid>
            </TabItem>
            <TabItem Header="To JSON">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                        <StackPanel Orientation="Vertical">
                            <StackPanel Orientation="Horizontal" >
                                <Button Content="Add Point" Width="80" Margin="2" Click="DrawGeometryButton_Click" Tag="DrawPoint" />
                                <Button Content="Add Polyline" Width="80" Margin="2" Click="DrawGeometryButton_Click" Tag="DrawPolyline" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal" >
                                <Button Content="Add Polygon" Width="80" Margin="2" Click="DrawGeometryButton_Click" Tag="DrawPolygon" />
                                <Button Content="Add Envelope" Width="80" Margin="2" Click="DrawGeometryButton_Click" Tag="DrawRectangle" />
                            </StackPanel>
                        </StackPanel>
                        <Button Content="Reset" Margin="5" Width="150" Click="ResetButton_Click" />
                    </StackPanel>
                    <ScrollViewer Grid.Row="1">
                        <TextBox x:Name="OutJsonTextBox" TextWrapping="Wrap" IsReadOnly="True" />
                    </ScrollViewer>
                </Grid>
            </TabItem>
        </TabControl>
    </Grid>
</UserControl>

C#

using System.Windows;
using System.Windows.Controls;
using ESRI.ArcGIS.Client;
using ESRI.ArcGIS.Client.Geometry;
using ESRI.ArcGIS.Client.Symbols;

namespace ArcGISWPFSDK
{
    public partial class GeometryJson : UserControl
    {
        GraphicsLayer _myToJsonGraphicsLayer;
        GraphicsLayer _myFromJsonGraphicsLayer;
        Draw _myDrawObject;

        string jsonPoint = @"{""x"":-100.609,""y"":43.729,""spatialReference"":{""wkid"":4326}}";

        string jsonPolyline = @"{""paths"":[[[0,51.399],
[2.637,48.865],
[12.568,41.706],
[13.447,52.483],
[21.357,52.160],
[30.322,59.845]]],
""spatialReference"":{""wkid"":4326}}";

        string jsonPolygon = @"{""rings"":[[[110.039,-20.303],
[132.539,-7.0137],
[153.281,-13.923],
[162.773,-35.174],
[133.594,-43.180],
[111.797,-36.032],
[110.039,-20.303]]],
""spatialReference"":{""wkid"":4326}}";

        string jsonEnvelope = @"{""xmin"" : -109.55, ""ymin"" : 25.76, 
""xmax"" : -86.39, ""ymax"" : 49.94,
""spatialReference"" : {""wkid"" : 4326}}";

        public GeometryJson()
        {
            InitializeComponent();

            _myFromJsonGraphicsLayer = MyMap.Layers["MyFromJsonGraphicsLayer"] as GraphicsLayer;
            _myToJsonGraphicsLayer = MyMap.Layers["MyToJsonGraphicsLayer"] as GraphicsLayer;
            InJsonTextBox.Text = jsonPoint;

            _myDrawObject = new Draw(MyMap)
            {
                LineSymbol = LayoutRoot.Resources["DrawLineSymbol"] as LineSymbol,
                FillSymbol = LayoutRoot.Resources["DrawFillSymbol"] as FillSymbol
            };
            _myDrawObject.DrawComplete += MyDrawObject_DrawComplete;
        }

        private void ResetButton_Click(object sender, RoutedEventArgs e)
        {
            ClearGraphicsLayers();
            InJsonTextBox.Text = "";
            OutJsonTextBox.Text = "";
        }

        private void PointJsonButton_Click(object sender, RoutedEventArgs e)
        {
            ClearGraphicsLayers();
            InJsonTextBox.Text = jsonPoint;
        }

        private void PolylineJsonButton_Click(object sender, RoutedEventArgs e)
        {
            ClearGraphicsLayers();
            InJsonTextBox.Text = jsonPolyline;
        }

        private void PolygonJsonButton_Click(object sender, RoutedEventArgs e)
        {
            ClearGraphicsLayers();
            InJsonTextBox.Text = jsonPolygon;
        }

        private void EnvelopeJsonButton_Click(object sender, RoutedEventArgs e)
        {
            ClearGraphicsLayers();
            InJsonTextBox.Text = jsonEnvelope;
        }

        private void ClearGraphicsLayers()
        {
            _myToJsonGraphicsLayer.Graphics.Clear();
            _myFromJsonGraphicsLayer.Graphics.Clear();
        }

        private void ApplyButton_Click(object sender, RoutedEventArgs e)
        {
            ClearGraphicsLayers();
            OutJsonTextBox.Text = "";

            try
            {
                // Convert from Geometry to ArcGIS REST geometry json
                Geometry geometry = Geometry.FromJson(InJsonTextBox.Text);

                Graphic graphic = new Graphic();

                if (geometry is MapPoint)
                    graphic.Symbol = LayoutRoot.Resources["RedMarkerSymbol"] as SimpleMarkerSymbol;
                else if (geometry is Polyline)
                    graphic.Symbol = LayoutRoot.Resources["RedLineSymbol"] as SimpleLineSymbol;
                else if (geometry is Polygon)
                    graphic.Symbol = LayoutRoot.Resources["RedFillSymbol"] as SimpleFillSymbol;
                else if (geometry is Envelope)
                    graphic.Symbol = LayoutRoot.Resources["RedFillSymbol"] as SimpleFillSymbol;

                if (graphic.Symbol != null)
                {
                    graphic.Geometry = geometry;
                    _myFromJsonGraphicsLayer.Graphics.Add(graphic);
                }
            }
            catch
            {
                MessageBox.Show("Unable to convert json into geometry");
            }
        }

        private void DrawGeometryButton_Click(object sender, RoutedEventArgs e)
        {
            ClearGraphicsLayers();
            OutJsonTextBox.Text = "";

            switch ((sender as Button).Tag as string)
            {
                case "DrawPoint":
                    _myDrawObject.DrawMode = DrawMode.Point;
                    break;
                case "DrawPolyline":
                    _myDrawObject.DrawMode = DrawMode.Polyline;
                    break;
                case "DrawPolygon":
                    _myDrawObject.DrawMode = DrawMode.Polygon;
                    break;
                case "DrawRectangle":
                    _myDrawObject.DrawMode = DrawMode.Rectangle;
                    break;
                default:
                    _myDrawObject.DrawMode = DrawMode.None;
                    ClearGraphicsLayers();
                    break;
            }
            _myDrawObject.IsEnabled = (_myDrawObject.DrawMode != DrawMode.None);
        }

        private void MyDrawObject_DrawComplete(object sender, ESRI.ArcGIS.Client.DrawEventArgs args)
        {
            ClearGraphicsLayers();

            Graphic graphic = new Graphic();
            if (args.Geometry is MapPoint)
                graphic.Symbol = LayoutRoot.Resources["BlueMarkerSymbol"] as SimpleMarkerSymbol;
            else if (args.Geometry is Polyline)
                graphic.Symbol = LayoutRoot.Resources["BlueLineSymbol"] as SimpleLineSymbol;
            else if (args.Geometry is Polygon)
                graphic.Symbol = LayoutRoot.Resources["BlueFillSymbol"] as SimpleFillSymbol;
            else if (args.Geometry is Envelope)
                graphic.Symbol = LayoutRoot.Resources["BlueFillSymbol"] as SimpleFillSymbol;

            if (graphic.Symbol != null)
            {
                graphic.Geometry = args.Geometry;
                _myToJsonGraphicsLayer.Graphics.Add(graphic);
            }

            // Convert from Geometry to ArcGIS REST geometry json
            OutJsonTextBox.Text = args.Geometry.ToJson();
        }

        private void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (_myFromJsonGraphicsLayer != null || _myToJsonGraphicsLayer != null)
            {
                ClearGraphicsLayers();
                OutJsonTextBox.Text = "";
            }
            else
                return;

            if ((((sender as TabControl).SelectedItem as TabItem).Header as string) == "From JSON")
                _myDrawObject.IsEnabled = false;
        }
    }
}

VB.NET

Imports System.Windows
Imports ESRI.ArcGIS.Client
Imports Microsoft.VisualBasic
Imports System
Imports System.Text
Imports System.Windows.Controls
Imports ESRI.ArcGIS.Client.Geometry
Imports ESRI.ArcGIS.Client.Symbols


Namespace ArcGISWPFSDK
    Partial Public Class GeometryJson
        Inherits UserControl
        Private _myToJsonGraphicsLayer As GraphicsLayer
        Private _myFromJsonGraphicsLayer As GraphicsLayer
        Private _myDrawObject As Draw
        Private jsonPoint As String = "{""x"":-100.609,""y"":43.729,""spatialReference"":{""wkid"":4326}}"

        Private jsonPolyline As String = "{""paths"":[[[0,51.399]," &
            ControlChars.CrLf & "[2.637,48.865]," &
            ControlChars.CrLf & "[12.568,41.706]," &
            ControlChars.CrLf & "[13.447,52.483]," &
            ControlChars.CrLf & "[21.357,52.160]," &
            ControlChars.CrLf & "[30.322,59.845]]]," &
            ControlChars.CrLf & """spatialReference"":{""wkid"":4326}}"

        Private jsonPolygon As String = "{""rings"":[[[110.039,-20.303]," &
            ControlChars.CrLf & "[132.539,-7.0137]," &
            ControlChars.CrLf & "[153.281,-13.923]," &
            ControlChars.CrLf & "[162.773,-35.174]," &
            ControlChars.CrLf & "[133.594,-43.180]," &
            ControlChars.CrLf & "[111.797,-36.032]," &
            ControlChars.CrLf & "[110.039,-20.303]]]," &
            ControlChars.CrLf & """spatialReference"":{""wkid"":4326}}"

        Private jsonEnvelope As String = "{""xmin"" : -109.55, ""ymin"" : 25.76, " &
            ControlChars.CrLf & """xmax"" : -86.39, ""ymax"" : 49.94," &
            ControlChars.CrLf & """spatialReference"" : {""wkid"" : 4326}}"
        Public Sub New()
            InitializeComponent()

            _myFromJsonGraphicsLayer = TryCast(MyMap.Layers("MyFromJsonGraphicsLayer"), GraphicsLayer)
            _myToJsonGraphicsLayer = TryCast(MyMap.Layers("MyToJsonGraphicsLayer"), GraphicsLayer)
            InJsonTextBox.Text = jsonPoint

            _myDrawObject = New Draw(MyMap) With {.LineSymbol = TryCast(LayoutRoot.Resources("DrawLineSymbol"), LineSymbol), .FillSymbol = TryCast(LayoutRoot.Resources("DrawFillSymbol"), FillSymbol)}
            AddHandler _myDrawObject.DrawComplete, AddressOf MyDrawObject_DrawComplete
        End Sub

        Private Sub ResetButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            ClearGraphicsLayers()
            InJsonTextBox.Text = ""
            OutJsonTextBox.Text = ""
        End Sub

        Private Sub PointJsonButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            ClearGraphicsLayers()
            InJsonTextBox.Text = jsonPoint
        End Sub

        Private Sub PolylineJsonButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            ClearGraphicsLayers()
            InJsonTextBox.Text = jsonPolyline
        End Sub

        Private Sub PolygonJsonButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            ClearGraphicsLayers()
            InJsonTextBox.Text = jsonPolygon
        End Sub

        Private Sub EnvelopeJsonButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            ClearGraphicsLayers()
            InJsonTextBox.Text = jsonEnvelope
        End Sub

        Private Sub ClearGraphicsLayers()
            _myToJsonGraphicsLayer.Graphics.Clear()
            _myFromJsonGraphicsLayer.Graphics.Clear()
        End Sub

        Private Sub ApplyButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            ClearGraphicsLayers()
            OutJsonTextBox.Text = ""

            Try
                ' Convert from Geometry to ArcGIS REST geometry json
                Dim geometry As Geometry = geometry.FromJson(InJsonTextBox.Text)

                Dim graphic As New Graphic()

                If TypeOf geometry Is MapPoint Then
                    graphic.Symbol = TryCast(LayoutRoot.Resources("RedMarkerSymbol"), SimpleMarkerSymbol)
                ElseIf TypeOf geometry Is Polyline Then
                    graphic.Symbol = TryCast(LayoutRoot.Resources("RedLineSymbol"), SimpleLineSymbol)
                ElseIf TypeOf geometry Is Polygon Then
                    graphic.Symbol = TryCast(LayoutRoot.Resources("RedFillSymbol"), SimpleFillSymbol)
                ElseIf TypeOf geometry Is Envelope Then
                    graphic.Symbol = TryCast(LayoutRoot.Resources("RedFillSymbol"), SimpleFillSymbol)
                End If

                If graphic.Symbol IsNot Nothing Then
                    graphic.Geometry = geometry
                    _myFromJsonGraphicsLayer.Graphics.Add(graphic)
                End If
            Catch
                MessageBox.Show("Unable to convert json into geometry")
            End Try
        End Sub

        Private Sub DrawGeometryButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            ClearGraphicsLayers()
            OutJsonTextBox.Text = ""

            Select Case TryCast((TryCast(sender, Button)).Tag, String)
                Case "DrawPoint"
                    _myDrawObject.DrawMode = DrawMode.Point
                Case "DrawPolyline"
                    _myDrawObject.DrawMode = DrawMode.Polyline
                Case "DrawPolygon"
                    _myDrawObject.DrawMode = DrawMode.Polygon
                Case "DrawRectangle"
                    _myDrawObject.DrawMode = DrawMode.Rectangle
                Case Else
                    _myDrawObject.DrawMode = DrawMode.None
                    ClearGraphicsLayers()
            End Select
            _myDrawObject.IsEnabled = (_myDrawObject.DrawMode <> DrawMode.None)
        End Sub

        Private Sub MyDrawObject_DrawComplete(ByVal sender As Object, ByVal args As ESRI.ArcGIS.Client.DrawEventArgs)
            ClearGraphicsLayers()

            Dim graphic As New Graphic()
            If TypeOf args.Geometry Is MapPoint Then
                graphic.Symbol = TryCast(LayoutRoot.Resources("BlueMarkerSymbol"), SimpleMarkerSymbol)
            ElseIf TypeOf args.Geometry Is Polyline Then
                graphic.Symbol = TryCast(LayoutRoot.Resources("BlueLineSymbol"), SimpleLineSymbol)
            ElseIf TypeOf args.Geometry Is Polygon Then
                graphic.Symbol = TryCast(LayoutRoot.Resources("BlueFillSymbol"), SimpleFillSymbol)
            ElseIf TypeOf args.Geometry Is Envelope Then
                graphic.Symbol = TryCast(LayoutRoot.Resources("BlueFillSymbol"), SimpleFillSymbol)
            End If

            If graphic.Symbol IsNot Nothing Then
                graphic.Geometry = args.Geometry
                _myToJsonGraphicsLayer.Graphics.Add(graphic)
            End If

            ' Convert from Geometry to ArcGIS REST geometry json
            OutJsonTextBox.Text = args.Geometry.ToJson()
        End Sub

        Private Sub TabControl_SelectionChanged(ByVal sender As Object, ByVal e As SelectionChangedEventArgs)
            If _myFromJsonGraphicsLayer IsNot Nothing OrElse _myToJsonGraphicsLayer IsNot Nothing Then
                ClearGraphicsLayers()
                OutJsonTextBox.Text = ""
            Else
                Return
            End If

            If (TryCast((TryCast((TryCast(sender, TabControl)).SelectedItem, TabItem)).Header, String)) = "From JSON" Then
                _myDrawObject.IsEnabled = False
            End If
        End Sub
    End Class
End Namespace