Creating SilverStream tooltips

You will often draw many objects on a map. Using tooltips, contextual information can be displayed for objects when the mouse hovers over each object. This tutorial describes how to create and assign tooltips to objects drawn on a map. This tutorial is one of many Telogis SilverStream tutorials.

This tutorial is broken into the following steps:

Create a Visual Studio project
Configure a GeoStream server using C# code
Add a map control and a tooltip layer using XAML code
Use C# cpde to add the shapes to the map and configure the tooltips

Create a Silverlight project and configure a GeoStream server

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

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

Adding a map

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"

In this section we'll add the map and a layer for the tooltips. The layer, "ToolTipLayer", will be a child element of the GeoBase map control. Add the following code to MainPage.xaml:

<GeoBase:Map x:Name="MainMap" Center="35.25,-115.5" Zoom="7">
  <GeoBase:Layer x:Name="ToolTipLayer"></GeoBase:Layer>
</GeoBase:Map>

Supporting C# Code

The C# code is responsible for creating rectangle objects and randomly placing them on the map. It is also responsible for configuring the tooltip for each rectangle.

Background

Each tooltip is configured using the System.Windows.Controls.ToolTipService class in the C# code-behind. For each rectangle, its tooltip dependency property is set using the rectangle's SetValue() method as shown below:

rectObject.SetValue(ToolTipService.ToolTipProperty, String.Format("Tooltip value: ", myTooltip_value));

The position of the tooltip is set using the SetPlacement() method, as shown below:

ToolTipService.SetPlacement(rectObject, PlacementMode.Top);

Implementation

To begin with, add the following using statements to the top of the MainPage.xaml.cs source file.

using System.Windows.Controls.Primitives;
using Telogis.GeoBase;

Add the following properties to the MainPage class:

private List<FrameworkElement> squares = new List<FrameworkElement>();
private Random rand = new Random();
private Layer ttl;

Next, add the following code to the MainPage constructor. This will assign the ToolTipLayer declared in the XAML code to the ttl layer declared in this code. PopulateItems() is then called to create the rectangles. Finally the rectangles are added to the tool tip layer using the Layer.BulkAdd() method.

this.ttl = (Layer)MainMap.FindName("ToolTipLayer");
this.PopulateItems();
this.ttl.BulkAdd(this.squares);

Finally, add the PopulateItems() method which creates the rectangles, sets up the tooltips, and adds each rectangle to the squares list.

private void PopulateItems() {
   for (int i = 0; i < 10; i++) {
      Rectangle marker = new Rectangle() {
         Stroke = new SolidColorBrush(Colors.Black),
         StrokeThickness = 2,
         Width = 25,
         Height = 25,
         Fill = new SolidColorBrush(Colors.Yellow)
      };

       double r = this.rand.NextDouble();
       double t = Math.PI * this.rand.NextDouble() * 2;
       double x, y;
       x = (r * Math.Cos(t)) + 35.25;
       y = (r * Math.Sin(t)) - 115.5;

       LatLon ll = new LatLon(x,y);
       marker.Cursor = Cursors.Hand;
       marker.SetValue(ToolTipService.ToolTipProperty, String.Format("Lat:{0} ,Lon:{1}", x, y));
       ToolTipService.SetPlacement(marker, PlacementMode.Top);
       marker.SetValue(Map.LocationProperty, ll);
       this.squares.Add(marker);
   }
}

Testing

Press F5 to build and run your application. Your default web browser will load a web page displaying a map. Hover the mouse pointer over one of the randomly placed rectangles to see the tooltip display the rectangle's position.

Next step

The next tutorial, SilverStream routing using XAML, demonstrates how to create a route using only XAML code. This quick tutorial will walk you through creating an application with a hard-coded route. Alternatively you can skip ahead to another Telogis SilverStream tutorial.

Published, Jun 28th, 15:34

Tagged under: silverlight markers

Resources