Getting your custom imagery onto Bing Maps with Global Mapper and the Cloud

johnWeeGo[1]It is actually very easy to display gigabytes of custom imagery on Bing Maps with fantastic results, the trick is to know what tools to use. Read on for a streamlined process for the common geo image formats using Global Mapper, SpaceBlock, Windows Azure and a few helpful tips along the way.

overlay

At Bing Map’s core is the ability to render really large images in your browser. Both the AJAX, Silverlight and Mobile versions all use a concept of a tile pyramid to make this possible and effective over the web, you can read more about the tile system in great detail here. Today we are going to look at a process I use to process custom imagery to overlay Bing maps.

pyramid

In the GIS field these custom images are called raster images and come in various file formats like GeoTiff and ECW. These formats have the images correctly “projected” and include the location co-ordinates. Since the world is not flat in order to view it on a flat surface, like Bing Maps 2D, all the data needs to be “projected” to the Mercator projection. If your custom imagery isn’t already projected and/or not in a Geo image format then the free MapCruncher tool that I will cover in my next post will be more useful for you. Lets assume you have your imagery ready to go in ECW or GeoTiff format.

Global Mapper is a very powerful GIS viewer and data convertor. It supports an amazing number of formats and can export directly to Bing Map tiles. You can open one or many of your ECW or GeoTiff files onto a layer an order as you like. The tool isn’t free but is quite inexpensive and a valuable tool for any Bing Maps developer, join their forums first and look for a discount code before you purchase. I’m going to use a built-in free online data source today so I can show you the results online royalty free and you can follow along.

GlobalMapperWelcome

Step 1. Set your projection.

On the title screen it is the fourth option or choose Tools –> Configure. Under the project tab you will see:

projection 

For Bing maps I will choose Mercator and WGS84.

Step 2. Load your data.

Again the welcome screen presents you with 3 options: Open your file, find data online or use a free online source. This is where you would load your GeoTiff or ECW.

DataSource 

For this article I used the free online data from the USGS using a 5 mile bounds from New York.

Step 3. Set a transparency colour and tolerance.

This one is a little tricky to find. Open the control centre (Alt-C) or Tools –> Control Centre. Select your layer and click on Options. Under the Display tab you can select a colour to be transparent and also set small variations of the colour to also be transparent (useful on compressed images).

TransparentcySetting 

This is important to get a seamless edge on your custom area but be aware that it could turn areas transparent that you don’t want. Once applied you will see that colour now changed to the default yellow background.

Step 4. Export as Virtual Earth tiles

From the File Menu choose Export Web Formats –> Virtual Earth Tiles.

ExportFormats 

With every increase in level you create four times the number of tiles then the previous layer. Ideally you should try to match the resolution of the source imagery. Set the number the zoom levels to output, it is easy to turn these off later so I normally export all but the top 4-5. For example here I choose level 16 as my highest since the resolution is pretty poor and 10 levels to export, this mean I will have levels 7->16 in Bing Maps. The export bounds can be set to the whole layer, the current screen or simply draw a box for the area you want.

VESettings VESettings2 dragbox

The export process can take some time depending upon the IO performance of your system, I have global mapper setup on a second computer (actually my media centre PC with fast disks) and remote desktop in from my dev machine.

Step 5. Setup Azure storage

We need to host these tiles on the web, we need a system that is designed to serve many small files. I highly recommend using a cloud based service for this, you can evaluate Windows Azure currently for free. Sign up here, it will take about 2-3 days to get your account. Once you have your account, setup a new storage account. You will need to know your storage account name and shared key for the next step. For a full tutorial on Azure see this awesome post from Katrien.

azure

Step 6. Upload to Azure Blob Storage

I use SpaceBlock to upload and explore Azure Blob Storage, it scales well and allows for multiple accounts.

Under Tools –> Options add your azure account using a key from step 5.

spaceblock 

The Azure blob storage can be directly accessed using http, but you need to set the permissions on your container to be public.

setaccessAzureModal

The first level of folders in SpaceBlock for Azure are the Azure Containers, from their all the sub folders are just a neat naming trick that SpaceBlock handles for you. You need only set this permission on these top containers.

Step 7. Use in your application.

Now your tiles are public you need to add a tile layer to your application to show them. In the Silverlight CTP control you can do this in your code behind for a Map called “map”:

