Ricky's Bing Maps Blog: August, 2009

Ricky's profileRicky's Bing Maps BlogBlogSkyDrive

Tools

Help

Blog

Summary

Listed by:

<< First < Previous Next > Last >>

8/26/2009

Fix: Bing Maps Mouse Wheel Bug in Firefox 3.5

Currently Firefox 3.5 is not supported by Bing Maps although there are only minor issues. One issue is that if your page is scrollable and you use the mouse wheel to zoom in or out of the map the page will also scroll. This is not very good for the user experience. After some investigation I have put together the following workaround to correct this issue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

6:02 AM | Permalink | Blog it | VE Basics

8/16/2009

Determine if a location has Birdseye Imagery

fRecently I was asked how to determine if a specific area on the map has Birdseye imagery. There are several ways to do this using the AJAX control or the Web Service of Bing Maps. However, one of the clients requirements was to be able to determine this before loading a map and without having to create a web service. With this requirement it is not possible to use the built in imagery metadata functionality of the map. There is not supported method to determine if a location has Birdseye imagery without loading a map and without using the Bing Maps Web Services, however it can be done. In the series of blog posts I made called “Birdseye Imagery Extraction via the Virtual Earth Web Services” I described a method to retrieve Birdseye scene information from a background service that is used by the AJAX control. By extending some of the undocumented functionalities of the we can access this backend service through the AJAX control without loading a map. This backend service takes in an array of VEParameter objects. These parameters mush include the latitude, longitude, zoom level, spin direction, and orientation of a Birdseye request. By hard coding the zoom level to 19, the spin direction to “No Spin” and the orientation to “North” we have the highest chance of getting an accurate response as this is the most common Birdseye imagery setting. Once we have created this array we can pass it along with the URL of the backend service, and a callback function into a method called JSONRequestInvoke. In that callback the response contains a property called Scene. If this property is null then Birdseye imagery is not available for the specified location otherwise it does. Below is a basic HTML page that shows how to do this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
    <title>Birdseye Imagery Query</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
    <script>
    var BEURL = "http://dev.virtualearth.net/services/v1/ImageryMetadataService/ImageryMetadataService.asmx/GetBirdsEyeSceneByLocation";
    function CheckBirdseye()
    {
        var lat = document.getElementById("lat").value;
        var lng = document.getElementById("lng").value;
        RequestBirdseyeMetadata(parseFloat(lat),parseFloat(lng));
    }
    function RequestBirdseyeMetadata(lat,lng)
    {
        var params = [];
        params.push(new VEParameter("latitude",lat));
        params.push(new VEParameter("longitude",lng));
        params.push(new VEParameter("level",19));
        params.push(new VEParameter("spinDirection","\"NoSpin\""));
        params.push(new VEParameter("orientation","\"North\""));
        JSONRequestInvoke(BEURL, params, BirdseyeMetadataCallback);
    }
    function BirdseyeMetadataCallback(response)
    {
        if(response.Scene != null)
        {
            alert("There is Birdseye Imagery at this location");
        }
        else
        {
            alert("No Birdseye Imagery at this location");
        }
    }
    </script>
</head>
<body>
    Latitude: <INPUT id="lat" type="text"><br/>
    Longitude: <INPUT id="lng" type="text"><br/>
    <INPUT type="button" value="Check for Birdseye Imagery" onclick="CheckBirdseye();">
</body>
</html>

6:50 AM | Permalink | Blog it | VE Basics

8/1/2009

VE Silverlight Control – Pushpins, Infoboxes, and Best Map View

The Virtual Earth/Bing Silverlight control CTP release was announced at MIX09. Since this control is still in CTP there are a lot of desired functionalities that have not made it in yet. Currently polygon and polyline shapes are built into the control but pushpins are not. This was by design as it is pretty easy to create your own user control on the map to be used as a pushpin. Not all of the functionalities that are in the AJAX control made have been added to the CTP control. In particular the ability to get the best map view for an array of points, or a common infobox class. This article will show how to create a basic pushpin, create an infobox and how to implement the best map view functionality that I put together here: http://rbrundritt.spaces.live.com/blog/cns!E7DBA9A4BFD458C5!943.entry

Basic Pushpin

To create a basic pushpin we will add in the more common properties of the pushpin object that’s in the AJAX control such as, title, description, and LatLong. We will also have properties to specify the pushpin image source, a reference to the map, and an offset that will be used to offset the position of the infobox from the center of the pushpin. to get started we will create our pushpin xaml. A MouseLeftButtonDown event will be added to the pushpin. This event will be used to display the infobox.

For the Pushpin class we will have to create the properties that we want the user to be able to set. The following is used to define the properties of the pushpin class.

private Map _map;
private Location _latlong;
private string _title;
private string _description;
private int _offset = 0;

