The Silverlight API supports the display of high-resolution satellite imagery providing visual information not availabe in traditional maps, such as vegetation, topographical features and obstacles on commercial properties. This tutorial will demonstrate how to show satellite imagery. This tutorial is one of many Telogis Silverlight API tutorials.

Each Map tag in XAML has a Satellite attribute. If this attribute is set to true the map will be created with satellite imagery turned on. This tutorial also shows how to control the display of satellite imagery at runtime by toggling the Map object's Satellite property in C# code.

This guide is broken into the following steps:

  1. Create a Visual Studio project
  2. Configure a GeoStream server using C# code
  3. Add a satellite map using XAML code
  4. Toggle satellite imagery on a mouse click using C# code

Create a Silverlight project and configure a GeoStream server

Make sure that the file clientaccesspolicy.xml exists in your Inetpub\wwwroot directory.  Create a new Silverlight project named 'SatelliteMap' and add a reference to Telogis.GeoBase.Silverlight.dll. Be sure to configure a GeoStream server.

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

Add a satellite map

Open MainPage.xaml and add the following attribute to the UserControl tag. This attribute allows your XAML code to access the Telogis.GeoBase namespace.

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

Modify the code between the Grid tags to match the code snippet below. This code creates a map, approximately centered on California and displaying satellite imagery.

The MouseLeftButtonDown, MouseMove and MouseLeftButtonUp attributes point to C# methods which will be called when the corresponding Map events fire. We will use a combination of the these three events to toggle satellite mode on and off when the user clicks the mouse button. The MouseMove event is used to distinguish between when the user is panning the map and when the user is simply clicking the map. We will not toggle satellite imagery when the user is panning the map.

<Grid x:Name="LayoutRoot">

  <GeoBase:Map x:Name="MainMap"
    Center="36,-122"
    Satellite="True"
    Zoom="4"
    MouseLeftButtonDown="MainMap_MouseLeftButtonDown"
    MouseMove="MainMap_MouseMove"
    MouseLeftButtonUp="MainMap_MouseLeftButtonUp">
  </GeoBase:Map>

</Grid>

Toggling satellite imagery

Open MainPage.xaml.cs and add append the following code snippet to the MainPage class.

When the user clicks the map using the left mouse button the shouldtoggle flag is set to true. If the user starts to pan the map (detected on a MouseMove event) the shouldtoggle flag will be reset and satellite imagery will not be toggled when the mouse button is released.

bool shouldtoggle;

private void MainMap_MouseLeftButtonDown(object o, EventArgs e) {
  shouldtoggle = true;
}

private void MainMap_MouseMove(object o, EventArgs e) {
  shouldtoggle = false;
}

private void MainMap_MouseLeftButtonUp(object o, EventArgs e) {
  if (shouldtoggle) MainMap.Satellite = !MainMap.Satellite;
}

Testing

Press F5 to build and run your application. Your default web browser will load a web page displaying a map. You may pan and zoom around the map as normal, but if you click the mouse button the map will toggle satellite imagery on and off.

Next step

The next tutorial, Drawing on a Silverlight map, demonstrates how to draw arbitrary shapes on a map, using either predefined map coordinates or the mouse cursor. Alternatively you can skip ahead to another Telogis Silverlight API tutorial.

Published, Apr 6th 2011, 02:59

Tagged under: silverlight satellite imagery maps