Yesterday, I released the fourth update release (v1.00.04) of my Web.Maps.VE component. The main feature addition in this update is the addition of .NET 3.5 support.

Below is an overview of the main features of Web.Maps.VE. For more information you can go here: http://simplovation.com/Page/WebMapsVE.aspx

Implement Virtual Earth completely from server-side .NET code; No JavaScript Necessary

In case you're not familiar, Web.Maps.VE is an ASP.NET AJAX Virtual Earth Mapping Server Control. It abstracts out the need to write JavaScript when implementing Virtual Earth mapping within an ASP.NET application. Web.Maps.VE allows you to focus more of your time on implementing features that users want, rather than having to deal with the hassles of JavaScript.

The Sample website that comes with the control has an example of a dynamic/interactive map search implemented without any JavaScript code. This is functionality that would traditionally take hours or even days to write using Virtual Earth and JavaScript directly, and you can do it in a matter of minutes using Web.Maps.VE!

You can even handle Virtual Earth map events (such as: onclick,) from within server-side code.

Can you still use JavaScript if necessary?

Yes, Web.Maps.VE also has a JavaScript API so there's no limit to the custom mapping features that can be implemented. If there's a feature you need to implement that isn't easily done using only Server-Side .NET code, then you can still implement it directly in JavaScript. And, the best part is Web.Maps.VE utilizes the ASP.NET AJAX Extensions, so you can write JavaScript code to interact with the map that is object oriented and event driven!

List of Web.Maps.VE features

• Control every aspect of the map using Server-Side .NET code; no JavaScript required.
• Supports both .NET 2.0 and .NET 3.5
• MapActionExtender
  •  
    • The all new MapActionExtender control (included within the product) allows basic map actions (like: Zoom In, Zoom Out, Set Aerial Map Style, and more) to be performed on the client-side without the need to write any JavaScript code.
• JavaScript support
  • This was a much demanded feature by our customers, and allows much more custom solutions to be built using the control than in previous versions.
• Show real-time Traffic data
• SSL Support
• Plot Pushpins, Polylines and Polygons
• Multi-Point Driving Directions
• Map Events are fired asynchronously via AJAX and handled within server-side .NET code
  • OnMapLoaded
  • OnClick
  • OnChangeMapStyle
  • OnChangeView
  • OnEndPan
  • OnEndZoom
  • OnObliqueEnter and OnObliqueLeave
• Support Miles and Kilometers
• Supports displaying multiple maps on the same page
• Ability to easily build Dynamic/Interactive style Map Searches
• Visual Studio Design Time Support

Plus, with each update release we are adding more and more new features. When you purchase a license for Web.Maps.VE v1.0, you will also get all updates to v1.0 for Free. We have already released 4 updates, and the update release schedule is currently every 2 to 6 weeks.

Download the Trial/Developer License Free!

