Virtual Earth Map Control v3 – Great new features!


We are happy to announce the availability of version 3 of the Virtual Earth Map Control.  This exciting new control comes with dozens of enhancements, including new features not available in any of the previous versions, simpler integration, better compatibility, and much much more.



New Features



Like using maps, aerial imagery, and bird’s eye? Then you’ll love doing it with support for :




  • Place/Address lookups (Geocoding) – With a simple new Find() method, you can easily add a Where box to your application to allow users to input addresses, cities/towns, zip codes, landmarks or other locations and quickly and easily pinpoint them on the map. Support for handling ambiguous addresses is included as well.


  • Driving Directions/Routing and Polylines – Driving directions, routing and polylines. The new route methods allow developers to quickly enable driving directions from one location to another in their application. You also can create your own custom polylines for highlighting key information on maps and imagery.


  • Quick data-binding for GeoRSS – Now, you can quickly a simply bind data to pushpins using the standard data format GeoRSS. Just point the control at your GeoRSS file or service and it will automatically manage the process of creating pushpins and pop-ups.


  • Public Collection layers – Even easier than creating a GeoRSS file, you can bind a Windows Live Local public collection to the control. Just build a public collection of your favorite places in your local town or a listing of your business’ locations, drop the map control in your web page using the sample code in the SDK and point it to your collection—voila, instant mashup.


  • Built in pushpins and pop-ups – Now, you can quickly use our methods to create pushpins and pop-ups in the default style without having to design them yourselves. Of course, the very popular, simple methods for rolling your own are still there as well; so you have your choice from easy default styles to full look and feel control.

What is gone is just as important as what we have added: no more proxies, less includes, and simpler methods. Search, bird’s eye and routing are no longer dependant on proxies to operate correctly. Just call the new, simple methods like Route and Find and they just work. And, the control can be used with just a single file referenced from your site. Gone are the days of different includes for style sheets, scripts, compatibility support, etc. Just include the control once and it does all the rest.



Improved SDK



Improved isn’t even the word.  In addition to the usual MSDN-style documentation in web and CHM formats, we also have a cool new interactive SDK that lets you learn about and experiment with the map control all inside the SDK website.  You can get started in seconds writing your first VE app or polishing up on the new APIs and easily test out all the new functionality. Give the new Virtual Earth interactive SDK a try.



International Expansion



With this release, we have expanded international coverage of maps and imagery, including the first bird’s eye outside the US, namely in the UK (here’s a collection with some of the highlights). We will continue to expand the coverage of bird’s eye across the US, UK and other areas, rolling out additional imagery on a regular basis.


Aerial imagery has also been improved. In the UK, we have detailed aerial imagery of most of England and We also have improved the base level coverage for aerial imagery, bringing it down to level 13 world wide, from level 8 previously (see here for details on level 13’s resolution).


We have expanded road map and routing/directions coverage to a number of countries (English only, localization will come later). UK and Canada both have major highway and city/town level detail for maps and routing. Western Europe, Australia, and a few other areas have city to city routing on major highways and thoroughfares.



v2 Still Supported



All new applications should be built on the v3 Map Control, but for those users who are using the v2 control in your application, you will have plenty of time to migrate over v3 (see above and check out the new SDK for all the reasons why you should). The v2 SDK will continue to be available in the MSDN library archives. We will announce official support timelines for v2 and v3 controls in the near future—stay tuned to this blog for updates.


This new version of the Virtual Earth Map Control adds a ton of new functionality, and we are interested to know what you want think of it. So, post a comment or send us an email. Thanks.



Windows Live Local



Oh yeah, and a great new version of Windows Live Local was released today as well. In addition to the international support it shares with the map control, it includes support for saving your scratch pad to the cloud as a collection; sharing your collections with friends, family, and others through email, IM, or your blog (not to mention through mashups); and keeping track of the best collections you have received with Windows Live Favorites integration. It also adds real-time traffic for about 35 US metros including New York city, LA, Seattle, and DC. Take it for a spin.