public Map MapInstance
{
get { return _map; }
set { _map = value; }
}

public ImageSource ImageSource
{
get { return PinImage.Source; }
set { PinImage.Source = value; }
}

public Location LatLong
{
get { return _latlong; }
set { _latlong = value; }
}

public string Title
{
get {return _title;}
set { _title = value; }
}

public string Description
{
get { return _description; }
set { _description = value; }
}

public int Offset
{
get { return _offset; }
set { _offset = value; }
}

The PinClicked methoded that gets fired when a user clicks on a pushpin is used to populate the infobox information. There are several ways for the infobox to be created. To reduce the number of user control instances that are created a single infobox can be used and it’s contents updated depending on which pushpin you clicked on. This will make a significant performance difference when there are a lot of pushpins on the map. The PinClicked method will set the infobox title and discription properties and will make it visible. The infobox Position, PositionMethod, and PositionOffset properties will also be set. The PinClicked method looks like this:

private void PinClicked(object sender, MouseEventArgs e)
{
    //Ensure there is content to be displayed before modifying the infobox control
    if (!String.IsNullOrEmpty(_title) || !String.IsNullOrEmpty(_description))
    {
        Border infobox = (Border)_map.FindName("Infobox");
        TextBlock infoboxTitle = (TextBlock)_map.FindName("InfoboxTitle");
        TextBlock infoboxContent = (TextBlock)_map.FindName("InfoboxDescription");

infoboxTitle.Text = _title;
infoboxContent.Text = _description;

infobox.Visibility = Visibility.Visible;

PositionMethod position = VESilverlightTools.GetInfoboxPositionMethod(_latlong, _map);
Point offset = VESilverlightTools.GetInfoboxOffset(_latlong, _map, _offset);

        MapLayer.SetMapPosition(infobox, _latlong);
        MapLayer.SetMapPositionMethod(infobox, position);
        MapLayer.SetMapPositionOffset(infobox, offset);
    }
}

Now that we have our Pushpin UserControl made we can now have to create a method to add these pushpins to the map. In the Page.xaml.cs file we can add the following method to add a pushpin to the map:

public void AddPushpin(Location latlong, string title, string description, MapLayer layer)
{
    Pushpin pushpin = new Pushpin
    {
        ImageSource = new BitmapImage(new Uri("pin.png", UriKind.Relative)),
        MapInstance = map,
        LatLong = latlong,
        Title = title,
        Description = description,
        Offset = 15
    };

layer.AddChild(pushpin, latlong, PositionMethod.Center);

}

For simplicity one icon is used for all pushpins. This can be easily modified so that you can use a different icon for each pushpin. Also, I’ve hard coded in an offset value of 15. This value is used to offset the position of the infobox a certain number of pixels away from the center of the pin.

Now that we have a way to add our pushpins to the map the following can be used to add your pushpins:

MapLayer pinLayer = new MapLayer();
pinLayer = (MapLayer)map.FindName("PinLayer");
AddPushpin(new Location(43.647038, -79.3952), “My Title”, “My Description”, pinLayer);

Note that you will need to add a MapLayer to the Page.xaml file like so:

<MapControl:MapLayer x:Name="PinLayer">
</MapControl:MapLayer>

Infobox control

Adding an infobox to the map is similar to adding a pushpin to the map. However, simply displaying an infobox on the map is not enough, ideally we will have logic that will know what direction to display the infobox relative to the pushpin and where it is on the map. The infobox should be displayed towards the middle of the map so that there will be less of a chance of the infobox being displayed off the page. Also, as mentioned above having one infobox and updating it’s properties is will lead to better performance than creating a separate infobox user control for each pushpin. Additionally we will want to add the infobox to a map layer that is above the pushpin layer so that the infobox will be displayed above the pushpins. To get start the following xaml will be added to the map:

<MapControl:MapLayer>
    <Border x:Name="Infobox" MinHeight="100" MaxHeight="200" Width="300"
            MapControl:MapLayer.MapPosition="0,0"
            Background="Black"
            Opacity="0.9"
            BorderBrush="White"
            BorderThickness="2"
            CornerRadius="5"
            Visibility="Collapsed">
        <StackPanel>
            <Grid>
                <Button Click="CloseInfobox_Click" Tag="Close" Margin="5" Background="Black" HorizontalAlignment="Right" VerticalAlignment="Top">
                    <TextBlock>X</TextBlock>
                </Button>
                <TextBlock x:Name="InfoboxTitle" Foreground="#1cff1c" FontSize="12" Padding="5" Width="280" TextWrapping="Wrap" Grid.Row="0" HorizontalAlignment="Left" />
            </Grid>
            <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" MaxHeight="150">
                   <TextBlock x:Name="InfoboxDescription" Foreground="#1cff1c" FontSize="10" Padding="5" Width="265" TextWrapping="Wrap" Height="Auto" Grid.Row="1" />
            </ScrollViewer>
        </StackPanel>
    </Border>
