Introducing the Microsoft Virtual Earth Silverlight Map ControlChris PendletonMicrosoft Virtual Earth Technical Evangelist

Agenda

The World As We Know ItDiving Into the VESL Control

How it worksNavigating the mapLeveraging XAML

Getting a mapConfigure the mapplication

Leveraging C#Adding data to the mapAdding media to the mapAccessing Virtual Earth Web Services

How To Get ItQ&A

The World As We Know ItPaper Maps

Not Digital

The World As We Know ItDigital Maps

Not Scaled

The World As We Know ItDigital Static Maps

Not Scrollable

The World As We Know ItAJAX Maps

Not Performant (enough)

The World As We Know ItFlash Maps

Learn Flex/Flash/ActionScript

The World As We Know ItSilverlight Maps

[FIND AND INSERT DOWNSIDE…]

Diving Into the VESL Map ControlNavigating the Map

Silverlight vs. Ajax Map?

Rich, interactive mapping experience – zooming, panningOpens up ability to do things that are not possible with Ajax map such as scaling images and video in a seamless mannerDevelopment environment working with Managed Code and Visual Studio development, debugging tools, unit tests for our developers and our customer developersMicrosoft’s next generation web platformPerformance improvements regarding number of items to render on the map – pushpins (UIElements), polylines, polygons

What is Virtual Earth?How data flows

What is Virtual Earth?How data flows

Virtual Earth Silverlight Map Control"Core" Features

Get / Set Map Mode Road, Aerial, AerialWithLabelsMap Mode is a set of default content layers and projection

Get / Set Map View Zoom level, center, etc.

User Control of Map via Input Devices Mouse, Keyboard / panning, zooming

EventsMap-specific, keyboard, mouse

Viewport Projection Calculations LatLong to Viewport Point, Viewport Point to LatLong, etc.

Layer Support (Position Silverlight UIElements in the LatLong space)Render Fixed-Size UIElements at LatLong (with optional pixel offset) (basic pushpin support)Render Scalable UIElements at a LatLongRectangle (scalable in the X and Y directions) (for video/image overlays, etc.)Render basic Shapes with multiple LatLong geometries (Polylines, Polygons)

Communication with VE Platform Services through WCFImageryRouteSearchGeocoding

Some Key Silverlight ClassesUIElement

The base class for UI objects in Silverlight

PanelThe base class in Silverlight which manages a collection of Children UIElements and their presentation layoutProvides an implementation of 2 Key Silverlight Layout passes: Measure and Arrange

Measure: Compute and return Desired Size of child elements to SilverlightArrange: Arrange your child elements in the specified size

CanvasSilverlight class which is a specialized Panel where elements are never resized Has attached properties Canvas.Left and Canvas.Top to position content relative to Canvas

UserControlSilverlight class designed so you can build your own custom control

Silverlight Map Control Key Classes

Map A Silverlight User Control which represents the map and is the main entry point to using the Silverlight Map Control.Contains properties to set the View and Mode of the map.Contains Children container of UIElements to hold contentContains built in foreground layer including default controls such as Copyright control, Virtual Earth logo, and Scale controlContains Events to register for to subscribe to Map notifications – ViewChangeStart, ViewChangeEnd, ViewChangeOnFrame, ModeChanged, Mouse, Keyboard

MapViewSpecificationDescribes the map view – Center Location (Latitude, Longitude), Heading, Zoom Level

MapModeBase class for all Map ModesMap Mode defines a set of content UIElements (layers) and a Location mathematical projection to position content on the MapLocationToViewportPoint / ViewportPointToLocation – coordinates on screen <-> to LatLong coordinatesWell known map modes include RoadMode, AerialMode, AerialWithLabelsMode

Silverlight Map Control Key Classes (continued…)

MapLayerA Specialized Panel which can position UIElements in the Latitude / Longitude spaceDefines attached properties to position content such as:

MapLayer.MapPosition -- Latitude / Longitude Location to position the UIElement atMapLayer. MapPositionMethod -- What part of the UIElement to position at MapPosition: Center, Top, TopLeft, etc.MapLayer. MapPositionOffset – Screen Pixel offset for MapPositionMapLayer.MapRectangle – Latitude / Longitude rectangle for position scalable content

MapPolygonDerives from MapShapeBase and defines a polygon in the Latitude/Longitude space.Contains a Silverlight Polygon element

MapPolylineDerives from MapShapeBase and defines a polyline in the Latitude/Longitude space.Contains a Silverlight Polyline element

Diving Into the VESL Map ControlLeveraging XAML – Get A Map

