Subscribe: Chris Pietschmann - Bing Maps
http://pietschsoft.com/syndication.axd?category=344def9c-5c20-4cd7-ab55-c021a4ffaf97
Added By: Feedage Forager Feedage Grade B rated
Language: English
Tags:
bing maps  bing  color csharpcode  color  control  csharpcode  map  maps  microsoft maps  microsoft  new  silverlight 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Chris Pietschmann - Bing Maps

Chris Pietschmann - Bing Maps



husband, father, hacker, entrepreneur, futurist, innovator, autodidact



 



CanvasMap Prototype = HTML5 Canvas + Mapping

Thu, 05 Jan 2012 08:46:17 -0500

When Microsoft released the Windows 8 Developer Preview (Sept. 2011) I was a bit annoyed that they failed to include a “native” Bing Maps control for us to build with. Instead they require you embed the Bing Maps v7 Ajax map within an IFrame to use it. There are a few issues with this that I wont get into now. So, consequentially, I decided to prototype my own map control with the intended purpose to use it with JavaScript based WinRT apps if it turned out well.

Disclaimer: The code for CanvasMap is very much in the prototype stage. It is buggy and far from complete. It wont hurt anything to play with it, but you wont want to use it in any apps you are building.

CanvasMap is a JavaScript map visualization control (similar to Bing Maps or Google Maps) that is built entirely on top of using the HTML5 Canvas element to render the map. Currently, neither Bing Maps or Google Maps use the Canvas element to render maps, so I thought I’d do this to see how the performance might compare. I know there are a few alternatives already, but I thought I’d have some fun trying to build my own.

One big different between Canvas Map and Bing Maps or Google Maps is that it easily supports using the imagery tiles from either Bing Maps, OpenStreetMap or Google Maps. And, it’s Open Source.

(image)

You can download the full source code for CanvasMap here:

Enjoy playing around with it. I know I have.




2012 Bing Maps Feature Wish List

Mon, 19 Dec 2011 14:42:13 -0500

The Bing Maps Silverlight control is really sweet (although it hasn’t been updated in forever) and the Ajax v7 control was a huge improvement performance wise over v6. However, the Bing Maps platform has a long way to go before I would consider it to be the mapping development platform I would hope it could someday become. Bing Maps Wish List Here’s a list of some features that I hope make their way into the Bing Maps platform for us developers to be able to utilize: 1) Bring 3D Mapping Back!! With more features! There used to be a Bing Maps 3D control that could be used; except it was abandoned by Microsoft this year (2011.) The story of Bing Maps 3D started about the same time Bing Maps was first released back when it was called Virtual Earth (a far better name in my opinion.) The truth of the 3D support was that it only supported Windows (as it was an ActiveX control) and the developer API wasn’t very well documented. It almost seemed like they really didn’t want people using it. Obviously, the HTML / JavaScript development stack is not robust enough to support such features. Also, as became obvious with the old control, an ActiveX control is not a viable option either. The best development option for building a 3D map control is to expand the Silverlight control to support 3D. Also, it is essential to bring an identical developer experience to Windows 8 “Metro” Apps via a native control that is identical in functionality to the Silverlight control (with 3D added of course.) Also, who cares about Street View or what ever other antiquated 2D map view. 3D is where the future is! If Bing Maps doesn’t get it, someone else will. 2) Native Bing Maps control for Windows 8 “Metro” Apps I know Windows 8 isn’t even to the Beta stage yet, but the lack of a native Bing Maps control makes it a huge pain to build mapping apps on the new platform. Also, by forcing us to use the Ajax control doesn’t allow us to use C# or .NET for building “Metro” apps. Also, I think a native Bing Maps control for Windows 8 “Metro” Apps should be free for developers to use (not require Bing Maps for Enterprise licensing at all) since it will really help push the adoption of Windows 8. Many people don’t really know it yet, but mapping is still what they want to use when visualizing their data. Give us the tools to show them the light! 3) Open Source Bing Maps Controls Free Bing Maps by releasing the controls as Open Source! This would allow us to better implement them, since we’ll be able to dissect them to see how to best build our apps. Then we could also write “best practice” type articles to pass our new found knowledge on to other Bing Maps developers that may be looking to build the same stuff. Also, this would be a huge benefit that Google doesn’t currently offer either. Some fear that by open sourcing the Bing Maps controls it will open the ecosystem up to developers using their own custom versions that aren’t supported by Microsoft; thus causing technical support issues when they run into issues. Well, if you just take one look at ASP.NET MVC then you’ll see that this just isn’t true. Just to clarify: I’m not suggesting making the server-side backend of Bing Maps open source. I’m only referring to the Ajax control, Silverlight control and other developer tools. 4) Ability to Submit Bug Reports Currently the only place for us to submit bug reports for anything relating to Bing Maps is to tell each other about it in the Bing Maps Developer Forums, and then hope that a member of the Bing Maps team at Microsoft finds the post and eventually works to get it fixed. It’s almost like the Bing Maps team doesn’t want to hear about Bugs (I know this isn’t true, but that’s the image it projects to the community.) Please, give us a Bug report system on MS Connect of some where. 5) Independent Resource Site / Central Hub for Bing Maps Development Both Silveright and ASP.NET have their own resource websites full of screencasts, articles, samples, forums an[...]



Bing Maps v7 Ajax Hacks: InfoBox Description containing Html tags

Sun, 10 Jul 2011 15:29:17 -0500

