Symbols JSON

This sample demonstrates techniques for converting symbols, such as SimpleMarkerSymbol, PictureMarkerSymbol, and PictureFillSymbol to and from ArcGIS JSON. ArcGIS JSON symbols are defined as part of the ArcGIS Server REST API specification: http://help.arcgis.com/en/arcgisserver/10.0/apis/rest/symbol.html.

Different predefined symbols in the ArcGIS JSON format are provided. Use the Sample JSON buttons to populate the textbox with the ArcGIS JSON representation of a symbol. Feel free to modify the JSON content appropriately and apply to the appropriate graphic in the map. One graphic to represent a point, a line, and a polygon are present in the graphics layer. Marker symbols will only apply to the point, line symbols to the line, and fill symbols to the polygon. Tabs along the bottom of the sample will display the current JSON symbol applied to the point, line, and polygon.

JSON generated from standard symbols in the ESRI.ArcGIS.Client.Symbols namespace will include a __type parameter, which merely indicates the standard symbol class from which it was serialized. Symbols in the ESRI.ArcGIS.Client.FeatureService.Symbols namespace are direct representations of the ArcGIS JSON symbol definitions.

XAML

<UserControl x:Class="ArcGISWPFSDK.SymbolJson"
  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" Margin="5,0,0,0">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <LinearGradientBrush x:Key="PanelGradient" EndPoint="0.5,1" StartPoint="0.5,0">
                <LinearGradientBrush.RelativeTransform>
                    <TransformGroup>
                        <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                        <SkewTransform CenterY="0.5" CenterX="0.5"/>
                        <RotateTransform Angle="176" CenterY="0.5" CenterX="0.5"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </LinearGradientBrush.RelativeTransform>
                <GradientStop Color="#FF145787" Offset="0.16"/>
                <GradientStop Color="#FF3D7FAC" Offset="0.502"/>
                <GradientStop Color="#FF88C5EF" Offset="0.984"/>
            </LinearGradientBrush>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="60" />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <esri:Map x:Name="MyMap" Extent="-16574645.619,-5541958.774,13341035.686,10559275.713" Grid.Column="0" Grid.Row="0" Grid.RowSpan="4">
            <esri:ArcGISTiledMapServiceLayer Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>
            <esri:GraphicsLayer ID="MyGraphicsLayer" Initialized="GraphicsLayer_Initialized">
                <esri:GraphicsLayer.Graphics>
                    <esri:Graphic>
                        <esri:Polygon>
                            <esri:Polygon.Rings>
                                <esri:PointCollection>
                                    <esri:MapPoint X="-50.039" Y="-10.303" />
                                    <esri:MapPoint X="-62.539" Y="3.0137" />
                                    <esri:MapPoint X="-83.281" Y="-3.923" />
                                    <esri:MapPoint X="-102.773" Y="-25.174" />
                                    <esri:MapPoint X="-73.594" Y="-33.180" />
                                    <esri:MapPoint X="-51.797" Y="-26.032" />
                                    <esri:MapPoint X="-50.039" Y="-10.303" />
                                </esri:PointCollection>
                            </esri:Polygon.Rings>
                        </esri:Polygon>
                        <esri:Graphic.Symbol>
                            <esri:SimpleFillSymbol Fill="#660000FF" BorderBrush="Blue" BorderThickness="1" />
                        </esri:Graphic.Symbol>
                    </esri:Graphic>
                    <esri:Graphic>
                        <esri:Polyline >
                            <esri:Polyline.Paths>
                                <esri:PointCollection>
                                    <esri:MapPoint X="0" Y="51.399" />
                                    <esri:MapPoint X="2.637" Y="48.865" />
                                    <esri:MapPoint X="12.568" Y="41.706" />
                                    <esri:MapPoint X="13.447" Y="52.483" />
                                    <esri:MapPoint X="21.357" Y="52.160" />
                                    <esri:MapPoint X="30.322" Y="59.845" />
                                </esri:PointCollection>
                            </esri:Polyline.Paths>
                        </esri:Polyline>
                        <esri:Graphic.Symbol>
                            <esri:SimpleLineSymbol Color="Blue" Width="3" />
                        </esri:Graphic.Symbol>
                    </esri:Graphic>
                    <esri:Graphic>
                        <esri:MapPoint X="-100" Y="35" />
                        <esri:Graphic.Symbol>
                            <esri:SimpleMarkerSymbol Color="Blue" Style="Diamond" Size="10" />
                        </esri:Graphic.Symbol>
                    </esri:Graphic>
                </esri:GraphicsLayer.Graphics>
            </esri:GraphicsLayer>
        </esri:Map>

        <StackPanel Orientation="Horizontal" Grid.Column="1" Margin="5" Grid.Row="0">
            <Button Content="Apply" Width="70" Click="Button_Load" Margin="2"  
                    HorizontalAlignment="Left"/>
            <StackPanel Orientation="Vertical" Margin="5,0,0,0" Background="LightGray">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Sample JSON" FontWeight="Bold" 
                        Width="120" Margin="2" Foreground="Black" />
                    <Button Content="Simple Marker Symbol" Click="Button_SMS" 
                        Width="125" Margin="2" />
                    <Button Content="Picture Marker Symbol" Click="Button_PMS" 
                        Width="125" Margin="2" />
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Content="Simple Line Symbol" Click="Button_SLS" 
                        Width="120" Margin="2" />
                    <Button Content="Simple Fill Symbol" Click="Button_SFS" 
                        Width="120" Margin="2" />
                    <Button Content="Picture Fill Symbol" Click="Button_PFS" 
                        Width="120" Margin="2" />
                </StackPanel>
            </StackPanel>
        </StackPanel>

        <ScrollViewer Grid.Column="1" Grid.Row="1">
            <TextBox x:Name="JsonTextBox" FontSize="12" TextWrapping="Wrap" AcceptsReturn="True" />
        </ScrollViewer>

        <TabControl Margin="5" Grid.Column="1" Grid.Row="2" Background="White" VerticalAlignment="Stretch">
            <TabItem Header="Current Marker Symbol" >
                <ScrollViewer Grid.Row="3" Margin="5,0,5,5">
                    <TextBox x:Name="JsonTextBoxMarkerCurrent" FontSize="12" IsReadOnly="True" TextWrapping="Wrap" />
                </ScrollViewer>
            </TabItem>
            <TabItem Header="Current Line Symbol" >
                <ScrollViewer Grid.Row="3" Margin="5,0,5,5">
                    <TextBox x:Name="JsonTextBoxLineCurrent" FontSize="12" IsReadOnly="True" TextWrapping="Wrap" />
                </ScrollViewer>
            </TabItem>
            <TabItem Header="Current Fill Symbol" >
                <ScrollViewer Grid.Row="3" Margin="5,0,5,5">
                    <TextBox x:Name="JsonTextBoxFillCurrent" FontSize="12" IsReadOnly="True" TextWrapping="Wrap" />
                </ScrollViewer>
            </TabItem>
        </TabControl>

    </Grid>
