Displaying SilverStream map information
You may find it useful to display information about the map (such as the coordinates of the current mouse location, zoom scales and pending tile requests). This tutorial demonstrates how to retrieve and display such information. This tutorial is one of many Telogis SilverStream tutorials.
This tutorial will demonstrate how to display GeoStream information in an application using both XAML and C# code.
Using C# code we will find:
- Mouse latitude/longitude - the geographical coordinates of mouse cursor's position
- Mouse X,Y - the screen coordinates of the mouse cursor's position
- GeoStream server version
Using XAML code we will find:
- Map center - the latitude, longitude coordinates of the center of the map
- Zoom level - how far the map is currently zoomed-in
- Meters per pixel - the number of meters represented by each pixel
- Current tile requests - the number of tiles not yet received from the server
This tutorial is broken into the following four steps:
- Create a Visual Studio project
- Configure a GeoStream server using C# code
- Add a map, and text boxes using XAML code
- Add supporting 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 'MapInfoTutorial' and add a reference to Telogis.GeoBase.SilverStream.dll. Configure a GeoStream server.
See the Create a SilverStream-Specific Visual Studio Project tutorial for an illustrated walk-through.
Add user controls
Open MainPage.xaml and add the following attributes to the UserControl tag. These attributes allow your XAML code to access the local namespace (MapInfoTutorial) and the Telogis.GeoBase namespace.
xmlns:Local="clr-namespace:MapInfoTutorial" xmlns:GeoBase="clr-namespace:Telogis.GeoBase;assembly=Telogis.GeoBase.Silverlight"
The following code snippets should be placed between the Grid tags.
We'll begin by creating the rows, and adding the map to row 0:
<Grid.RowDefinitions> <RowDefinition Height="400" /> <RowDefinition Height="20" /> <RowDefinition Height="20" /> <RowDefinition Height="20" /> <RowDefinition Height="20" /> <RowDefinition Height="20" /> <RowDefinition Height="20" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Border BorderBrush="Black" Grid.Row="0" BorderThickness="2"> <GeoBase:Map x:Name="MainMap" Center="36,-122" Zoom="4" MouseMove="MainMap_MouseMove" /> </Border>
Next, we'll add the text boxes to row 2. Copy and paste the following code:
<StackPanel Orientation="Horizontal" Grid.Row="1">
<Border BorderBrush="Black" BorderThickness="1">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="2,0,0,0">Map Center:</TextBlock>
<TextBlock Margin="5,0,5,0" Text="{Binding Center, ElementName=MainMap}" />
</StackPanel>
</Border>
<Border BorderBrush="Black" BorderThickness="1">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="2,0,0,0">Zoom:</TextBlock>
<TextBlock Margin="5,0,5,0" Text="{Binding Zoom, ElementName=MainMap}" />
</StackPanel>
</Border>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="2">
<Border BorderBrush="Black" BorderThickness="1">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="2,0,0,0">Mouse Latitude, Longitude:</TextBlock>
<TextBlock Margin="5,0,5,0" x:Name="tbMouseLatLon" />
</StackPanel>
</Border>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="3">
<Border BorderBrush="Black" BorderThickness="1">
<StackPanel Orientation="Horizontal" Width="135">
<TextBlock Margin="2,0,0,0">Mouse X,Y:</TextBlock>
<TextBlock Margin="5,0,5,0" x:Name="tbMouseXY" />
</StackPanel>
</Border>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="4">
<Border BorderBrush="Black" BorderThickness="1">
<StackPanel Orientation="Horizontal" Width="250">
<TextBlock Margin="2,0,0,0">Meters Per Pixel:</TextBlock>
<TextBlock Margin="5,0,5,0" x:Name="tbMetersPerPixel" Text="{Binding PixelSizeMeters, ElementName=MainMap}" />
</StackPanel>
</Border>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="5">
<Border BorderBrush="Black" BorderThickness="1">
<StackPanel Orientation="Horizontal" Width="160">
<TextBlock Margin="2,0,0,0">Current Tile Requests:</TextBlock>
<TextBlock Margin="5,0,5,0" x:Name="tbTileRequests" Text="{Binding TileRequests, ElementName=MainMap}" />
</StackPanel>
</Border>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="6">
<Border BorderBrush="Black" BorderThickness="1">
<StackPanel Orientation="Horizontal" Width="300">
<TextBlock Margin="2,0,0,0">GeoStream Server Version:</TextBlock>
<TextBlock Margin="5,0,5,0" x:Name="tbServerVersion" />
</StackPanel>
</Border>
</StackPanel>
C# Code
In this section we'll add the C# code-behind. This is simply the event handler for MainMap_MouseMove. The event handler is responsible for displaying the following attributes:
- Mouse lat/lon - tbMouseLatLon
- Mouse XY coordinates - tbMouseXY
- GeoStream server version - tbServerVersion
Open MainPage.xaml.cs and add the following using statement:
using Telogis.GeoBase;
Inside the MainPage class insert the following code:
private void MainMap_MouseMove(object sender, MouseEventArgs e)
{
//Get mouse lat/lon
LatLon mouseLoc = MainMap.XYOverlaytoLatLon(e.GetPosition(MainMap));
//Get mouse screen coords
Point mouseXY = MainMap.LatLonToXYOverlay(mouseLoc);
//Update mouse lat/lon
tbMouseLatLon.Text = mouseLoc.ToString();
//Update mouse coords
tbMouseXY.Text = mouseXY.ToString();
//Display GeoStream server version
tbServerVersion.Text = Settings.GeoStreamVersion;
}
Testing
Press F5 to build and run your application. Your default web browser will load a web page displaying a map and the text boxes.
Next step
The next tutorial, Forward geocoding (performing an address search) using SilverStream, demonstrates how to pinpoint an address on a map. Alternatively you can skip ahead to another Telogis SilverStream tutorial.
Tagged under: silverlight maps