Bing blogs

This is a place devoted to giving you deeper insight
into the news, trends, people and technology behind Bing.

Maps Blog

May
24

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

  • 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...
  • 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
  • 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
  • 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.
  • 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
  • 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
  • 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.
  • 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
  • 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.
  • 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?
  • 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.
  • 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.
  • 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?
  • 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.
  • 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)