</UserControl>

C#

using System;
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 SymbolJson : UserControl
    {
        private static ESRI.ArcGIS.Client.Projection.WebMercator _mercator =
                new ESRI.ArcGIS.Client.Projection.WebMercator();

        public SymbolJson()
        {
            InitializeComponent();
            Button_SMS(null, null);
        }

        private void GraphicsLayer_Initialized(object sender, EventArgs e)
        {
            GraphicsLayer graphicsLayer = sender as GraphicsLayer;
            foreach (Graphic g in graphicsLayer.Graphics)
            {
                g.Geometry = _mercator.FromGeographic(g.Geometry);

                if (g.Geometry is Polygon || g.Geometry is Envelope)
                    JsonTextBoxFillCurrent.Text = (g.Symbol as IJsonSerializable).ToJson();
                else if (g.Geometry is Polyline)
                    JsonTextBoxLineCurrent.Text = (g.Symbol as IJsonSerializable).ToJson();
                else
                    JsonTextBoxMarkerCurrent.Text = (g.Symbol as IJsonSerializable).ToJson();

                g.PropertyChanged += g_PropertyChanged;
            }
        }

        void g_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "Symbol")
            {
                Graphic g = sender as Graphic;
                if (g.Geometry is Polygon || g.Geometry is Envelope)
                    JsonTextBoxFillCurrent.Text = (g.Symbol as IJsonSerializable).ToJson();
                else if (g.Geometry is Polyline)
                    JsonTextBoxLineCurrent.Text = (g.Symbol as IJsonSerializable).ToJson();
                else
                    JsonTextBoxMarkerCurrent.Text = (g.Symbol as IJsonSerializable).ToJson();
            }
        }

        private void Button_Load(object sender, RoutedEventArgs e)
        {
            try
            {
                Symbol symbol = Symbol.FromJson(JsonTextBox.Text);

                GraphicsLayer graphicsLayer = MyMap.Layers["MyGraphicsLayer"] as GraphicsLayer;

                foreach (Graphic g in graphicsLayer.Graphics)
                {
                    if ((g.Geometry is Polygon || g.Geometry is Envelope) && symbol is FillSymbol)
                        g.Symbol = symbol;
                    else if (g.Geometry is Polyline && symbol is LineSymbol)
                        g.Symbol = symbol;
                    else if (g.Geometry is MapPoint && symbol is MarkerSymbol)
                        g.Symbol = symbol;
                }
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message, "Deserializing JSON failed", MessageBoxButton.OK);
            }
        }

        private void Button_SMS(object sender, RoutedEventArgs e)
        {
            string jsonString = @"{
    \""type\"": \""esriSMS\"",
    \""style\"": \""esriSMSSquare\"",
    \""color\"": [76,115,0,255],
    \""size\"": 8,
    \""angle\"": 0,
    \""xoffset\"": 0,
    \""yoffset\"": 0,
    \""outline\"": 
    {
        \""color\"": [152,230,0,255],
        \""width\"": 1
    }
}
";
            JsonTextBox.Text = jsonString.Replace("\\", "");
        }

        private void Button_PMS(object sender, RoutedEventArgs e)
        {
            string jsonString = @"{
    \""type\"" : \""esriPMS\"", 
    \""url\"" : \""http://static.arcgis.com/images/Symbols/Basic/GreenStickpin.png\"", 
    \""contentType\"" : \""image/png\"", 
    \""color\"" : null, 
    \""width\"" : 28, 
    \""height\"" : 28, 
    \""angle\"" : 0, 
    \""xoffset\"" : 0, 
    \""yoffset\"" : 0
}
";
            JsonTextBox.Text = jsonString.Replace("\\", "");
        }

        private void Button_SLS(object sender, RoutedEventArgs e)
        {
            string jsonString = @"{
    \""type\"": \""esriSLS\"",
    \""style\"": \""esriSLSDot\"",
    \""color\"": [115,76,0,255],
    \""width\"": 2
}
";
            JsonTextBox.Text = jsonString.Replace("\\", "");
        }

        private void Button_SFS(object sender, RoutedEventArgs e)
        {
            string jsonString = @"{
    \""type\"": \""esriSFS\"",
    \""style\"": \""esriSFSSolid\"",
    \""color\"": [250,76,0,150],
    \""outline\"": 
    {
        \""type\"": \""esriSLS\"",
        \""style\"": \""esriSLSSolid\"",
        \""color\"": [110,110,110,255],
        \""width\"": 2
    }
}
";
            JsonTextBox.Text = jsonString.Replace("\\", "");
        }

        private void Button_PFS(object sender, RoutedEventArgs e)
        {
            string jsonString = @"{
    \""type\"" : \""esriPFS\"", 
    \""url\"" : \""http://static.arcgis.com/images/Symbols/Transportation/AmberBeacon.png\"", 
    \""contentType\"" : \""image/png\"", 
    \""color\"" : null, 
    \""outline\"" : 
    {
        \""type\"" : \""esriSLS\"", 
        \""style\"" : \""esriSLSSolid\"", 
        \""color\"" : [110,110,110,255], 
        \""width\"" : 1
    }, 
    \""width\"" : 12, 
    \""height\"" : 12, 
    \""angle\"" : 0, 
    \""xoffset\"" : 0, 
    \""yoffset\"" : 0, 
    \""xscale\"" : 1, 
    \""yscale\"" : 1
  }