For some odd reason the Bing Maps team decided to not allow HTML tags within the Description property of the InfoBox class they baked into the Bing Maps v7 Ajax control. I don’t know why they would limit it in such a way, but thankfully I have figured out a hack to override it and allow HTML tags as desired. Here’s a full sample page that adds a map with pushpin and infobox, and sets up overriding support to allow HTML tags within the infobox’s description:  
Warning: This is a hack and it relies on accessing part of the “non-public” API within the control. If the Bing Maps team decides to rename “cm1001_er_etr.descriptionNode” in a future release/update of the Bing Maps v7 control, then this code may stop working. .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }[...]



Bing Maps v7 Ajax Hacks: Pushpin Tooltips via Html Title Attribute

Sun, 10 Jul 2011 15:02:24 -0500

The Bing Maps v7 Ajax control is still a bit lacking in functionality, and good for us it’s written in JavaScript so it’s easy to extent and hack. The following hack is an “unsupported” method of adding Tooltips to Pushpins by making use of the HTML Title attribute. The Google Maps API already has a “setTitle” method on Markers to add a Tooltip to the pins plotted. Now, thanks to this hack, the same can be done using the Bing Maps v7 Ajax control. Here’s a full sample page that adds a map with pushpin and sets up the pushpin to have a Tooltip:
.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Warning: Like I said, this is a hack and it relies on accessing part of a “non-public” API within the control. If the Bing Maps team decides to rename “cm1001_er_etr.dom” in a future update/release of Bing Maps v7 then this code will stop working.[...]



Bing Maps JavaScript Intellisense Helper Now Available as Nuget Package

Wed, 06 Apr 2011 22:39:44 -0500

I just put out a Nuget Package to make it easier for you to include the Bing Maps Javascript Intellisense Helper within your web applications.

http://nuget.org/List/Packages/BingMapsIntellisense_6

(image)




Step By Step: Bing Maps Silverlight and an Out Of Browser (OOB) Application

Wed, 26 Jan 2011 08:40:19 -0500

I’ve received a couple questions regarding the display of the Bing Maps Silverlight control within a Silverlight Out Of Browser (OOB) application, so I decided to write up a simple step by step example of creating a basic Silverlight OOB application that displays a map. Step By Step Example Follow the below steps to create a basic Silverlight OOB application that displays a map using the Bing Maps Silverlight control within Visual Studio 2010: Step 1: Create New Project In this case, I’m choosing to create a new “Silverlight Application” project, but you could also choose the Business or Navigation Application templates if you choose. Step 2: Select the desired Web Project Type on the New Silverlight Application dialog I’m leaving the default setting of an ASP.NET Web Application Project, but you could choose a Website or MVC Web Project. Step 3: Add a Reference to the Bing Maps Silverlight Control within the Silverlight project Step 4: Add a Map to the Application Here’s the source code for MainPage.xaml with a map added in the project that I’ve created: .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Step 5: Enable Out of Browser Mode Within the Silverlight Project Properties, check the “Enable running application out of browser” option to enable Out Of Browser (OOB) for this Silverlight application. Step 6: Run it! If you have the Silverlight project selected as the Startup Project (which is the default when creating the project) then Visual Studio will run it in Out Of Browser mode. If you have the Web project selected as the Startup Project, then you will need to Right Click the Silverlight Application (when running) and select “Install […] onto this computer…” Generally when debugging an OOB application, you’ll want to have the Silverlight project set as Startup Project, unless you have web services, images or other data hosted within the Web Project that the Silverlight Project consumes. In this case you’ll want to debug while running the Web Project as Startup. Additional Note Regarding Silverlight OOB (Out of Browser) Applications The Bing Maps Silverlight control requires itself you be hosted within a web site or application. If you are using the Bing Maps Silverlight control within a Silverlight Application, then you’ll need to host it on a website (over http). If you do not host it on a web site or application, then the Bing Maps Silverlight control will display a “Map loaded in unsupported Uri Scheme. Please reload page in “http” scheme.” error message. [...]



Geomap Project - HTML Extensions for Rendering Map Displays

Thu, 13 Jan 2011 06:54:06 -0500

One thing missing from HTML5 is the ability to render maps on a page. The Bing Maps and Google Maps JavaScript API’s are generally fairly simple to implement, but they could both be easier. I wrote up a small example API that allows you to add Maps, and plot data on those Maps, to an HTML page by using mostly HTML markup using a new tag. While this project uses JavaScript to perform the map rendering once the page loads, all you need to do to implement it is write some simple markup. This project really makes it easier than before to add Maps to your HTML pages. Download Here Basic Map Once the javascript () files are included in the page, you can use the following markup to add a map. .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Plot Some Data Plotting data on the map is as simple as markup, just like any other HTML element. Map not loaded. You may need to enable JavaScript within this browser. .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Additionally, if JavaScript is disabled in the page, or you are unable to execute the JavaScript code that initializes the map, then the user will see the message “Map not loaded. You may need to enable JavaScript within this browser.” You can alternatively add any HTML content to this “



Bing Maps Ajax 7: Add a Simple Mini Map

Sun, 19 Dec 2010 13:15:02 -0500

The Bing Maps Ajax v7 control doesn’t include support for adding a Mini Map. So, I decided to quickly work up a simple example of adding one. Below is the source code for it and a zip download of the code at the bottom of the post. Source Code
.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Download: BingMapsAjax7SimpleMiniMap.zip (1 KB)[...]



Bing Maps Ajax 7: Add Custom Navigation Bar Buttons using jQuery

Sat, 18 Dec 2010 09:42:19 -0500