Comments (59)

  1. The WLL dev team have

    pushed out a big update with

    lots of new features. The one feature that *I*…

  2. pcoulter says:

    I literally finished my initial version of a site using v2 today.  When I checked it tonight it was broken, because I was referencing the local.live.com js file that supported VE_Panel.  I started working on converting to v3, but there appears to be no VE_Panel-esque feature.  At first glance, the VELayerSpecification appears to be much less flexible in how I can manipulate the look and feel.  Can you provide some explanation as to why the VE_Panel was abandoned and what the recommended course of action to replace that functionality would be?  Thanks in advance…

  3. We just rolled out our new version of Windows Live Local "Discovery" release. Here is a quick run down…

  4. MSDN Archive says:

    Always be sure to reference the Map Control on dev.virtualearth.net, as it is the one that doesn’t get brpoken by the consumer site.  If you point your v2 app at that it should work again so long as you followed the SDK.

    As far as v3 substitute for VE_Panel, it wasn’t a supported method in the SDK and its closest replacment is AddControl.  It is a more general, and let’s you add you own DIV and custom content, with more control over the look and feel.  

    Alex

  5. pcoulter says:

    Alex, thanks for the quick feedback.  I spotted that AddControl method after I’d posted, and thought that might be the solution.  Another quick(er) question: How do we put text on top of our pushpin, if we want to number them like on local.live.com?  Also, any chance that there’ll be some sort of searchable developer’s forum any time soon?

    Thanks,

    Pete

  6. Ogle Earth says:

    Blogging Microsoft Virtual Earth (aka "Live Local") is not really part of the mandate of Ogle Earth as long as it remains a 2D mapping application, but some aspects of the version that went live last night have a bearing…

  7. I just read this on the Virtual Earth developer blog.  There are some cool new dev features…

  8. MSDN Archive says:

    To put text on your pushpin, use a custom one, not the default style.  You can then use a DIV, with whatever text you want in it, as your pushpin.

    Alex

  9. Via the MSN <a href="http://blogs.msdn.com/virtualearth/archive/2006/05/23/596729.aspx" target="_blank">Virtual Earth developer weblog</a>, VE map control 3 has been released with numerous enhancements including geocoding,

  10. pcoulter says:

    I apologize if I’m missing something obvious, but the AddPushpin method only takes a VEPushpin class.  I don’t see how to construct a VEPushpin instance that will allow me to use a DIV as my pushpin.  Should I look to use AddControl here as well?  Thanks again for the help.  I’m quite eager to take advantage of the cool new features of v3, but first I’ve got to get my app back to where it was with v2.

  11. cthota says:

    pcoulter: you can add a pushpin with custom content as shown below:

    //Create a pushpin

    var pushpin = new VEPushpin(‘1’, //Id – must be unique

       new VELatLong(47.6, -122.33), //latitude, longitude

                               null, //icon url

                               ‘Seattle’, //Title

                               ‘The emerald city’  //Notes);

    //Add it to the map

    map.AddPushpin(pushpin);

    Now the "The emerald city" in the Notes field could have been something like below:

    //Create a pushpin

    var pushpin = new VEPushpin(‘1’, //Id – must be unique

       new VELatLong(47.6, -122.33), //latitude, longitude

                               null, //icon url

                               ‘Seattle’, //Title

                               ‘<div><b>The City</b><br>This rocks!</div>’  //Notes);

    //Add it to the map

    map.AddPushpin(pushpin);

    That creates custom text in your pushpin.

    Hope tha thelps.

    Thx,

    Chandu Thota

  12. Tim Sneath says:

    It’s great to see how agile the Windows Live Local / Virtual Earth team are – they’ve just released what…

  13. The Map Room says:

    Windows Live Local got a major update today; see the official blog for an overview of what they call &quot;the biggest release yet of Windows Live Local.&quot; The update includes real-time traffic data (the TechCrunch post covering the launch has…

  14. pcoulter says:

    Chandu, thanks for the sample code, but I’m afraid that my question may not have been clear.  I want to know how to superimpose the "1" over the pushpin, so that I can match the pushpin to an ordered list of results.  Here’s a sample page I set up to hopefully clarify what I mean: http://www.showtimemaps.com/v3pushpin.htm

  15. Effective now, if you sign on to http://local.live.com

    you will see new features.

    Tonight, we launched…

  16. I’m really impressed by the new Local Live release (you’d might say ‘you would say that’ ’cause I work…

  17. Microsoft has announced some updates to thier Windows Live Local service&amp;nbsp;(I really hate that name).&amp;nbsp;Then…

  18. crpietschmann says:

    There’s a bug in it. When you place a map on a page a JavaScript error occurs. The error even occurs on the Virtual Earth Interactive SDK site.

    Line: 2

    Char: 159480

    Error: ‘footer’ is undefined

    This error occurs in both IE6 and IE7Beta2.

  19. Windows Live Local (Virtual Earth) has released a new Beta version of their online mapping application,…

  20. NHJim says:

    Is there an simple way to get colored pushpins?

    The red default one is great.

    How can I get a blue – green – orange pushpin?

    I tried the URL to a few of the Google Pushpins and they look like crap – not transparent.

    So is there a link to the other pushpins that I could use?

    Also,

    Could I get some sample code on the VEPushpin

    iconStyle – titleStyle and detailsStyle

    I used the Interactive SDK and cut and pasted the code for the callback – but the alert is just a message box – I would love to make it yellow like your demo shows

    same with you demo text and the title and detail lines – yours is much nicer than the crappy black

    in V2 I got color boxes to work with STYLE for the pin events – but this is no longer working in V3

    http://www.ccsol.us/MSMap/RibFestParking.aspx

    This is changing my life – next I will add a collection and directions to each parking lot.

    Our event is 2 weeks away – all profits are given to charities…

    RotaryRibFest.org – then directions button

  21. wjcygan says:

    V3 is looking very nice, indeed.

    One thing: On local.live.com, the dashboard has a little glyph (^) that allows it to be collapsed and expanded. Is that available through the SDK? I couldn’t find it.

    Thanks.

  22. NHJim says:

    I can get this to work

    map.HideDashboard();

    But if I try

    map.HideScaleBar();

    It is not a defined object

    How can I turn off the Scale Bar?

  23. MSDN Archive says:

    NHJim –

    The nifty alert box you see on my interactive SDK page is just a DIV that I show for 5 seconds.

    1. In the HTML, create a DIV element and set the class to whatever name you want to use:

    <div id="alertdiv" class="alert"></div>

    2. In the CSS, set the style. Here’s mine:

    div.alert {

    position: absolute;

    top: 0;

    left: 0;

    width: 350px;

    margin: 160px 0px 0px 300px;

    border:#666666 2px solid;

    padding:1px 5px 1px 5px;

    background-color: #FEFF5B;

    filter:alpha(opacity=85);

    opacity:.85;

    display: none;

    font-size:8pt;

    }

    3. And then, instead of calling "alert(‘message’)", call a custom function:

    Here’s the javascript:

    function DoAlert(text)

    {

    var d=document.getElementById("alertdiv")

    d.style.display="inline";

    d.innerHTML = text;

    setTimeout(function() {document.getElementById("alertdiv").style.display="none";} , 5000);

    }

    For your other questions, everything done on that page is done with CSS…the style of the pushpin title, description, etc. The sample code in the SDK shows how to assign a class to each of those elements; its then just a matter of defining the class in the CSS file.

    Hope that helps!

    Caleb

    Oh, and HideScaleBar is not a function. There is no way to hide that.

  24. MSDN Archive says:

    NHJim –

    The nifty alert box you see on my interactive SDK page is just a DIV that I show for 5 seconds.

    1. In the HTML, create a DIV element and set the class to whatever name you want to use:

    <div id="alertdiv" class="alert"></div>

    2. In the CSS, set the style. Here’s mine:

    div.alert {

    position: absolute;

    top: 0;

    left: 0;

    width: 350px;

    margin: 160px 0px 0px 300px;

    border:#666666 2px solid;

    padding:1px 5px 1px 5px;

    background-color: #FEFF5B;

    filter:alpha(opacity=85);

    opacity:.85;

    display: none;

    font-size:8pt;

    }

    3. And then, instead of calling "alert(‘message’)", call a custom function:

    Here’s the javascript:

    function DoAlert(text)

    {

    var d=document.getElementById("alertdiv")

    d.style.display="inline";

    d.innerHTML = text;

    setTimeout(function() {document.getElementById("alertdiv").style.display="none";} , 5000);

    }

    For your other questions, everything done on that page is done with CSS…the style of the pushpin title, description, etc. The sample code in the SDK shows how to assign a class to each of those elements; its then just a matter of defining the class in the CSS file.

    Hope that helps!

    Caleb

    Oh, and HideScaleBar is not a function. There is no way to hide that.

  25. pjakubo86 says:

    I am wondering why the Find() function doesn’t return the same things as local.live.com.  For example, in this area, Live Local shows a Starbucks, a Target, and a Panera: http://local.live.com/default.aspx?v=2&ss=starbucks~target~panera&cp=39.668939~-86.087437&style=h&lvl=14&scene=2544349.  

    However, when I do a Find() on the same area for any of those keywords, nothing is returned.  What is going on here?

  26. pjakubo86 says:

    Also, it seems as though when the default pushpin is added, the "point" of the pin does not point to the desired coordinates.  Instead, the pushpin image is centered at the coordinates, so that the middle of the red square is on the desired coordinates.  Is this the wanted effect or am I doing something wrong?

    This effect can be seen by using the following code:

    var pin = new VEPushpin(4, map.PixelToLatLong((event.clientX – map.GetLeft()),(event.clientY – map.GetTop())));

    map.AddPushpin(pin)

    The pushpin point is not added directly at the tip of the cursor, but rather somewhere in the middle of the cursor.

  27. alYsa says:

    BUGS:

    method VEMap.Find(what, where, index, callback);

    if what is null or empty – then callback is not being called.

    method VEMap.FindLocation(where);

    i saw in VE.js file that it actually has second parameter that is callback (would be nice that it would be documented):

    VEMap.FindLocation(where, callback);

    but of course callback does not work because it uses VEMap.Find(null, where, 1, callback);

    Also it is annoying that default pushpin centers on location (probably image should be made the way so center would be on tip – though i made my own pushpin – so does not matter)

  28. alYsa says:

    One more annoying thing. If I enter this in Where: "S Sunnyvale ln, Madison, WI, 53713, United States" and click find, then it would show me warning dialog, saying that the closest match to "S Sunnyvale ln, Madison, WI, 53713, United States" is exactly the same as I entered.

    So if you find matching address why do you show warning?

    Same happens with other addresses.

  29. The Live Local team shipped a major update this week with a bunch of new unique features. Coverage…

  30. mfarooq@gmail.com says:

    Hi,

    I wanted to change from V2 to V3 but it seems hard to do that. As I am developing a map application for sharepoint. where I cannot add the javascript as in normal html page. for that purpose I used V2 javascript and downloaded it locally. that was working fine. Problem is now how and from where I can download V3 javascript file to work. Please help me out as it is really urgent.

    Thanks

  31. We are happy to announce the availability of version 3 of the Virtual Earth Map Control, including exciting…

  32. I’m seeking Aussie mash-ups using Virtual Earth Map Control

    v3

    Anyone tried this yet? Who is going…

  33. alYsa says:

    Another BUG:

    VEMap.prototype._AddControlInner=function(sB,tB){



    document.body.appendChild(sB);

    }

    it should appendChild to VEMAP control, and not to the body. Because of this bug – If map is not positioned in top/left corner – then Find control and other controls added to the map will be positioned relatively to the screen not the map.

  34. We are happy to announce the availability of version 3 of the Virtual Earth Map Control, including exciting…

  35. Luke Peters says:

    In version 2 I was able to pass an array containing Zip Codes to the server, I would wait for the map to center on the Zip location then place the pin at the center of the map.

    I cannot seem to find a way to do that in V3.  I get only one Pin at the original center.  Any Ideas?

  36. lowtech189 says:

    I am having a couple problems using v3. One is that Pushpins I add to the map always show up at the center of the map display instead of at the LatLong I gave the Pushpin.

    I instead tried creating a square Polyline centered at the LatLong and had the same problem–the Polyline is centered in the map display. Though it does appear to have the correct height and width.

    The other problem: I registered the ‘mouseclick’ event, but when I click-and-release the mouse on a point, nothing happens. It’s only after I click, drag, and release the mouse button that a Pushpin (or Polyline) is created.

    Any ideas?

  37. lowtech189 says:

    Note: In my previous post I should have stated that I am trying to use the ‘mouseclick’ event to create a Pushpin at the LatLong where the user clicks.

  38. mmikey121 says:

    footer is undefined javascript error with map 3

    I only have this problem when i place the map control on a masterpage page.

    Any ideas?

    thx

  39. Leo77 says:

    calebt, that timeout to hide the alert again is kinda not smooth. Aren’t there some sort of OnMouseOut OnClick functions? With V1 I could define an image with all the MouseOvers/Outs/Clicks I wanted.

    I’m trying things now to make it so that when my mouse moves over the ‘custom’ pin that the popup div stays and moves with my mouse as long as I am on the pin and dissapears _immediately_ when I’m not on the pin anymore.

    And clicking?

  40. Leo77 says:

    Have working workarounds now for the custom pins with mouseouts/onclicks.

    Whenever OnMouseOverCallback is executed I define a div that is as large or 1 pixel larger than the custom pin located above the original pin based on the x y that the OnMouseOverCallback function gives. That div can have the usual mouseouts/onclicks etc. I did it with an image in the div, can do all sorts of things this way.

  41. Le mois dernier, le blog Virtual Earth nous a annonc&#233; la mise en ligne de la version 3 du contr&#244;le Virtual…

  42. dat says:

    Is it possible to create a pushpin with text on it without supplying a url to an image — like the "MyPin" in v2 examples?

    From this post above:

    http://blogs.msdn.com/virtualearth/archive/2006/05/23/596729.aspx#606393

    I infer from alex’s comment that it can be done.  If so, what is to be supplied for the "icon_url" parameter of the VPpushpin Constructor?

    thanks

  43. dat says:

    I have managed to replace the icon with "on the fly" text, but the text won’t stay put now — whenever the map zoom level is changed, the marker jumps the center of the map.

    How can the text be made to stay where it is placed originally?

    Thanks

    Also, a bug report:  Load the page below and note that the scale is set for 10 miles.  Then nudge the map a little and watch the scale text change to 9 miles.

    ========================================

    <html>

     <style type="text/css" media=screen>

     <!–

       .pin

       {

         width:5px;height:5px;

         font-family:Arial,sans-serif;

         font-weight:bold;font-size:8pt;

         color:Black;overflow:visible;

         text-align:center;background:#00dd55;

         z-index:1;

       }

       .bb

       {

         width:180px;height:20px;

         font-family:Arial,sans-serif;

         font-weight:bold;font-size:10pt;

         color:Black;overflow:visible;

         text-align:center;background:#f4f805;

         z-index:1;

       }

       .bc

       {

         width:200px;height:20px;

         font-family:Arial,sans-serif;

         font-weight:bold;font-size:15pt;

         color:Black;overflow:visible;

         text-align:right;background:#f4d8f5;

         z-index:1;

       }

     –>

     </style>

    <script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"&gt;

    </script>

    <script>

    var map = null;

    var pinID = 1;

    function GetMap()

    {

    map = new VEMap(‘myMap’);

    map.LoadMap();

    map.HideDashboard();

    map.SetZoomLevel(10);

    }

    function AddPin()

    {

    var t = new Date().getTime().toString().slice(8);

    var pnt = new VELatLong(50, -100);

         var pin = new VEPushpin(‘pin1’,

                  pnt,

                  null,

                 ‘<a href="http://www.google.com">Google</a&gt; ‘,

                 ‘text ‘,

         ‘pin’,

         ‘bb ‘,

         ‘bc’

                 );

           map.AddPushpin(pin);

    map.SetCenter(pnt);

    var d=document.getElementById("pin1");

    var vo = d.outerHTML;

    var yor = vo.replace("<A ","<span ");

    var yor = yor.replace("</A>",t+"</DIV></span>");

    var yor = yor.replace("IMG","DIV");

    var yor = yor.replace(‘src=’+’"’+’http://local.live.com/i/pins/poi_usergenerated.gif‘+’"’,"");

    d.outerHTML = yor;

    }

    </script>

    <body onload="GetMap();AddPin();">

    <div id=’myMap’ style="width:500px; height:500px;"></div>

    </div>

    </body>

    </html>

  44. semanticxq says:

    The new 2nd principle of thermodynamics states:

    in general – things mix [formerly – in general;as entropy decreases – disorder increases] – This new generalized law permits entropy to "order" Quantam enthalpy

    this law certainly applies to GML – GeoRSS – RDF and RSS comprise a true xml infoset with "intense" support for API level axiomatic semantics – Enterprise Application Integration and ERD

    now becoming understood as "information behavior"

    This also proves what the ancients proposed – the geometry

    the only physically precise mathamatics is topological geometry

    this dear friends is how you utilize this ontological paradigm

  45. dil21878 says:

    Hi Chandu,

    We are using the VirtualEarth control version 3 in our application.

    We have this URL included in our aspx page inisde the java script tag to use Map control :

    http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js

    We are trying to Show and Hide the dashboard on the Map by using the following methods

    1. HideDashboard() of the Map object to hide the Dashboard

    2. ShowDashboard() of the Map oject to show the Dashboard

    When we call the HideDashboard() method, the dahboard disaapears from the Map. This is fine.

    But when we again make it visible by calling the ShowDashboard(), the "Slider control" used for zoom-in and zoom-out does not get visible. However the Compass Control of Dashboard is clearly visible. It looks like bug in Virtual Earth map V3.0. Can you please help us regarding this.

    Regards,

    Dilip.

  46. dil21878 says:

    We are using the VirtualEarth control version 3 in our application.

    We have this URL included in our aspx page inisde the java script tag to use Map control :

    http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js

    We are trying to Show and Hide the FindControl on the Map by using the following methods

    1. ShowFindControl() of the Map object to show Find Control.

    2. HideFindControl() of the Map oject to Hide Find Control.

    When we are trying ShowFindControl() find control is shown at top of screen and looks like not part of map control.

    In our screen we have Header at the top and then map control. Now, Ideally FindControl is part of Map Control and hence should be positioned relative to map BUT it looks like it’s positioned relative to screen.

    Can somebody help me regarding this!!!

    Regards,

    Dilip.

  47. dil21878 says:

    I have found the solution to this problem by just observing object model of Map Control via debugging.

    Actually FindControl is a div and is placed absolute to screen and hence if you will try to put map not at left top one need to add left top offset of map from screen to this FindControl div.

    e.g. FindControl Div’s absolute position is left = 196 and top = 6 by default.

    Now say I want to put Map control at left = 38 and top = 102.

    In that case I can set FindControl’s div’s

    left = 196 + 38 and

    top = 6 + 102

    to properly place Find Control on Map.

    Important is how to find find control’s div, Here is single line of code for that..

    //Find FindControl’s div..

    var findControlDiv = map.mapelement.document.getElementById(‘mapDiv_vefindcontrolinput’);

    //Set Left position..

    findControlDiv.style.left = 196 + 38; //196 –Offset with in Map, 38 offset of Map left from screen left.

    //Set Top position..

    findControlDiv.style.top = 6 + 102; // 6 — Offset within Map, 102 offset of map top from screen top.

    Regards,

    Dilip.

  48. Le mois dernier, le blog Virtual Earth nous a annonc&amp;#233; la mise en ligne de la version 3 du contr&amp;#244;le

  49. Three days ago, on Christmas Eve, I decided to check out a favorite holiday diversion, NORAD Tracks Santa