Public VirtualEarthSilverlightMap Demo(Awesome){

return multi-imagescalingsickness;}

//demo

Diving Into the VESL Map ControlLeveraging XAML – Get A Map<UserControl x:Class="VirtualEarthSilverlight.Page"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/

presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:m="clr-

namespace:Microsoft.VirtualEarth.MapControl;assembly=Microsoft.VirtualEarth.MapControl">

<Grid x:Name="LayoutRoot" Background="White"> <m:Map/> </Grid></UserControl>

Diving Into the VESL Map ControlLeveraging XAML – Get A Map<UserControl x:Class="VirtualEarthSilverlight.Page"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/

presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:m="clr-

namespace:Microsoft.VirtualEarth.MapControl;assembly=Microsoft.VirtualEarth.MapControl">

<Grid x:Name="LayoutRoot" Background="White"> <m:Map/> </Grid></UserControl>

Diving Into the VESL Map ControlLeveraging XAML – Configuring the Mapplication

Public VirtualEarthSilverlightMap Demo(Awesome){

return multi-imagescalingsickness;}

//demo

Diving Into the VESL Map ControlLeveraging XAML – Configuring the Mapplication<UserControl x:Class="VirtualEarthSilverlight.Page“

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:m="clr-

namespace:Microsoft.VirtualEarth.MapControl;assembly=Microsoft.VirtualEarth.MapControl"><Grid x:Name="LayoutRoot" Background="White">

<m:Map Center="36.12154022795178, -115.16997814178468" Mode="AerialWithLabels"

NavigationVisibility="Visible" ZoomLevel="17" /> </Grid></UserControl>

Diving Into the VESL Map ControlLeveraging XAML – Configuring the Mapplication<UserControl x:Class="VirtualEarthSilverlight.Page“

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:m="clr-

namespace:Microsoft.VirtualEarth.MapControl;assembly=Microsoft.VirtualEarth.MapControl"><Grid x:Name="LayoutRoot" Background="White">

<m:Map Center="36.12154022795178, -115.16997814178468" Mode="AerialWithLabels"

NavigationVisibility="Visible" ZoomLevel="17" /> </Grid></UserControl>

Diving Into the VESL Map ControlLeveraging C# – Adding Data to the Map

public VirtualEarthSilverlightMap DataDemo(){

return businessintelligencemaps;}

//demo

Diving Into the VESL Map ControlLeveraging C# – Adding Data to the Map <m:Map HorizontalAlignment="Stretch"

VerticalAlignment="Stretch" x:Name="MyMap" Grid.Column="1" Grid.Row="0"> <m:Map.Children> <m:MapLayer x:Name="MyLayer"> <m:MapPolygon Fill="Blue" Stroke="Green" StrokeThickness="5" Locations="20,-20 20,20 -20,20 -20,-20" Opacity="0.7" /> </m:MapLayer> </m:Map.Children>

</m:Map>

Diving Into the VESL Map ControlLeveraging C# – Adding Data to the MapLocationCollection points = GetPoints(pointsCount, centerX,

centerY); MapPolygon shape = new MapPolygon(); shape.Locations = points; shape.StrokeThickness = thickness; shape.Stroke = new SolidColorBrush(color); shape.Fill = new SolidColorBrush(fillColor); MyLayer.Children.Add(shape);

Diving Into the VESL Map ControlLeveraging C# – Adding Data to the Mapdouble width = MyMap.ViewportSize.Width * 0.1; LocationCollection points = new LocationCollection();

for (int i = 0; i < count; i++)

{ double j = (double)i / (double)count; points.Add(MyMap.ViewportPointToLocation(

new Point(centerX + Math.Cos(j * 2.0 * Math.PI) * width, centerY + Math.Sin(j * 2.0 * Math.PI) * width))); }

return points;

DEMOLeveraging C# – Adding Data to the Map

DEMOLeveraging C# – Adding Data to the Map

DEMOLeveraging C# – Adding Data to the Map

Diving Into the VESL Map ControlLeveraging C# – Adding Media to the Map

public VirtualEarthSilverlightMap MediaDemo(){

return richmediaonthemap;}

//demo

Diving Into the VESL Map ControlLeveraging C# – Adding Media to the Map<m:Map x:Name="myMap" Grid.Column="0" Grid.Row="0"

Mode="AerialWithLabels"><m:Map.Children>

<m:MapLayer x:Name="myMapLayer"></m:MapLayer>

</m:Map.Children></m:Map>

Diving Into the VESL Map ControlLeveraging C# – Adding Media to the Mapprivate void ChangeMapView(object sender, RoutedEventArgs e){