The Bing Maps Ajax v7 control does not include support for adding custom buttons to the navigation bar (where the zoom, pan and map style buttons are). There may be times when you will want to add a custom button or two, and this post contains some simple code that will help you do so. Here’s a screenshot of this in action. The ‘Click Me’ link in the navigation bar is a custom button that the below code adds. Code First, here’s the code that I came up with to add custom navigation bar buttons: // Simple Method to Add a Custom Button to the NavBar using jQuery var addNavButton = function (mapElement, content, onclick) { $(mapElement).find('.NavBar_typeButtonContainer').append( // Add a Separator between this button and any existing buttons $('').addClass('NavBar_separator') ).append( // Add the Custom Button itself $('').attr('href', '#').addClass('NavBar_button'). append($('').html(content).click(onclick)) ); }; // Use setTimeout to load Custom NavBar button if you are adding // the button immediatly after instantiating the map. // Timeout is needed since Bing Maps 7 doesn't currently have // any kind of "onload" event to handle. window.setTimeout(function () { // Add Custom Button to NavBar addNavButton( document.getElementById('myMap'), // <- Maps DIV 'Click Me', // <- Content of Button - You can put HTML in here if you want function () { // <- Method to call during buttons Click event alert('You Clicked Me!'); } ); }, 100); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Explanations The above code does require the jQuery library, which is how this code is so short and simple. If you call the ‘addNavButton’ function immediately after instantiating the Bing Map, then you will need to include a ‘window.setTimeout’ (as in the code above) to make sure that the Map has finished loading before you try to add the custom button. This is necessary because the Bing Maps Ajax v7 control doesn’t include any kind of ‘onload’ event to be handled.[...]



Bing Maps Ajax 7: Simple Pushpin Animation via Extension to Microsoft.Maps

Tue, 30 Nov 2010 23:10:29 -0500

When updating the location a pushpin using the Bing Maps Ajax Control, the pushpin instantly moves to its new location. Sometimes this may work, but other times it may be nice to animate the movement. Updating the location a vehicle in an asset tracking application is one example where it would be nice to animate the movement. I wrote a simple extension to the Bing Maps Ajax v7 control that adds the “Pushpin.moveLocation” method to perform such an animation. Usage Let’s start with some sample usage of the “Pushpin.moveLocation” method. // Move pushpin to new location // using the default animation speed // of 1000 milliseconds (1 second) pushpin.moveLocation( new Microsoft.Maps.Location(47, -87) ); // Move pushpin to new location // using a speed of 2000 milliseconds // or 2 seconds pushpin.moveLocation( new Microsoft.Maps.Location(47, -87), 2000 ); Method Reference Here’s some documentation for the “Pushpin.moveLocation” method: Pushpin.moveLocation(location, speed) This methods moves the pushpin to a new location using an animation of slowly moving the pushpin over the period of the specified interval. location – The Location to move the pushpin to. speed – The time period to perform the animation, in milliseconds. If not specified, the default is 1000 milliseconds, or 1 second. Full Extension Source Code Here’s the full source code for adding the “Pushpin.moveLocation” extension to Bing Maps Ajax v7. (function ($m) { (function(proto) { if (!proto.moveLocation){ proto.moveLocation = function(loc, speed) { // loc = Location to move the pushpin to // speed = time (in milliseconds) to perform animation var that = this, startLoc = this.getLocation(), endLoc = loc, startTime = new Date(); if (speed === undefined){ speed = 1000; // Default to 1 second } var interval = window.setInterval(function() { var timeElapsed = (new Date()) - startTime; if (timeElapsed >= speed){ // Full animation time (speed) has elapsed // Just set final location and end animation that.setLocation(endLoc); window.clearInterval(interval); } // Set the Latitude/Longitude values to a percentage // of the total distance to move based on the amount // of time that has elapsed since animation started. var timeElapsedPercent = (timeElapsed / speed); var latitudeDistToMove = ( endLoc.latitude - startLoc.latitude ); var longitudeDistToMove = ( endLoc.longitude - startLoc.longitude ); that.setLocation(new $m.Location( startLoc.latitude + (timeElapsedPercent * latitudeDistToMove), startLoc.longitude + (timeElapsedPercent * longitudeDistToMove) )); }, 10); }; } })($m.Pushpin.prototype); })(Microsoft.Maps); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff000[...]



Bing Maps Ajax 7: Adding InfoBox Support via Extension to Microsoft.Maps

Tue, 30 Nov 2010 11:54:48 -0500

The new Bing Maps Ajax v7 control may be faster and smaller, but it is pretty light on features at the moment compared to its older brother; the v6.3 control. One of the features missing is support for showing InfoBox’s. Its simple to handle mouse events and display a
next to the pushpin, but I thought I’d take a little time to write a simple InfoBox extension to the new Microsoft.Maps namespace. Here’s a screenshot of it in action: Usage Let’s start with some sample usage of the InfoBox extension. // Create Pushpin var pushpin = new Microsoft.Maps.Pushpin( new Microsoft.Maps.Location(0,0) ); // Create InfoBox var infobox = Microsoft.Maps.Ext.InfoBox( "Title", /* <-- InfoBox Title to display */ "Description", /* <-- InfoBox Description to display */ map /* <-- A refernce to the Map where the InfoBox will be displayed */ ); // Add InfoBox to Pushpin pushpin.setInfoBox(infobox); // Add Pushpin to Map map.entities.push(pushpin); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Usage of the “Microsoft.Maps.Ext.InfoBox” object is fairly simple. After creating the InfoBox object, you assign it to the Pushpin via the “setInfoBox” method that is also an extension that has been added. CSS There is a small bit of CSS code needed to style the InfoBox appropriately. Here’s some sample HTML that is similar to what the InfoBox extension adds to the page for the InfoBox’s:

Title

Description
.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The
element is given the CSS class of “infobox”. You use this class name to add CSS to your application to style the InfoBox’s as desired. Here’s some sample CSS to give the InfoBox a style similar to the Bing Maps v6.x InfoBox’s: .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .a[...]



Use New Bing Maps Road Imagery In Silverlight Map Control (Unofficially and Unsupported)

