This tutorial demonstrates how to draw polygons over a Silverlight map using C# code. This tutorial is one of many Telogis Silverlight API tutorials.

This tutorial is broken into the following steps:

  1. Create a Visual Studio project
  2. Configure a GeoStream server using C# code
  3. Add a map using XAML code
  4. Draw polygons on the map using C# code

Create a Silverlight project and configure a GeoStream server

Create a new Silverlight project named 'polygons' and add a reference to Telogis.GeoBase.Silverlight.dll. Be sure to configure a GeoStream server.

See the Create a Silverlight-Specific GeoBase project using Visual Studio tutorial for an illustrated walk-through.

Adding user controls

Open MainPage.xaml and add the following attributes to the UserControl tag. These attributes allow your XAML code to access the Telogis.GeoBase namespace.

xmlns:GeoBase="clr-namespace:Telogis.GeoBase;assembly=Telogis.GeoBase.Silverlight"

Copy and paste the following code snippet between the Grid tags. This code creates two grid rows containing:

  1. A map
  2. A label
<Grid.RowDefinitions>
  <RowDefinition Height="400" />
  <RowDefinition Height="20" />
</Grid.RowDefinitions>
<Border BorderBrush="Black" Grid.Row="0" BorderThickness="2">
  <GeoBase:Map x:Name="MainMap" Center="34,-116" Zoom="3"> </GeoBase:Map>
</Border>
<TextBlock Grid.Row="1">Polygon Demo</TextBlock>

Drawing a Polygon

Open MainPage.xaml.cs and add add the following two using directives:

using Telogis.GeoBase;
using Polygon = Telogis.GeoBase.Silverlight.Polygon;

Add the following two member properties to the MainPage class:

// will be filled with points describing the perimeter of a circle
private List<Polygon> polys = new System.Collections.Generic.List<Polygon>();

// used to color our polygons
private List<Color> triangleColors = new List<Color> { 
    Colors.Red, 
    Colors.Purple, 
    Colors.Blue, 
    Colors.Green, 
    Colors.Yellow, 
    Colors.Orange 
};

Modify the MainPage constructor to match the code snippet below. This code snippet calculates the points along the perimeter of a circle, and then creates a series of wedge-shaped polygons from consecutive points along the perimeter of the circle.

Each wedge is drawn on the map using the MainMap.Items.Add(poly) statement. Note that the opacity is set to 50% to prevent the map from being obscured.

public MainPage()
{
    InitializeComponent();
    List<LatLon> circlePoints = new List<LatLon>();

    // create a circle centered on LatLon(34, -116), with a radius of 5 degrees
    for (int i = 0; i <= 360; i += 360 / 40) {
        circlePoints.Add(new LatLon((Math.Sin((i * (Math.PI / 180))) * 5) + 34, (Math.Cos((i * (Math.PI / 180))) * 5) - 116));
    }

    // use the points on the perimeter of the circle (created above) to define
    // a number of wedge-shaped polygons. Each wedge has a color chosen from the
    // triangleColors list.
    for (int i = 1; i < circlePoints.Count; i++) {
        Polygon poly = new Polygon();
        poly.Points.Add(circlePoints[i - 1]); // one corner of the wedge
        poly.Points.Add(new LatLon(34, -116)); // the center of the circle
        poly.Points.Add(circlePoints[i]); // second corner of the wedge
        poly.Fill = new SolidColorBrush(this.triangleColors[i % this.triangleColors.Count]);
        poly.Opacity = .5;
        MainMap.Items.Add(poly);
    }
}

Testing

Press F5 to build and run your application. Your default web browser will load a web page displaying a map with colored polygonal wedges drawn above it.

Note that the shape drawn above the map is not a perfect circle, even though the points used to draw the shape were taken from the perimeter of a circle. This is because GeoBase uses the Mercator projection to draw the map (and objects on the map). The Mercator projection causes some objects to appear distorted.

Next step

The next tutorial, Reverse geocoding using the Silverlight API, demonstrates how to convert a geographic location to a street address. The tutorial will walk you through the creation of a simple application that will display the street address of the location beneath the mouse cursor. Alternatively you can skip ahead to another Telogis Silverlight API tutorial.

Published, Apr 6th 2011, 03:36

Tagged under: silverlight