</MapControl:MapLayer>

This xaml that is used to create the infobox description area is set up so that if the content causes the infobox to grow to it’s max height of 200 pixels a verticle scrollbar appears. The infobox has an close button that calls a method called CloseInfobox when clicked. This method collapses the infobox so that it is no longer displayed. Here is the code for the CloseInfobox method.

Border infobox = new Border();
infobox = (Border)map.FindName("Infobox");
private void CloseInfobox_Click(object sender, RoutedEventArgs e)
{
infobox.Visibility = Visibility.Collapsed;
}

We now need to create the tools needed to retrieve the infobox position method, and position offset properties. These properties are dependant on where the pushpin is on the viewable map when the user clicked it. To determine the position method we first want to figure out which quadrant of the map the pushpin is in so that we can display the infobox in the opposite direction. The following methods can be used to determine the position method that should be used:

public static PositionMethod GetInfoboxPositionMethod(Location location, Map map)
{
    Point pinPoint = map.LocationToViewportPoint(location);
    return GetInfoboxPositionMethod(pinPoint, map);
}

public static PositionMethod GetInfoboxPositionMethod(Point anchor, Map map)
{
    int quadKey = 0;
    //Calculate which quadrant the anchor falls in.
    if (anchor.X > map.Width / 2)
    {
        quadKey++;
    }

    if (anchor.Y > map.Height / 2)
    {
        quadKey += 2;
    }

PositionMethod position = PositionMethod.None;

    switch (quadKey)
    {
        case 0:
            position = PositionMethod.TopLeft;
            break;
        case 1:
            position = PositionMethod.TopRight;
            break;
        case 2:
            position = PositionMethod.BottomLeft;
            break;
        case 3:
            position = PositionMethod.BottomRight;
            break;
    }

return position;
}

To calculate the infobox offset we also need to know which quadrant of the map the pushpin falls in so that the offset will be away from that quadrant. The following method can be used to determine the infobox offset:

public static Point GetInfoboxOffset(Location location, Map map, int offsetFactor)
{
    Point pinPoint = map.LocationToViewportPoint(location);
    return GetInfoboxOffset(pinPoint, map, offsetFactor);
}

public static Point GetInfoboxOffset(Point anchor, Map map, int offsetFactor)
{
    Point offset = new Point(0, 0);

int quadKey = 0;

    if (anchor.X > map.Width / 2)
    {
        quadKey++;
    }

    if (anchor.Y > map.Height / 2)
    {
        quadKey += 2;
    }

    switch (quadKey)
    {
        case 0:
            offset = new Point(offsetFactor, 0);
            break;
        case 1:
            offset = new Point(-1 * offsetFactor, 0);
            break;
        case 2:
            offset = new Point(offsetFactor, -1 * offsetFactor);
            break;
        case 3:
            offset = new Point(-1 * offsetFactor, -1 * offsetFactor);
            break;
    }

return offset;
}

The pushpin user control will now be able to use these methods to position the infobox on the map. Note that these methods require the map to have a width and height property.

Best Map view

I have written a couple methods over the years that calculate the best map view for an array of coordinates. The most recent one creates a MapViewSpecification that can be used with the Silverlight control (http://rbrundritt.spaces.live.com/blog/cns!E7DBA9A4BFD458C5!943.entry). Using this method is pretty straight forward. The following is an example of how to use this method to position the map accordingly:

IList<Location> locations = new List<Location>();
locations.Add(new Location(43.647038, -79.3952));
locations.Add(new Location(43.478527, -80.549013));
locations.Add(new Location(51.501238, -0.0233687));
locations.Add(new Location(25.271141, 55.329089));
locations.Add(new Location(42.362158, -71.083124));
locations.Add(new Location(40.76083, -73.9797));
locations.Add(new Location(40.714774, -74.005803));

MapViewSpecification mapView = GeospatialTools.BestMapView(locations, map.Width, map.Height, 10);

map.SetView(mapView.Center, mapView.ZoomLevel);

Conclusion

Using the techniques described in this article you should be able to easily create pushpins with infoboxes and also be able to determine the best MapViewSpecification for those pushpins.

Source code that uses these methods can be found here: http://cid-e7dba9a4bfd458c5.skydrive.live.com/self.aspx/VE%20Sample%20code/VESilverlightMap%7C_PushpinsInfobox.zip

This sample code also has a MiniMap that Earthware describes how to make in his blog here: http://www.earthware.co.uk/blog/index.php/2009/03/virtual-earth-silverlight-minimap-tutorial/

4:37 PM | Permalink | Blog it | VE Silverlight