Thu, 19 Aug 2010 15:55:00 -0500

Recently the consumer facing Bing Maps site changed the map imagery that is displayed for the Road map mode. This map imagery has not been officially made available for Bing Maps for Enterprise developers to use within their applications. The imagery is only officially available to the Bing Maps consumer website. Unofficially, you can still access the imagery if you know the URL format to get it. Below is an example of using the URL format for the new imagery to display it within the Bing Maps Silverlight Control. I have not seen anything official from Microsoft on this, so I assume that doing this is against their terms of use. You assume any and all responsibility in violating their terms of use if you use the below code. Sorry for the disclaimer, but I don’t want you to tell Microsoft I told you it was ok. Basically, do not use this in a production application, unless you get consent from Microsoft. Now the code… Displaying the Map (XAML): NewBingMapTileSource (C#): public class NewBingMapsTileSource : Microsoft.Maps.MapControl.TileSource{ public NewBingMapsTileSource() : base("{UriScheme}://ecn.t{subdomain}.tiles.virtualearth.net/tiles/r{quadkey}?g=530&mkt=EN-US&lbl=l1&stl=h&shading=hill&n=z") { }} [...]



Loading Microsoft CDN Hosted OpenStreetMap Imagery in Silverlight Bing Maps Control

Thu, 19 Aug 2010 15:42:00 -0500

Recently a new Bing Maps App for OpenStreetMap (OSM) was released. This new feature of the Bing Maps consumer facing website is hosting the OpenStreetMap imagery using the Azure CDN, rather than relying on OpenStreetMap’s server. There has been some question as to whether developers can use the Microsoft hosted OpenStreetMap imagery within their own applications. I have not seen anything official from Microsoft on this, so I assume that doing this is against their terms of use. You assume any and all responsibility in violating their terms of use if you use the below code. Sorry for the disclaimer, but I don’t want you to tell Microsoft I told you it was ok. Basically, do not use this in a production application, unless you get consent from Microsoft. Now the code… Displaying the Map (XAML): OpenStreetMapTileSource (C#): public class OpenStreetMapTileSource : Microsoft.Maps.MapControl.TileSource { public OpenStreetMapTileSource() : base() { this.UriFormat = "{UriScheme}://{3}.osm.virtualearth.net/{2}/{0}/{1}.png" .Replace("{UriScheme}", OpenStreetMapTileSource.PageUriScheme); // <-- set "http" or "https" appropriately } public override System.Uri GetUri(int x, int y, int zoomLevel) { // Randomly decide which server to use string server; var rnd = new Random(); var i = rnd.Next(0, 2); switch (i) { case 1: server = "b"; break; case 2: server = "c"; break; default: server = "a"; break; } // Format Uri for the desired map tile image return new Uri(string.Format(this.UriFormat, x, y, zoomLevel, server)); } internal static string PageUriScheme { get { if ((HtmlPage.IsEnabled && (HtmlPage.Document != null)) && (HtmlPage.Document.DocumentUri != null)) { return HtmlPage.Document.DocumentUri.Scheme; } return "HTTP"; } } }[...]



Silverlight Bing Maps: Draw Circle Around a Latitude/Longitude Location

Mon, 28 Jun 2010 23:43:00 -0500

Over 2 years ago I posted an example of how to draw circles on the Bing Maps JavaScript control. I thought it was about time to update that post to demonstrate how to do this using the Bing Maps Silverlight control. This is basically a C# port of the original JavaScript code. Sometimes this can be really useful, but it isn’t built into the Sivleright Bing Maps Control. So you need to implement it yourself in order to do it. However, instead of writing from scratch, feel free to copy the code from this post. Download Full Source: SLBingMaps_DrawCircle.zip     Here’s example usage: // Draw circle at the location where the user clickedprivate void Map_MouseClick(object sender, Microsoft.Maps.MapControl.MapMouseEventArgs e){ // Get the location the mouse clicked var mousePoint = e.ViewportPoint; var clickedLocation = MainMap.ViewportPointToLocation(mousePoint); // Calculate the points to make up a circle with radius of 200 miles var locations = GeoCodeCalc.CreateCircle(clickedLocation, 200, DistanceMeasure.Miles); // Add Red Polyline to the Map var poly = new MapPolyline(); poly.Locations = locations; poly.Stroke = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0)); poly.StrokeThickness = 2; MainMap.Children.Add(poly); }   And, here’s the code that calculates the location points to make up the circle: /* * Written by Chris Pietschmann (http://pietschsoft.com) * This code is derived from the code posted in the following location: * http://pietschsoft.com/post/2010/03/02/Bing-Maps-JS-Calculate-Area-of-Circle-and-Draw-Circle-on-Map.aspx*/using System;using System.Collections.Generic;using Microsoft.Maps.MapControl;namespace SLBingMaps_DrawCircle{ public enum DistanceMeasure { Miles, Kilometers } public class GeoCodeCalc { public const double EarthRadiusInMiles = 3956.0; public const double EarthRadiusInKilometers = 6367.0; public static double ToRadian(double degrees) { return degrees * (Math.PI / 180); } public static double ToDegrees(double radians) { return radians * (180 / Math.PI); } public static LocationCollection CreateCircle(Location center, double radius, DistanceMeasure units) { var earthRadius = (units == DistanceMeasure.Miles ? GeoCodeCalc.EarthRadiusInMiles : GeoCodeCalc.EarthRadiusInKilometers); var lat = ToRadian(center.Latitude); //radians var lng = ToRadian(center.Longitude); //radians var d = radius / earthRadius; // d = angular distance covered on earth's surface var locations = new LocationCollection(); for (var x = 0; x <= 360; x++) { var brng = ToRadian(x); var latRadians = Math.Asin(Math.Sin(lat) * Math.Cos(d) + Math.Cos(lat) * Math.Sin(d) * Math.Cos(brng)); var lngRadians = lng + Math.Atan2(Math.Sin(brng) * Math.Sin(d) * Math.Cos(lat), Math.Cos(d) - Math.Sin(lat) * Math.Sin(latRadians)); locations.Add(new Location(ToDegrees(latRadians), ToDegrees(lngRadians))); } return locations; } }}[...]



Display Google Maps Imagery using Bing Maps Silverlight Control

Mon, 14 Jun 2010 23:15:00 -0500

I’ve gotten a couple emails asking how to show Google Maps imagery using the Bing Maps Silverlight Control. I previously post how to display OpenStreetMaps and Yahoo maps imagery using the control, but is it possible to show Google Maps imagery too?? Yes, absolutely; well technically, but the Google Maps Terms of Use does prohibit it. Actually, the Google Maps Terms of Use prohibits the direct access of the map tile images, and does not specifically prohibit using them with the Bing Maps Silverlight Control. You may only continue reading if you are willing to break the Google Maps Terms of Use, and see how similar the two mapping platforms really are. Remember the below code most likely violates the Google Maps Terms of Use, and probably shouldn’t be used in a production system; unless of course you really don’t mind breaking the terms of use. The below code follows suite after the code I posted a while back on displaying OpenStreetMap and Yahoo Maps imagery within the Bing Maps Silverlight Control. First, here’s some XAML usage samples using the Google Maps TIle Source classes listed further down. The first one is showing the Google Maps Road/Terrain imagery, the second shows the Google Maps Aerial/Satellite imagery:   If you notice, the second example showing the usage of the Google Maps Aerial/Satellite imagery is displaying 2 tile sources. This is because Google Maps has separate tile sources for both the Aerial/Satellite imagery and the Labels. This example shows the Labels tile source over the top of the Aerial/Satellite tile source to give the desired effect of “Aerial with Labels.” Now, here’s the main attraction of this article; the actual Google Maps TileSource objects referred to above: public class GoogleMapsRoadTileSource : GoogleMapsTileSourceBase{ public GoogleMapsRoadTileSource() : base("http://mt{0}.google.com/vt/lyrs=m@128&hl=en&x={1}&y={2}&z={3}&s=") { }}public class GoogleMapsAerialTileSource : GoogleMapsTileSourceBase{ public GoogleMapsAerialTileSource() : base("http://khm{0}.google.com/kh/v=62&x={1}&y={2}&z={3}&s=") { }}public class GoogleMapsLabelsTileSource : GoogleMapsTileSourceBase{ public GoogleMapsLabelsTileSource() : base("http://mt{0}.google.com/vt/lyrs=h@128&hl=en&x={1}&y={2}&z={3}&am[...]



Resizing and Auto-Scaling Pushpin in Bing Maps Silverlight

Fri, 04 Jun 2010 00:26:00 -0500

Plotting pushpins on the Bing Maps Silverlight control is really simple when using the Pushpin control that comes with the control. But, what if you want to change the size of the Pushpin? It doesn't work to just change the Pushpin.Height and Pushpin.Width properties. This is actually because those properties pertain to the controls Content property. So, how exactly do you go about changing the size of the Pushpin if the Height and Width properties don't work? Use ScaleTransform to Resize Pushpins The answer is simple. All you need to do is use a ScaleTransform. Below is a couple examples, one making the pushpin smaller and the other bigger.                                 You may have noticed that not only does the above example set the ScaleX and ScaleY properties of the ScaleTransform, but the CenterX and CenterY are also set. This is because if we don't set the CenterX and CenterY appropriately the Pushpin will get "moved" from its correct location when the Transform is performed. How did I decide to set CenterX to 17 and CenterY to 35? Well, the Pushpins "default" size sets the Width equal to 34 and Height to 35, and the PositionOrigin to BottomCenter. Since the PositionOrigin is set to BottomCenter, in order to get the pushpin to stay in its correct position on the map we need to set the CenterX to half the Width or 17, and CenterY to the Height or 35. The image to the right shows an example of this in action. Auto Scale Pushpin with Map Zoom Level A neat feature that becomes available with the Bing Maps Silverlight control once you start using ScaleTransforms to modify the size of Pushpins is the ability to change the size of the Pushpins when the Map Zoom Level is changed. All it takes is a little help from a custom IValueConverter and a little Data Binding. The image to the right shows this in action. Both sides of the image were not resized at all, the difference in size of the Pushpins is due to the usage of the following code. First, we'll add some Pushpins to a Map and set the Pushpins RenderTransform property binding to bind it to the Map's ZoomLevel property and set it to use a custom converter.                         Next, make sure you declare the PushpinScaleTransform static resource in the UserControl, Page or App. Also, don't forget to include the namespace, in the below example I named it "local".     <[...]



Draggable Pushpins using Bing Maps Silverlight Control

Sun, 30 May 2010 08:39:00 -0500

Using a map to visualize data within an application is great, but you must first get the location of the data to be displayed. If you have the address you can geocode it using the Bing Maps Web Services, but "What if you can't geocode it?" Or, "What if the geocoding can't find the address?" Well, if your user knows where the location is, then you can have them point it out by clicking on the map. Creating Pushpins in response to a users click is nice, but wouldn't it be even nicer if they could "Click and Drag" the Pushpin around to define/edit/change the location of the data entity? I have even seen this discussed a bit in regards to the Bing Maps Silverlight Control, and it isn't something that is built into the map control directly. However it isn't too difficult to implement, if you know what to do. So I decided to create and post a simple "DraggablePushpin" object deriving from the "Microsoft.Maps.MapControl.Pushpin" object that implements Dragging in a nice, self contained fashion. There's no need to wire up any events, you simple add a "DraggablePushpin" to you Map, and the user can drag it around. Here's the code for the "DraggablePushpin": public class DraggablePushpin : Microsoft.Maps.MapControl.Pushpin { private bool isDragging = false; EventHandler ParentMapMousePanHandler; MouseButtonEventHandler ParentMapMouseLeftButtonUpHandler; MouseEventHandler ParentMapMouseMoveHandler; protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e) { // Check if the Map Event Handlers have been created/attached to the Map // If not, then attach them. This is done in the "Pushpin.OnMouseLeftButtonDown" // event because we don't know when the Pushpin is added to a Map or MapLayer, but // we do konw that when this event is fired the Pushpin will already have been added. var parentLayer = this.Parent as MapLayer; if (parentLayer != null) { var parentMap = parentLayer.ParentMap; if (parentMap != null) { if (this.ParentMapMousePanHandler == null) { this.ParentMapMousePanHandler = new EventHandler(ParentMap_MousePan); parentMap.MousePan += this.ParentMapMousePanHandler; } if (this.ParentMapMouseLeftButtonUpHandler == null) { this.ParentMapMouseLeftButtonUpHandler = new MouseButtonEventHandler(ParentMap_MouseLeftButtonUp); parentMap.MouseLeftButtonUp += this.ParentMapMouseLeftButtonUpHandler; } if (this.ParentMapMouseMoveHandler == null) { this.ParentMapMouseMoveHandler = new MouseEventHandler(ParentMap_MouseMove); parentMap.MouseMove += this.ParentMapMouseMoveHandler; } } } // Enable Dragging this.isDragging = true; base.OnMouseLeftButtonDown(e); } #region "Mouse Event Handler Methods" void ParentMap_MousePan(object sender, MapMouseDragEventArgs e) { // If the Pushpin is being dragged, specify that the Map's MousePan // event is handled. This is to suppress the Panning of the Map that // is done when the mouse drags the map. if (this.isDragging) { e.Handled = true; } } void ParentMap_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)[...]



Awarded 2010 Microsoft MVP - Windows Live Platform

Thu, 01 Apr 2010 11:53:00 -0500

(image) "Congratulations! We are pleased to present you with the 2010 Microsoft® MVP Award!"

I'm happy to announce that I've been awarded the Microsoft MVP award for the third year in a row. Just like last year, I've been awarded within the "Windows Live Platform" category. The "Windows Live Platform" category includes the Bing Maps SDK (both JavaScript and Silverlight Map Controls) which is the product/technology that I work with and help out others with the most in this category.

Congratulations to all other April MVP's, both new and renewed!

If you're not familiar with what the Microsoft MVP Program is you can find more information about it here: http://mvp.support.microsoft.com/gp/mvpawardintro




Bing Maps JS: Calculate Area of Circle and Draw Circle on Map

Tue, 02 Mar 2010 12:24:00 -0500

Something that can be usefull at times in being able to calculate the total Area of a circle, especially when plotting it on a map. So, I decided to slightly modify my "Draw a Circle Radius Around Lat/Lng Point" to make it also calculate the Area of the circles and display that value within the TItle of the Circle Shapes Pushpin.

Remember, back in Trig class, it's fairly simple to calculate the area of a circle. You just Multiply Pi by the Radius Squared.

Area = Pi * (radius * radius)

Anyway, I know this isn't a very advanced math problem. If fact it's much simpler than calculating out the point that make up the circle in the first place. However, I thought I'd post it since it may be usefull to someone that maybe doesn't quite remember this little trick from Trig class.

Here's the full, modified source code that contains this:

DrawRadiusCalcArea_JS_BingMaps.zip (3.28 kb)




Prototype of OpenStreetMap Silverlight Control using DeepEarth and Bing Maps SDK

Fri, 13 Nov 2009 07:40:00 -0500

I’ve decided to expand a little on using OpenStreetMap imagery with the new Bing Maps Silverlight Control in response to the following comment posted by John O’Brien on my previous “Display OpenStreetMap Imagery using Bing Maps Silverlight Control v1” post: “Very close Chris but you will still need to enter a Bing Maps AppID. If however you create your own map from MapCore and don't use the Bing Maps services then you don't need creditials” Yes, it is true that by just displaying the OpenStreetMap imagery on the Bing Maps Silverlight Control using a custom TileSource you still need to provide the control a Bing Maps Key (App ID). However, what if you inherited from the “MapCore” base class (the same one that the Bing Maps “Map” object inherits) and built out a full OpenStreetMap Map control? Custom “OpenStreetMap” Control I built out a test “OpenStreetMap” object that inherits from “MapCore” that automatically sets the Map Mode to a “OpenStreetMapMode” object that loads up the OpenStreetMap imagery automatically. This was some simple code to write, basically just extending only a little bit on top of what I posted in the previous post. Here’s the code for the “OpenStreetMap”, “OpenStreetMapMode” and “OpenStreetMapTileSource” objects: using System; using Microsoft.Maps.MapControl; using Microsoft.Maps.MapControl.Core; namespace SilverlightApplication1 { public class OpenStreetMap : MapCore { public OpenStreetMap() : base() { this.Mode.SetView(new Location(), 2.0, 0.0, 0.0, false); this.Mode = new OpenStreetMapMode(); } } public class OpenStreetMapMode : RoadMode { public OpenStreetMapMode() : base() { var tileLayer = (MapTileLayer)this.Content; tileLayer.TileSources.Clear(); tileLayer.TileSources.Add(new OpenStreetMapTileSource()); } } public class OpenStreetMapTileSource : TileSource { public OpenStreetMapTileSource() : base("http://tile.openstreetmap.org/{2}/{0}/{1}.png") { } public override System.Uri GetUri(int x, int y, int zoomLevel) { return new Uri(string.Format(this.UriFormat, x, y, zoomLevel)); } } }   And, here’s an example of using this new “OpenStreetMap” control:   What About Navigation Contr[...]



Display OpenStreetMap Imagery using Bing Maps Silverlight Control v1

Thu, 12 Nov 2009 09:02:00 -0500

The Bing Maps Silverlight SDK documentation on MSDN contains an article on Adding Tile Overlays to the Map, that demonstrates how to overlay your own map imagery over top of the Bing Maps Imagery. However, what if you want to completely replace the Bing Maps Imagery with some other Imagery like the OpenStreeMap Imagery? In the “Adding Tile Overlays to the Map” article it shows using a “LocationRectTileSource” to add the custom map imagery overlay. To implement the OpenStreetMap imagery you will need to create a simple class that inherits from “TileSource” since you wont be restricting the imagery to only a small portion of the map, but instead will be showing all the OpenStreetMap Imagery in place of the Bing Maps Imagery. First, Hide the Bing Maps Imagery Since we will be displaying the OpenStreetMap imagery instead of the Bing Maps Imagery, we want to prevent the Map control from loading/displaying the Bing Maps Imagery completely. To do this, all you need to do is set the Maps Mode to an instance of the “MercatorMode” object:   Display OpenStreetMap Imagery Next, we will create a simple “OpenStreetMapTileSource” class that inherits from “TileSource” that will be used to specify the location (URI) of the OpenStreetMap Imagery so the Map control can load and display it. Here’s the simple OpenStreetMapTileSource class: public class OpenStreetMapTileSource : Microsoft.Maps.MapControl.TileSource { public OpenStreetMapTileSource() : base("http://tile.openstreetmap.org/{2}/{0}/{1}.png") { } public override System.Uri GetUri(int x, int y, int zoomLevel) { return new Uri(string.Format(this.UriFormat, x, y, zoomLevel)); } }   Now to put the OpenStreetMapTIleSource in place and actually display the OpenStreetMap Imagery. To do this, we will add a new MapTileLayer to the Maps Children collection, and add an instance of our OpenStreetMapTileSource object to the MapTileLayer objects TileSources collection. Here’s the code to do this: [...]



Getting Started with Bing Maps Silverlight Control v1.0

Thu, 12 Nov 2009 05:45:00 -0500

It’s been 8 months since the CTP release of the Bing Maps Silverlight Control at MIX’08, and finally this week Microsoft released the Final v1.0 release of the control to the web.  Now, we can all finally start using the Bing Maps Silverlight Control in Production! If you’ve worked with the CTP, then you’ll want to take a look at Ricky’s “Migrating from Bing Maps Silverlight CTP to Production Version” article. It explains all the stuff you’ll need to modify within your project in order to gracefully switch from the CTP to the v1 Map Control. Now for those of you who haven’t worked with the CTP… Where to Start? First you’ll need to make sure you have the following Tools installed: Visual Studio 2008 SP1 –or- Visual Web Developer 2008 Express with SP1 Silverlight 3 Tools for Visual Studio 2008 SP1 Of course you’ll also need to at least be familiar with the basics of Silverlight development. I’m mostly referring to XAML, so if your familiar with WPF that should be enough to get you started. For those Bing Maps (formerly Virtual Earth) developers new to Silverlight; If you need a little help getting started learning the basics, here are some resources that will help you get started: Getting Started Building Silverlight Applications at Silverlight.net Silverlight Learning Resources at Silverlight.net Now that you have all the necessary tools installed, you can go ahead and download and install the Bing Maps Silverlight v1 Control. Download: Bing Maps Silverlight Control SDK Version 1.0 The installer will install the Bing Maps Silverlight Control within the “Program Files” on your computer, along with an SDK Documentation Help (.chm) file. If you would like to see the Bing Maps Silverligth Control “In Action” and see the source code that powers each example, then you’ll want to check out the Bing Maps Silverlight Control Interactive SDK. Display a Basic Map Create a New Silverlight Application Project Run VIsual Studio 2008 and Create a New Project using the Silverlight Application template. In the “Add Silverlight Application” dialog box, select “Host the Silverlight application in a new Web site” option and click “OK”. You must select this option to create an ASP.NET Web Application Project, ASP.NET Website, or ASP.NET MVC Website because the URL Access Restrictions in Silverlight require the page that hosts the Map control be hosted using HTTP in order to load/access the Map TIle Imagery.   Add a Reference to Microsoft.Maps.MapControl.dll Go to the “Solution Explorer” and RIght-Click “ References” in the Silverlight Project (not the ASP.NET Web Application Project), and Select “Add Reference…”   Within the “Add Reference“ Dialog, Select the “Browse“ tab and navigate to the folder where the SDK is installed, then select the “Microsoft.Maps.MapControl.dll” and “Microsoft.Maps.MapControl.Common.dll” files. Note: Be Default the SDK is installed in this folder on x64 version of Windows: “C:\Program Files (x86)\Bing Maps Silverlight Control\V1\Libraries”. On x86 (or 32-bit) versions of Windows it’s installed within the “Program Files” folder instead of “Program Files (x86)”.   Display a Bing Maps Map! Add a Namespace declarati[...]



MvcMaps Preview 1 – A Unified Bing/Google Maps API for ASP.NET MVC

Mon, 02 Nov 2009 22:01:00 -0500

I spent some time lately working on bringing some of the concepts of Web.Maps.VE to ASP.NET MVC. The concepts I’m referring to are Simplicity and Ease of Development in making the implementation of mapping within ASP.NET MVC applications as simple as possible along with the Flexibility and Customizability of the Base Mapping API itself. Then I thought, Since I’m building an abstraction layer to simplify Bing Maps development, why not implement it in a flexible manor as to be able to support other Mapping API’s as well? The result of such an effort in a nice Unified API that allows virtually the same code to be written when implementing either Bing Maps or Google Maps. In fact, all you need to do to change your application over to using one mapping provider instead of the other is to just change a single line of code. Sound too good to be true? I introduce you to the all new “MvcMaps” project, and I’m releasing it as Open Source under the Microsoft Public License. Source Code: MvcMaps Preview 1 (698Kb) Preview Release? This initial release is just a “Preview” release and isn’t really meant for production use, although there’s absolutely nothing stopping you from using it in such an environment. Introduction The above source code download link contains the full source code for the component, plus a very basic “Interactive SDK” style website demonstrating some basic examples of using it. The following snippet is the most basic example of how to add both a Bing Map and a Google Map within a View: <%@ Import Namespace="MvcMaps" %>

Bing Map

<% Ajax.BingMap() // Create a Bing Map .CssClass("BingMap") // Define the CSS Style to use. These specify the Maps Size .Render(); // Render all the HTML / JavaScript necessary to create the Map to Server.Response %>

Google Map

<% Ajax.GoogleMap() // Create a Google Map .CssClass("GoogleMap") // Define the CSS Style to use. These specify the Maps Size .Render(); // Render all the HTML / JavaScript necessary to create the Map to Server.Response %>   Notice that the code is idential, except for the “BingMap” and “GoogleMap” parts. That is how you define the specific mapping provider to use, but the rest of the code is the same. Plotting Pushpins, Polylines and Polygons Adding some Pushpins, Polylines and Polygons is extremely simple, and its the same code for both Bing Maps and Google Maps! Here’s a basic example of adding one of each: <% Ajax.BingMap().CssClass("BingMap") // Add Pushpin Shape .AddPushpin( new Pushpin(39.9097362345372, -97.470703125, "Some Pushpin Title", "Some Pushpin Description") ) // Add Polyline Shape .AddPolyline( new Polyline(new List() { new LatLng(48.166085, -121.11328), new LatLng(34.270835, -118.34472), new LatLng(43.041543, -87.901954), new LatLng(38.889546, -77.035338) }) { LineColor = "#0000FF", LineWeight = 6 } ) // Add Polygon Shape .AddPolygon( new Polyg[...]



Easily Convert Between HTML and RGB Colors using JavaScript

Sat, 24 Oct 2009 14:08:00 -0500

To make things easier for converting between HTML Colors and RGB Colors using JavaScript I wrote the below “ColorConverter” object. This object has 2 methods that easily allow you to convert between HTML Colors (ex: #FF33C2) and RGB Colors (ex: 255, 0, 233). There isn’t anything built into JavaScript for doing this, and it can come in very handing when working with the Bing Maps VEColor object.

Usage Examples:

var rgb = ColorConverter.toRGB("#FF000A"); // returns {r:255, g:0, b:10}

var htmlColor = ColorConverter.toHTML(255,0,14); // returns "FF0021"

// Also supports 3 character HTML color values like the Web Browsers and CSS do
rgb = ColorConverter.toRGB("#DDD"); // returns {r:255, g:255, b:255}

Full Code for the “ColorConverter”:

(function(){
    window.ColorConverter = {
        toHTML: function(r, g, b){
            return $ensureHexLength(r.toString(16)) + $ensureHexLength(g.toString(16)) + $ensureHexLength(b.toString(16));
        },
        toRGB: function(color){
            var r, g, b;
            var html = color;
            
            // Parse out the RGB values from the HTML Code
            if (html.substring(0, 1) == "#")
            {
                html = html.substring(1);
            }
            
            if (html.length == 3)
            {
                r = html.substring(0, 1);
                r = r + r;
                
                g = html.substring(1, 2);
                g = g + g;
                
                b = html.substring(2, 3);
                b = b + b;
            }
            else if (html.length == 6)
            {
                r = html.substring(0, 2);
                g = html.substring(2, 4);
                b = html.substring(4, 6);
            }
        
            // Convert from Hex (Hexidecimal) to Decimal
            r = parseInt(r, 16);
            g = parseInt(g, 16);
            b = parseInt(b, 16);
        
            return {r: r, g: g, b: b};
        }
    };
    
    function $ensureHexLength(str){
        if (str.length == 1){
            str = "0" + str;
        }
        return str;
    }
})();



Simplovation Web.Maps.VE v3.0 Now With FREE Edition!

Wed, 26 Aug 2009 18:57:00 -0500

(image) Today, I just posted the latest Web.Maps.VE v3.0 release. The coolest thing about this new version is that is has a FREE Edition for non-commercial use!

Download Web.Maps.VE v3.0 FREE Edition!

There are a few new things in this latest release, but the most significant are the following performance updates:

  • Microsoft CDN (Content Delivery Network) Support Added. This helps improve the Bing Maps content delivery speed by up to 82%
  • JavaScript Performance Optimizations. All the JavaScript code internally within the control has been optimized to increase the overall speed of the Web.Maps.VE Map controls functionality.


Check out the following link to see what has all been included in this release:
https://simplovation.com/page/webmapsve30/roadmap.aspx

Also, this new version release is a completely FREE upgrade to all existing customers who have already purchased Web.Maps.VE v2.0. If you have previously purchased v2.0, then there is nothing required to obtain your v3.0 license other than going to the "My Licenses" page to download the DLL and License Activation File. If for some reason you have trouble obtaining your Free Upgrade to v3.0, please let us know and we'll get it activated as soon as possible.