using System.Windows;
using Microsoft.VirtualEarth.MapControl;

namespace SoulSolutions.TileExample
{
    public partial class Page
    {
        public Page()
        {
            InitializeComponent();
            Loaded += Page_Loaded;
        }

        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            var tileLayer = new MapTileLayer();
            map.Children.Add(tileLayer);

            //add the overlay
            var tileSource = new LocationRectTileSource(
                "http://brisbane.blob.core.windows.net/tiles/nyDEM/{0}.png",
                new LocationRect(new Location(40.76026, -74.08459), new Location(40.6874, -73.94211)),
                new Range<double>(7, 16));
            tileLayer.TileSources.Add(tileSource);

            map.SetView(new Location(40.71499, -74.00734), 14);
        }
    }
}

See live example here.

In the AJAX control you do this (complete page):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>SoulSolutions Tile Example AJAX</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
      <script type="text/javascript">
         var map = null;
         var tileLayer;
         
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap(new VELatLong(40.71499, -74.00734), 14, 'a', false);
            GetTiles();
         }   
         
         function GetTiles()
         {
             var bounds = [new VELatLongRectangle(new VELatLong(40.76026, -74.08459), new VELatLong(40.6874, -73.94211))];

            var tileSourceSpec = new VETileSourceSpecification("lidar", "http://brisbane.blob.core.windows.net/tiles/nyDEM/%4.png");
            tileSourceSpec.NumServers = 1;
            tileSourceSpec.Bounds = bounds;
            tileSourceSpec.MinZoomLevel = 7;
            tileSourceSpec.MaxZoomLevel = 16;
            tileSourceSpec.Opacity = 0.8;
            tileSourceSpec.ZIndex = 100;

            map.AddTileLayer(tileSourceSpec, true);
         }  
      </script>
          <style type="text/css">
    html, body {
        height: 100%;
        overflow: auto;
    }
    body {
        padding: 0;
        margin: 0;
    }
    </style>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:100%; height:100%;"></div>
   </body>
</html>

See live example here.

And of coarse you can change to 3D mode and get this awesome effect:

3D 

In both examples you have to specify:

  • URL to the tiles, with parameter to be replaced with quadkey filename
  • The bounds of the tile layer
  • The valid zoom levels

Thankfully GlobalMapper produces a .htm file in its output path that will specify these settings for you. However I find it is a little generous and I then use my location chooser to trim this down a little.

I hope you enjoyed this article and feel inspired to tile out your own custom imagery and overlay on Bing Maps to enhance your application.

Multiple Bing Maps with Blacklight

johnWeeGo I’ve been exploring some of the fantastic Silverlight panel systems out there and was blown away by the Drag Dock Panel in the open source Blacklight project.

Blacklight3

See the full demo here:

http://soulsolutions.com.au/silverlight/blacklight/

It is very impressive and makes you rethink how you may design your next LOB Bing Maps application. The panel system lets you add as many elements as your like and then drag them around or impressively make one larger with the other stacked up:

Blacklight2

Imagine a tracking application where you could allow the user to dynamically add new map panes and in real time track many assets individually.

Blacklight1

There is no reason why the panels couldn’t be other controls like silverlight charts or dials. It could be a very impressive dashboard.

The Blacklight project is available on codeplex: http://blacklight.codeplex.com/

Martin Grayson appears to be the man behind it from Microsoft in the UK, awesome work!

Here is a simple snippet of the xaml code to show how easy this is to use:

<UserControl x:Class="ExpandingPanel.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:controls="clr-namespace:Blacklight.Controls;assembly=Blacklight.Controls" 
    xmlns:MapControl="clr-namespace:Microsoft.VirtualEarth.MapControl;assembly=Microsoft.VirtualEarth.MapControl" >
    <Grid x:Name="LayoutRoot" Background="White">
        <controls:DragDockPanelHost x:Name="dragDockPanelHost">
            <controls:DragDockPanel DraggingEnabled="False" Margin="15" Header="Map View 1">
                <MapControl:Map></MapControl:Map>
            </controls:DragDockPanel>
            <controls:DragDockPanel Margin="15" Header="Map View 2">
                <MapControl:Map></MapControl:Map>
            </controls:DragDockPanel>
            <controls:DragDockPanel Margin="15" Header="Map View 3">
                <MapControl:Map></MapControl:Map>
            </controls:DragDockPanel>
            <controls:DragDockPanel Margin="15" Header="Map View 4">
                <MapControl:Map></MapControl:Map>
            </controls:DragDockPanel>
            <controls:DragDockPanel Margin="15" Header="Map View 5">
                <MapControl:Map></MapControl:Map>
            </controls:DragDockPanel>
            <controls:DragDockPanel Margin="15" Header="Map View 6">
                <MapControl:Map></MapControl:Map>
            </controls:DragDockPanel>
        </controls:DragDockPanelHost>
    </Grid>
