Atlas Demo

On Wednesday night I did a demo of Atlas. I was going to do a little demo on the Virtual Earth Atlas Server Control. In hindsight, doing a demo that depended on “external resources” was probably not the best idea. But it was working fine just moments before the presentation, and I hadn’t noticed the delays. And I also never noticed any delays during my practice runs days before the presentation.

I need to learn to be more patient during my presentations because I just ran the exact same demo on my PC at home.

And it took some time to load (over wifi).

It showed the same blank map canvas as it did during the demo, but for a brief moment or two. Perhaps the maps would have shown up if I had waited longer that night, rather than declaring straight away that the net connection was playing up? Possibly. Well, it’s all done and dusted now. Admittedly, I should have prepared for a worse case scenario rather than on the fly decide to go look for something I did several days ago (the hands on labs). But some of these things you learn through the experience of doing a presentation.

I had prepared several longitude and latitude locations to show a demo of the power of Atlas. How easy it was to use.

Below is the actual demo for those interested…

Here’s the code for the Virtual Earth part:

<atlas:VirtualEarthMap ID="VirtualEarthMap1" runat="server" Latitude="-37.83"
Longitude="144.98" MapStyle="Aerial" ZoomLevel="10" PushpinActivation="Hover">
</atlas:VirtualEarthMap>

The Lat/Long figures above are for South Yarra (37.83South/144.98East), which is where the presentation was held.

I had a few other Lat/Long figures prepared for the next part of that demo that didn’t go ahead.

The next step would have been to put two Atlas TextBox controls and one Atlas Button control onto the canvas above the Map.

So we end up adding:

<span>Latitude</span>
<input type="text" id="txtLat" />
<span>Longitude</span>
<input type="text" id="txtLong" />
<input type="button" id="btnChangeMapLocation" value="Change Map Location" onclick="Change_Location();" />code>

I've also decided to change the map style to Hybrid so we can actually see the place names of the various locations we goto.

Note the onclick event is calling a Change_Location() javascript function.

Let's code that now:

function Change_Location()
{
var latitude = document.getElementById("txtLat").value;
var longitude = document.getElementById("txtLong").value;

var veMapCtrl = document.getElementById("VirtualEarthMap1");
veMapCtrl.control.set_latitude(latitude);
veMapCtrl.control.set_longitude(longitude);
}

The first two lines are pretty simple, just getting the values entered by the user in the Latitude and Longitude text boxes.

I’ve not actually seen the last two lines documented anywhere, but after doing some “research” (digging into the AtlasUIMap.js file from the Atlas Script Library), they set the latitude and longitude values for the Virtual Earth map.

One thing to keep in mind, the “.control” means you’re accessing one of these Atlas controls.

Here’s a few Lat/Long locations I had prepared for the presentation (More Latitude/Longitude values):

City Latitude Longitude
Melbourne (-)37.50S 145.0E
South Yarra (-)37.83S 144.98E
Redmond 47.41N (-)122.07W
Paris 48.50N 2.20E
Luang Prabang 19.52N 102.10E
New Orleans 29.58N (-)90.04W

There’s a lot more that can be done to show what is possible with Atlas, but this is all I had prepared for the presentation because of time constraints.


Full Source code for this demo:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<atlas:Script ID="Script1" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="Mozilla" />
<atlas:Script ID="Script2" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="Firefox" />
<atlas:Script ID="Script3" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="AppleMAC-Safari" />
<atlas:Script ID="Script4" runat="server" Path="~/ScriptLibrary/AtlasCore.js" />
<atlas:Script ID="Script5" runat="server" Path="~/ScriptLibrary/AtlasCompat2.js" Browser="AppleMAC-Safari" />

<script type="text/javascript" language="javascript">
function Change_Location()
{
var latitude = document.getElementById("txtLat").value;
var longitude = document.getElementById("txtLong").value;

var veMapCtrl = document.getElementById("VirtualEarthMap1");
veMapCtrl.control.set_latitude(latitude);
veMapCtrl.control.set_longitude(longitude);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<atlas:ScriptManager ID="ScriptManager1" runat="server"></atlas:ScriptManager>
<span>Latitude</span>
<input type="text" id="txtLat" />
<span>Longitude</span>
<input type="text" id="txtLong" />
<input type="button" id="btnChangeMapLocation" value="Change Map Location" onclick="Change_Location();" />
<atlas:VirtualEarthMap ID="VirtualEarthMap1" runat="server" Latitude="-37.83"
Longitude="144.98" MapStyle="Hybrid" ZoomLevel="10" PushpinActivation="Hover">
</atlas:VirtualEarthMap>
</div>
</form>

<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<references>
<!-- Repath the following src attributes, using regular client relative paths as necessary -->
<add src="ScriptLibrary/AtlasUI.js" />
<add src="ScriptLibrary/AtlasControls.js" />
</references>
<components>
</components>
</page>
</script>
</body>
</html>

Download full source.

Atlas Demo - South Yarra/Melbourne - Virtual Earth
Fig 1: Default Virtual Earth map, with location set to South Yarra, Melbourne.

Atlas Demo - Luangphrabang - Laos - Virtual Earth
Fig 2: Changed Virtual Earth map, with location set to Luangphrabang, Laos.

3 thoughts on “Atlas Demo”

  1. Hi,

    I tried your demo at work but when I went to compile it, it is giving me the errors:

    Unknown server tag “atlas:VirtualEarth”
    and Element ‘Script’ is not known.

    Any clues?

    Thanks.

  2. This great demo was done using an ATLAS build prior to January CTP, which is lacking many of the atlas:…-controls in favor of using the atlas extenders such as the atlas:AutoCompleteExtender with existing asp: controls such as the asp:TextBox

Comments are closed.