The Web.Maps.VE Trial license is completely Free, and without feature limitation. The only limitation the trial has is you can only use it on a website that is access from local host (the same machine it's being run on).

Download Web.Maps.VE here

If you take a look at maps.live.com you'll see the Mini Map is in the Top Right corner of the map. Virtual Earth doesn't have any alignment options built in when showing the Mini Map. It just allows you to position the mini map using x and y offset coordinates relating to the top left corner of the map. This makes it really easy to show the mini map in relation to the top left corner, but what makes this tricky is the dashboard is already there.

Here's small example I wrote up on how to align the Mini Map in the Top Right corner of the map. This code also hooks into the Maps onresize event so it can move the Mini Map to the desired location when ever the map is resized.

Here's a screenshot of it in action:

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6" mce_src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
</head>

<body onload="PageLoad()">

<script type="text/javascript">
var map = null;

var MiniMapSize = VEMiniMapSize.Small; // can also be set to VEMiniMapSize.Large

function PageLoad()
{
    // Load the Map on the page when the page loads
    map = new VEMap('myMap');
    map.LoadMap(new VELatLong(47.6, -122.33), 7, VEMapStyle.Road);
   
    // Attach our onresize event handler
    map.AttachEvent("onresize", MapResize);
   
    // Show the Mini Map
    map.ShowMiniMap(0,0,MiniMapSize);
   
    // Align the position of the Mini Map where we want it
    RealignMiniMap();
}

function MapResize(e)
{
    // When the map is resized, Realign the position of the Mini Map
    RealignMiniMap();
}

function RealignMiniMap()
{
    // Realign the position of the Mini Map so it appears
    // where we want it - The Upper Right Corner
    var minimap = document.getElementById("MSVE_minimap");
    var xoffset = (GetMapWidth() - minimap.offsetWidth);
    map.ShowMiniMap(xoffset, 0, MiniMapSize);
   
    /// Hide the Mini Map resizer so the Mini Map cannot be resized
    document.getElementById("MSVE_minimap_resize").style.display = "none";
}

function GetMapWidth()
{  
    // Get the Width of the Map as an integer
    return document.getElementById("myMap").offsetWidth;
}
function GetMapHeight()
{
    // Get the Height of the Map as an integer
    return document.getElementById("myMap").offsetHeight;
}
</script>

<div id="myMap" style="position:relative; width:550px; height:400px;"></div>

<br />
<strong>Resize Map:</strong>&nbsp;
<a href="javascript:MakeMapBigger();" mce_href="javascript:MakeMapBigger();">Bigger</a>&nbsp;&nbsp;
<a href="javascript:MakeMapSmaller();" mce_href="javascript:MakeMapSmaller();">Smaller</a>
<script type="text/javascript">
    function MakeMapBigger()
    {
        var width = GetMapWidth();
        var height = GetMapHeight();
        map.Resize(width + 50, height);
    }
    function MakeMapSmaller()
    {
        var width = GetMapWidth();
        var height = GetMapHeight();
        map.Resize(width - 50, height);
    }
</script>

<br /><br />
<strong>Change Mini Map Size:</strong>&nbsp;
<a href="javascript:SetMiniMapSize(VEMiniMapSize.Small);" mce_href="javascript:SetMiniMapSize(VEMiniMapSize.Small);">Small</a>&nbsp;&nbsp;
<a href="javascript:SetMiniMapSize(VEMiniMapSize.Large);" mce_href="javascript:SetMiniMapSize(VEMiniMapSize.Large);">Large</a>
<script type="text/javascript">
    function SetMiniMapSize(s)
    {
        // Set our global variable to the size we want
        MiniMapSize = s;
       
        // Show the Mini Map as our desired size
        map.ShowMiniMap(0,0,s);
       
        // Realign the Mini Map so it's in the desired position
        RealignMiniMap();
    }
</script>

</body>
</html>

This code works in IE, Firefox and Safari 3 on Windows. I haven't tested any other browsers, but I assume it'll work in others as well. Another thing to note is that this code will only work if there is only a single Virtual Earth map on the page; it'll break with multiple maps on the same page.

Sorry, I didn't have time to write up a nice article surrounding this code. But, I did add a bunch of comments to make it more readable.

What is the Shaded map Style?

If you've used maps.live.com and Virtual Earth, then you've probably noticed that the Road map style in the Virtual Earth API isn't the same as it is on maps.live.com. This is because the Road map style on maps.live.com is actually not using the VEMapStyle.Road map style, but instead is using VEMapStyle.Shaded. The VEMapStyle.Shaded map style is the standard Road style with Shaded Contours drawn on the map, and is new to Virtual Earth v6.0. In this article, I will show you how to hook in to Virtual Earth and make it show the Shaded map style when ever the user selects the Road style on the map dashboard.

Replace Road Map Style with the New Shaded Map Style

Step 1: This article assumes you have a basic understanding of Virtual Earth. If you don't, then go check out the following article before going on: Virtual Earth: Getting Started - Adding a basic Map to a page

Step 2: Set the Map to Load with the Shaded map style showing. The best way to do this is to send the Shaded Map Style as the Map Style Paramater of the maps LoadMap method.

Step 3: Attach an Event Handler to the Virtual Earth "onchangemapstyle" event.

To do this we first need to create our StyleChangeHandler method:

Then, after the LoadMap method is called, we will use the maps AttachEvent method to attach our event handlers:

Note: The variable named "map" is the global variable that holds a reference to our instance of the Virtual Earth Map. If you are using a different variable name, then you'll need to change it to your name through-out the rest of the article.

Step 4: Now that we have our event handler in place, we need to add code to it that will change the map style to Shaded when ever the map style gets changed to Road. Add the following code to the StyleChangedHandler:

Step 5: Now, run the page and you'll see the new Shaded map style in place of the Road map style, just like maps.live.com.

Complete Code For This Article

For easier reference, and so you don't have to type everything in yourself; here's the complete code from this article:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6" mce_src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
</head>

<body onload="PageLoad()">
<script type="text/javascript">
var map = null; /// This is a global reference to the VEMap object

function PageLoad()
{
    map = new VEMap('myMap');
    /// Load the map with the Shaded Map Style
    map.LoadMap(new VELatLong(47.6, -122.33), 7, VEMapStyle.Shaded);
    /// Attach our event handler
    map.AttachEvent("onchangemapstyle", StyleChangeHandler);
}

function StyleChangeHandler(e)
{
    /// Change the map style to Shaded if it's set to Road
    if (map.GetMapStyle() == VEMapStyle.Road)
    {
        map.SetMapStyle(VEMapStyle.Shaded);
    }
}
</script>

<div id="myMap" style="position:relative; width:400px; height:400px;"></div>

</body>
</html>

As you probably know, Safari 3 doesn't allow you to turn on the debug menu within any settings dialogs. It also doesn't come with a JavaScript Debugger either. This makes it almost impossible to do any JavaScript development for Safari. Luckily you can turn on the debug menu, and there is a debugger you can download.

Turn on the Debug menu

Step 1: Open up the Preferences.plist file in notepad.

In Windows XP:
C:\Documents and Settings\USERNAME\Application Data\Apple Computer\Safari\Preferences.plist

In Windows Vista:
C:\Users\USERNAME\AppData\Roaming\Apple Computer\Safari\Preferences.plist

Step 2: Add the following to the end of the file, just before "</dict></plist>":

<key>IncludeDebugMenu</key><true/>

Step 3: Now open up Safari and you have the Debug menu

Where can I find a Debugger for Safari?

You can download the Drosera debugger here: http://nightly.webkit.org
Now, before you go trying to run it, you'll want to read the next section below.

How do I run Drosera in Windows?

Step 1: Make sure you download the Webkit Nightly Build located at http://nightly.webkit.org and extract its contents somewhere on your harddrive.

Step 2: If you're running Win Vista then  you'll have to add the following to the WebKitPreferences.plist file, just before "</dict></plist>":

<key>WebKitUserStyleSheetLocationPreferenceKey</key><true/>

You can find the WebKitPreferences.plist file within the same folder that the Preferences.plist file is in; it's path is shown above. Also, if you're running Vista and you don't add this snippet to the WebKitPreferences.plist file, then Safari will crash and you wont be able to debug until you add it.

Step 3: Execute the run-nightly-webkit.cmd file. This will launch Safari.

Step 4: Execute the run-drosera.cmd file. This will launch Drosera.

Step 5: Execute the FindSafari.exe file. This will link up Drosera to your running instance of Safari.

If you have multiple instance you may want to close all but one. I don't know if multiple instances of Safari will cause this to not work, but it's better to be safe.

Step 6: Now you can access web pages with Safari and step through / break on errors in the code.

Additional Links

The WebKit Open Source Project
Safai Developer FAQ - How do I debug JavaScript in Safari?

Additional Comments

I'm not exactly sure why Apple makes us jump through these hoops to be able to debug JavaScript within Safari. It's quite a hassle, and even after all that work I still have the following issues with the experience:

• Debugging with Drosera is very slow, and actually froze up a couple times on me and I had to restart Safari and Drosera.
• Since I'm used to the debugging experience in MS Visual Studio, I am very dissapointed in Drosera. You'll know what I mean when you use it.

All in all, I hope this post saves someone the hours it took me to figure this all out. Afterall, there isn't any instructions (at least that I could find) on the WebKit site that tells you how to actually run Drosera on Windows.

Good luck, and I hope Apple improves the developer support for Safari.

I've implemented Virtual Earth within many web applications, but one thing that I've only had to do a couple times is run the site under SSL. If you have ever done this, then you know that the web browser doesn't like this and complains with the "Do you want to display nonsecure items?" prompt. This can be a pain for users, escpecially when they click "No" and then wonder why the map isn't there.

Is SSL Supported?

Yes, even though it isn't documented, Virtual Earth does support being referenced under SSL. The reason I know this without it being documented is because David Barkol has blogged about it here. This is the only place I've found it mentioned, and it's not as simple as just using HTTPS.

How to reference Virtual Earth under SSL

To reference Virtual Earth v6 using SSL you must pass "s=1" in the querystring, as well as use HTTPS.

Here's the full URL to reference Virtual Earth using SSL:

https://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6&s=1

Why do we need "s=1"?

You'd think that by just referencing Virtual Earth using HTTPS you'd be all set. Even though you load the VE script using SSL, VE still requests all map images without SSL, thus causing the prompt to still pop up.

By adding "s=1" to the querystring, you are telling VE to load the map images and other stuff it references using SSL. Doing this removes the annoying prompt from coming up, and eliminating any user confusion when they click "No".

Now, you're probably wondering the same thing I am, "Why doesn't VE just see the HTTPS and reference everything accordingly?" Well, I'm not quite sure, but this may be something they change in a future release.

My RSS feed url has changed to the following:

http://feeds.feedburner.com/crpietschmann

The old url will still be active for awhile still, but I will be setting it to redirect to the new one shortly. So, please update your reference to my feed in your reader.

Until now, I have been using a small, hidden 1 pixel image to track the views of my posts through my feed. I have been able to tell that I may have approximately 50 subscribers, but I'm not completely sure. This is why I have decided to move the feed over to FeedBurner so I can more accurately tell how many subscribers I actually have.

It's always nice to know that I'm not just talking to myself here. Thanks for subscribing!

What is Microsoft Virtual Earth?

Virtual Earth allows any developer to implement mapping technology within their web sites and/or applications. The mapping techology behind Virtual Earth is the exact same technology that powers Microsoft's Live Maps website.

Getting Started with Virtual Earth

Lets add a Map to a page

Step 1: Add a DOCTYPE declaration and specify UTF-8 as the pages character set at the top of the page

In order for certain map elements to be drawn correctly, you must use UTF-8 encoding.

Step 2: Add a script reference to the JavaScript Virtual Earth Map Control

For best results, add this script reference to the page header. Placing this in the header ensures that the script will be loaded before other JavaScript on the page is executed. Doing this will prevent errors occuring because of certain code running before the script file is loaded.

Step 3: Add a DIV to the page where we want the Map to be rendered

This is essentially a placeholder where we will tell Virtual Earth to render the map.

You should also specify the Height and Width of the map using CSS styles on the DIV element. If you do not specify a height and width, then Virtual Earth will us the defaults of: 600px width and 400px height.

In this example we are also adding a black border around the map.

Step 4: Tell Virtual Earth to render the map

To do this we just add the following JavaScript to the page after the maps DIV is declared

Step 5: Run the page and see the map

Implementation Tips

Tip 1: When calling the LoadMap method, it is better practice to place the code that instantiates the map within a method and then have it called within the pages OnLoad event. To set this up do the following:

Tip 2: You can also specify a the location (Lat/Long), zoom level and map styles when calling the LoadMap method.

Is there an ASP.NET Virtual Earth server control?

Yes, but it isn't from Microsoft. The Simplovation Web.Maps.VE component is a reusable ASP.NET AJAX Virtual Earth mapping server control that is created with the goal of abstracting out as much JavaScript as possible when implementing Virtual Earth mapping within ASP.NET. It even allows you to handle most map events (like: OnEndZoom, OnEndPan and OnClick, etc.) all from within server-side code; so you don't even have to write any JavaScript if you don't want to.

Complete Code For This Article

You can just save the following code in an .htm file and run it in your browser to see the above code in action without typing it all in yourself.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6" mce_src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
</head>

<body onload="PageLoad()">
<script type="text/javascript">
function PageLoad()
{
    var map = null;
    map = new VEMap('myMap');
    map.LoadMap(new VELatLong(47.6, -122.33), 10, VEMapStyle.Road);
}
</script>

<div id="myMap" style="position:relative; width:400px; height:400px;"></div>

</body>
</html>

Why did I write this?

You may be wondering why I wrote a basic "Getting Started with Virtual Earth" tutorial when there are already other ones out there? Well, it's simple, I am working on some more advanced articles and I want to make sure you have a basic understanding before I go into more detail.

Additional Resources

Virtual Earth Interactive SDK
Virtual Earth Map Control SDK within MSDN

It was a great night, with a really great turn out. I'm not sure the exact number of attendees, but I think it must have been over 150! A few volunteers got up and gave some great demo presentations of new features in VS'08 and .NET 3.5. There was even a 360 setup with Halo 3 for people to play. Don't forget about all the great prizes that were given away: a couple Zunes, an XBox 360 Premium, an XBox 360 Elite, and alot of other games and software.

Oh, and don't forget about all the toys that were donated, and the 360 Elite was given at random to one of the people that donated a toy. There were actually a few that donated multiple toys.

The above pictures are only a few of the 42 pictures I took last night. Go here, to view the full set of pictures I took at last nights WI .NET Users Group Holiday Party 2007 InstallFest!

I installed the 64-bit version of Vista Ultimate shortly after it RTM'd back in November 2006. Everything was going perfectly fine with it until a couple weeks ago. It started Blue Screening (BSOD) and giving me some other strange issues.

Here's a list of some of the issues I've been having:

• Blue Screens (BSOD) - It shows a different error message each time, so there isn't just one thing wrong.
• CD/DVD Burner says it can't be accessed, but then I try again a second later and it works fine.
• Printer just stopped working; I can't figute out why.

Before all this started happening, I was very Pro Vista. But, now my opinion is that it probably isn't any more reliable than XP, possibly even less. I'm pretty dissapointed, since I used to reinstall XP pretty traditionally once every year, and I was hoping that Vista would be different. But I guess not...

Now, I have been downloading the latest updates as they come out. Could this be what my problem is? Are the latest updates to Vista, or maybe even just one of them causing my problems? However, it could always be something I installed, like some crappy program or faulty driver. I'm not sure I'll really ever find out, but I hope that in a year from now I wont have to reinstall again.

You may be wondering what preventative measures I will be taking this next time around. Well, I'm actually going to only install the bare minimum applications on the machine and then use Virtual PC instances to run everything else. This way, if something screws up Windows again, hopefully it happens within the VPC instance, and I wont have to go through this pain of reinstalling everything again.

The WI .NET Users Group Holiday Party and Visual Studio 2008 InstallFest has been rescheduled for Tuesday, December 18th at the same location and time.

more info...