";
            JsonTextBox.Text = jsonString.Replace("\\", "");
        }
    }
}

VB.NET

Imports System.Windows
Imports System.Windows.Controls
Imports ESRI.ArcGIS.Client
Imports ESRI.ArcGIS.Client.Geometry
Imports ESRI.ArcGIS.Client.Symbols

Namespace ArcGISWPFSDK
    Partial Public Class SymbolJson
        Inherits UserControl
        Private Shared _mercator As New ESRI.ArcGIS.Client.Projection.WebMercator()

        Public Sub New()
            InitializeComponent()
            Button_SMS(Nothing, Nothing)
        End Sub

        Private Sub GraphicsLayer_Initialized(sender As Object, e As EventArgs)
            Dim graphicsLayer As GraphicsLayer = TryCast(sender, GraphicsLayer)
            For Each g As Graphic In graphicsLayer.Graphics
                g.Geometry = _mercator.FromGeographic(g.Geometry)

                If TypeOf g.Geometry Is Polygon OrElse TypeOf g.Geometry Is Envelope Then
                    JsonTextBoxFillCurrent.Text = TryCast(g.Symbol, IJsonSerializable).ToJson()
                ElseIf TypeOf g.Geometry Is Polyline Then
                    JsonTextBoxLineCurrent.Text = TryCast(g.Symbol, IJsonSerializable).ToJson()
                Else
                    JsonTextBoxMarkerCurrent.Text = TryCast(g.Symbol, IJsonSerializable).ToJson()
                End If

                AddHandler g.PropertyChanged, AddressOf g_PropertyChanged
            Next
        End Sub

        Private Sub g_PropertyChanged(sender As Object, e As System.ComponentModel.PropertyChangedEventArgs)
            If e.PropertyName = "Symbol" Then
                Dim g As Graphic = TryCast(sender, Graphic)
                If TypeOf g.Geometry Is Polygon OrElse TypeOf g.Geometry Is Envelope Then
                    JsonTextBoxFillCurrent.Text = TryCast(g.Symbol, IJsonSerializable).ToJson()
                ElseIf TypeOf g.Geometry Is Polyline Then
                    JsonTextBoxLineCurrent.Text = TryCast(g.Symbol, IJsonSerializable).ToJson()
                Else
                    JsonTextBoxMarkerCurrent.Text = TryCast(g.Symbol, IJsonSerializable).ToJson()
                End If
            End If
        End Sub

        Private Sub Button_Load(sender As Object, e As RoutedEventArgs)
            Try
                Dim symbol__1 As Symbol = Symbol.FromJson(JsonTextBox.Text)

                Dim graphicsLayer As GraphicsLayer = TryCast(MyMap.Layers("MyGraphicsLayer"), GraphicsLayer)

                For Each g As Graphic In graphicsLayer.Graphics
                    If (TypeOf g.Geometry Is Polygon OrElse TypeOf g.Geometry Is Envelope) AndAlso TypeOf symbol__1 Is FillSymbol Then
                        g.Symbol = symbol__1
                    ElseIf TypeOf g.Geometry Is Polyline AndAlso TypeOf symbol__1 Is LineSymbol Then
                        g.Symbol = symbol__1
                    ElseIf TypeOf g.Geometry Is MapPoint AndAlso TypeOf symbol__1 Is MarkerSymbol Then
                        g.Symbol = symbol__1
                    End If
                Next
            Catch ex As Exception
                MessageBox.Show(ex.Message, "Deserializing JSON failed", MessageBoxButton.OK)
            End Try
        End Sub

        Private Sub Button_SMS(sender As Object, e As RoutedEventArgs)
            Dim jsonString As String = "{" & vbCr & vbLf & "    \""type\"": \""esriSMS\""," & vbCr & vbLf & "    \""style\"": \""esriSMSSquare\""," & vbCr & vbLf & "    \""color\"": [76,115,0,255]," & vbCr & vbLf & "    \""size\"": 8," & vbCr & vbLf & "    \""angle\"": 0," & vbCr & vbLf & "    \""xoffset\"": 0," & vbCr & vbLf & "    \""yoffset\"": 0," & vbCr & vbLf & "    \""outline\"": " & vbCr & vbLf & "    {" & vbCr & vbLf & "        \""color\"": [152,230,0,255]," & vbCr & vbLf & "        \""width\"": 1" & vbCr & vbLf & "    }" & vbCr & vbLf & "}" & vbCr & vbLf
            JsonTextBox.Text = jsonString.Replace("\", "")
        End Sub

        Private Sub Button_PMS(sender As Object, e As RoutedEventArgs)
            Dim jsonString As String = "{" & vbCr & vbLf & "    \""type\"" : \""esriPMS\"", " & vbCr & vbLf & "    \""url\"" : \""http://static.arcgis.com/images/Symbols/Basic/GreenStickpin.png\"", " & vbCr & vbLf & "    \""contentType\"" : \""image/png\"", " & vbCr & vbLf & "    \""color\"" : null, " & vbCr & vbLf & "    \""width\"" : 28, " & vbCr & vbLf & "    \""height\"" : 28, " & vbCr & vbLf & "    \""angle\"" : 0, " & vbCr & vbLf & "    \""xoffset\"" : 0, " & vbCr & vbLf & "    \""yoffset\"" : 0" & vbCr & vbLf & "}" & vbCr & vbLf
            JsonTextBox.Text = jsonString.Replace("\", "")
        End Sub

        Private Sub Button_SLS(sender As Object, e As RoutedEventArgs)
            Dim jsonString As String = "{" & vbCr & vbLf & "    \""type\"": \""esriSLS\""," & vbCr & vbLf & "    \""style\"": \""esriSLSDot\""," & vbCr & vbLf & "    \""color\"": [115,76,0,255]," & vbCr & vbLf & "    \""width\"": 2" & vbCr & vbLf & "}" & vbCr & vbLf
            JsonTextBox.Text = jsonString.Replace("\", "")
        End Sub

        Private Sub Button_SFS(sender As Object, e As RoutedEventArgs)
            Dim jsonString As String = "{" & vbCr & vbLf & "    \""type\"": \""esriSFS\""," & vbCr & vbLf & "    \""style\"": \""esriSFSSolid\""," & vbCr & vbLf & "    \""color\"": [250,76,0,150]," & vbCr & vbLf & "    \""outline\"": " & vbCr & vbLf & "    {" & vbCr & vbLf & "        \""type\"": \""esriSLS\""," & vbCr & vbLf & "        \""style\"": \""esriSLSSolid\""," & vbCr & vbLf & "        \""color\"": [110,110,110,255]," & vbCr & vbLf & "        \""width\"": 2" & vbCr & vbLf & "    }" & vbCr & vbLf & "}" & vbCr & vbLf
            JsonTextBox.Text = jsonString.Replace("\", "")
        End Sub

        Private Sub Button_PFS(sender As Object, e As RoutedEventArgs)
            Dim jsonString As String = "{" & vbCr & vbLf & "    \""type\"" : \""esriPFS\"", " & vbCr & vbLf & "    \""url\"" : \""http://static.arcgis.com/images/Symbols/Transportation/AmberBeacon.png\"", " & vbCr & vbLf & "    \""contentType\"" : \""image/png\"", " & vbCr & vbLf & "    \""color\"" : null, " & vbCr & vbLf & "    \""outline\"" : " & vbCr & vbLf & "    {" & vbCr & vbLf & "        \""type\"" : \""esriSLS\"", " & vbCr & vbLf & "        \""style\"" : \""esriSLSSolid\"", " & vbCr & vbLf & "        \""color\"" : [110,110,110,255], " & vbCr & vbLf & "        \""width\"" : 1" & vbCr & vbLf & "    }, " & vbCr & vbLf & "    \""width\"" : 12, " & vbCr & vbLf & "    \""height\"" : 12, " & vbCr & vbLf & "    \""angle\"" : 0, " & vbCr & vbLf & "    \""xoffset\"" : 0, " & vbCr & vbLf & "    \""yoffset\"" : 0, " & vbCr & vbLf & "    \""xscale\"" : 1, " & vbCr & vbLf & "    \""yscale\"" : 1" & vbCr & vbLf & "  }" & vbCr & vbLf & vbCr & vbLf
            JsonTextBox.Text = jsonString.Replace("\", "")
        End Sub
    End Class
End Namespace