myMap.View (MapViewSpecification)mapSpecConverter.ConvertFrom(((Button)sender).Tag);pushpin = CreateUIElement();Location pinLocation = myMap.TargetView.Center;PositionMethod position = PositionMethod.Center;myMapLayer.AddChild(pushpin, pinLocation, position);

}

Diving Into the VESL Map ControlLeveraging C# – Adding Media to the Map //Image BrushImageBrush imagebrush = new ImageBrush();imagebrush.AlignmentX = AlignmentX.Center;imagebrush.AlignmentY = AlignmentY.Center;imagebrush.ImageSource = new BitmapImage(new Uri(@"Chris

Pendleton.jpg", UriKind.Relative));imagebrush.Opacity = 1;

Diving Into the VESL Map ControlLeveraging C# – Adding Media to the MapEllipse ellipse = new Ellipse();ellipse.Fill = new SolidColorBrush(Colors.Cyan);ellipse.Opacity = .9;ellipse.Stroke = new SolidColorBrush(Colors.Black);ellipse.Height = 100.00;ellipse.Width = 100.00;

Border border = new Border();border.BorderBrush = new SolidColorBrush(Colors.Black);border.BorderThickness = new Thickness(0);border.Child = ellipse;

return border;

DEMOLeveraging C# – Adding Media to the Map

Diving Into the VESL Map ControlLeveraging C# – Accessing Virtual Earth WS

public VirtualEarthSilverlightMap WCFDemo(){

if(map != clean){

return SOAPonthemap;}

}

Diving Into the VESL Map ControlLeveraging C# – Accessing Virtual Earth WSprivate int geocodesInProgress; private PlatformServices.GeocodeServiceClient geocodeClient; private PlatformServices.GeocodeServiceClient GeocodeClient{ get{ if (null == geocodeClient){ //Handle http/https bool httpsUriScheme =

HtmlPage.Document.DocumentUri.Scheme.Equals(Uri.UriSchemeHttps);

BasicHttpBinding binding = httpsUriScheme ? new BasicHttpBinding(BasicHttpSecurityMode.Transport) : new BasicHttpBinding(BasicHttpSecurityMode.None);

UriBuilder serviceUri = new UriBuilder("http://dev.virtualearth.net/webservices/v1/GeocodeService/GeocodeService.svc");

//Create the Service Client geocodeClient = new PlatformServices.GeocodeServiceClient(binding, new

EndpointAddress(serviceUri.Uri)); geocodeClient.GeocodeCompleted += new

EventHandler<PlatformServices.GeocodeCompletedEventArgs>(client_GeocodeCompleted);

} return geocodeClient; } }

Diving Into the VESL Map ControlLeveraging C# – Accessing Virtual Earth WSprivate void GeocodeAddress(string address){ PlatformServices.GeocodeRequest request = new

PlatformServices.GeocodeRequest(); request.Culture = MyMap.Culture; request.Query = address; request.ExecutionOptions = new PlatformServices.ExecutionOptions(); request.ExecutionOptions.SuppressFaults = true; request.Credentials = PlatformServicesHelper.GetCredentials(); request.Options = new PlatformServices.GeocodeOptions(); // Using ObservableCollection since this is the default for Silverlight proxy

generation. request.Options.Filters = new

ObservableCollection<PlatformServices.FilterBase>(); PlatformServices.ConfidenceFilter filter = new

PlatformServices.ConfidenceFilter(); filter.MinimumConfidence = PlatformServices.Confidence.High;

request.Options.Filters.Add(filter); Output.Text = "< geocoding " + address + " >";geocodesInProgress++; // Make asynchronous call to fetch the data ... pass state object. GeocodeClient.GeocodeAsync(request, address); }

DEMOLeveraging C# – Accessing Virtual Earth WS

/* Demonstrate Microsoft Virtual Earth Silverlight Interactive SDK */

//demo

How To Get It

Library posted on Microsoft Connect(http://connect.microsoft.com)

/VirtualEarthMapControlCTP

Login with Windows Live IDInstall MSI

Includes .DLLIncludes .CHM

Interactive SDK on Connect PortalNo Virtual Earth credentials needed for CTP

Questions?

More Information: www.microsoft.com/virtualearth

Developersdev.live.com/virtualearth

CP’s Blogblogs.msdn.com/virtualearth

Complete MIX Survey

Session ID: T34F

Please Complete an Evaluation FormYour feedback is important!

Evaluation forms can be found on each chairTemp Staff at the back of the room have additional evaluation form copies