</UserControl>

What application uses do you think this would be suitable for?

Girl Geek Dinner 6 with Kay Lam-Beattie

For our July Girl Geek Dinner we’re heading to The Hutch Bistro at New Farm and we’re fortunate to have Kay Lam-Beattie as our guest speaker.  So gather all of your legal/IT questions to ask Kay on the night!

kay

About Kay:

Kay graduated from QUT in 1992 with a Bachelor of Business (Accountancy) and an honours degree in Law. To obtain more specialised skills, Kay also completed a Masters in Law concentrating on the areas of intellectual property (IP) and IT-related legal issues, as well as a Graduate Certificate in IT.

Kay has been the principal of IDEALAW (and its predecessor Legal Capital Lawyers) since 2005.

Kay’s broadly based academic qualifications places her in an ideal position not only to understand the intricacies of her specialist areas of IT and IP related law, but also technical IT and business issues. Kay also speaks conversational Japanese, having lived and worked in Japan for a number of years.

Who is invited?

If you are a geek and a girl or know of one who is willing to escort you then you are welcome and encouraged to come along. There is a technical focus with the intention of having fun and connecting with other women in IT.

Who pays for dinner?
This month is not sponsored so you will have to pay for your own dinner

Where + When
Date: Thursday 2nd July, 2009
Time: 7:00 pm
Where: The Hutch Bistro

75 Welsby Street, New Farm

http://www.thehutchbistro.com.au/food-wine.html

 

Running the Messenger Samples

PulseLogo96

I downloaded the sample app for the Windows Live Messenger bits in preparation for our talk at Remix next week.  If you haven’t played with it, the WebToolkit Sample site is a great starting place!  There’s a couple of things you have to do to get them running so I thought it’d be a good idea to write these down for others.

Firstly, you’ll need an application id, so make sure you go to the Azure Services Developer Portal: https://lx.azure.microsoft.com/Cloud/Provisioning/Default.aspx and create a new project with a Live Services: Existing APIs type. Make sure you remember the domain name and URL you chose e.g. I picked remixdemo.com.au and return URL of http://remixdemo.com.au/Messenger/Default.aspx and also note down your app_id and secret key as you’ll need them to run the samples.

Make sure you add an entry in your hosts file for the domain you chose so you can run the application locally.  To do this open notepad as administrator, and open the hosts file located at C:\Windows\System32\drivers\etc and create an entry like: 127.0.0.1    remixdemo.com.au

Next, I went to IIS and created a virtual directory called Messenger and pointed it to the SampleSite. To run the application I browsed to http://remixdemo.com.au/messenger/Default.aspx.

Make sure you setup your site in the web.config to use your app_id, secret key and correct urls.  The one that caught me out was the app_provisioned_usertoken.  I was getting an exception in the User.cs class for consent.IsValid() until I set the value to empty string e.g.

<add key="app_provisioned_usertoken" value=""></add>

Make sure you set the app_logo to point to the pulse logo so your login screen has the correct image e.g.

<add key="app_logo" 
     value="http://remixdemo.com.au/messenger/App_Images/PulseLogo.gif">
</add>

Setting Fonts in WPF

Fonts Setting fonts used to be a bit painful but I’ve found it quite easy in WPF.  In my project I’ve copied the font files into a directory structure: \Resources\Fonts and I have a font file masanreg.ttf which contains the font called MasonSansRegular.

To use the font in Xaml if just reference the path to the font and the font name prefixed with a # e.g.

FontFamily="./Resources/Fonts/#MasonSansRegular"

 

You can also see the list in Blend under the Text section

blendfonts

Technorati Tags: ,