Putting a Bing Map on your Website

update : if you have arrived here via a web search (e.g. /tag/bing-maps/), please go to the main article page to see my examples in action and read my updated advice about putting maps on your blog!

Looking at my analytics, I was surprised to find that some users had managed to land on my blog having searched for ‘putting a Bing Map on your website’. I assume this site appeared in search results because of the tags ‘Bing’ and ‘Maps’ which occur frequently in my posts. Inspired by this discovery, I have decided to provide the answer to this search query here so as not to disappoint any future Bing map seeking visitors.

The Easy Guide : what are your options?

1. Use Multimap embedded Maps
2. Use the Bing Maps API
3. Use the Multimap Open API
4. Resources

Multimap embedded Maps

Did you know that Multimap, the largest UK-based online mapping service was acquired by Microsoft in December 2007? Multimap is now part of the Bing Maps portfolio and includes much of the mapping data and imagery available on the Bing Maps site whilst having kept its distinctive and popular local map styles, notably Collins Bartholomew (A-Z) and Ordnance Survey in the UK. So if you are using a Multimap it is a Bing Map. Go forth and embed:

• Go to multimap.com, search maps and find the map you want
• Click on the top right of the map next to the print button
• read and accept the terms and conditions by ticking the box then click ‘customise and preview’
• follow the instructions on the next page and copy the html for insertion in your page and if you feel confident you can also edit the html to further customise the result

An embedded Multimap

<div id="MMEmbeddedMap">
    <iframe frameborder="0" height="400" marginheight="0" marginwidth="0" scrolling="no" src="http://www.multimap.com/client/embed/?width=650&amp;height=400&amp;lat=51.47805&amp;lon=-0.00368&amp;zoomFactor=16&amp;emid=HxidDF8KkD6gftefSe7mDU3teaLHNmVi&amp;qs=London&amp;countryCode=GB&amp;mapType=map&amp;moveMap=116,46" width="650">
    </iframe></div>

This is a map of Greenwich Park pinpointing the location at which I took the pictures for my Photosynth, HDView and DeepZoom… post. The code below is what I used to create this map. It is copy-and-pasted from the multimap embed service. I have tweaked it a little, but you don’t need to if you are not comfortable with that. Note that with minimum effort you get:

• a draggable map (yes you can move this map with your mouse)
• context actions by right clicking the map (zoom in/out and ‘move map to here’)

That’s a lot for around 5 minutes work and I am a big fan of the local maps (here A-Z) which display so much more information than standard vector maps found on Google and elsewhere.

Use the Bing Maps API

This is more advanced than the previous example, but delivers much more potential. If your site is non-commercial you can use this for free. Licensing information for commercial sites is at the bottom. You will need at least a basic knowledge of JavaScript to use this although for basic functionality, it is still very easy.

• go to http://www.microsoft.com/maps/developers/ and click on the interactive SDK
• grab or edit then grab the code you need from there (the ‘Show Me’ tab gives you the interactive preview so you can see the results of any changes made straight away without having to leave the SDK)
• paste the code into your webpage and away you go (see below for advice to wordpress bloggers)

A Bing Map showing Birds Eye view with a Photosynth overlay

Mouse over the marker to see the synth.This is again the same location I gave above showing the View of London from Greenwich Observatory photosynth, which featured in the Photosynth, HDView and DeepZoom… post. Here I used the basic interactive SDK code to show a specific Birds Eye scene and added an overlay with the photosynth included inside as an iframe (this code snippet is also a copy and paste from the photosynth website).

var synth1 = "<iframe frameborder=0 src='http://photosynth.net/embed.aspx?cid=38e9b3b7-db8e-4155-918d-345344f2ea8b&delayLoad=true&slideShowPlaying=false' width='400' height='300'></iframe>"; 
<!--Pushpin Objects for each Synth--> 
var propertypin1 = null; 

<!--Lat Longs for each Pushpin--> 
var propertypoint1 = new VELatLong(51.47812550689915,-0.0017300248145924524); 

<!--Instantiate Map--> 
function GetMap()      
{         
map = new VEMap('myMap');     
map.LoadMap(propertypoint1 , 17);
            map.AttachEvent("onobliqueenter", OnObliqueEnterHandler);
         }

         function OnObliqueEnterHandler()
         {
            if(map.IsBirdseyeAvailable())
            {
               var ViewFromObservatory = new VELatLong(51.47812550689915,-0.0017300248145924524); 
               map.SetBirdseyeScene(ViewFromObservatory );
            }

map.onLoadMap = AddPropertyPins(); 

}

<!--Call back adds pins to the map--> 
function AddPropertyPins() 
{ 
map.ClearInfoBoxStyles(); 
<!--Pin 1, Synth 1--> 
propertypin1 = new VEShape(VEShapeType.Pushpin, propertypoint1); 
propertypin1.SetDescription(synth1); 
propertypin1.SetTitle("View of London from Greenwich Observatory"); 
map.AddShape(propertypin1); 
} 

window.onload = GetMap;

This is the code I used to display the map and synth. You will also need to call the API and set a containing <div> to display the map as per the sdk (1 line each).

How to use Bing Maps API in my wordpress blog

Yes, the problem is that by default:

• wordpress does not give access to edit the code in the document head
• you need to be able to add the ‘onload’ attribute to the <body> tag to load the map and this is also not possible without some template hacking in wordpress (especially to do this for individual posts only)

The solution (one of many I’m sure):

1. Install this plugin http://lud.icro.us/wordpress-plugin-head-meta/ which enables you to add your own code to the header of any individual post
2. use this in your script:

   window.onload = GetMap;

   … instead of the onload event in the body tag

3. put the script above into a file and upload to your webserver (where you host the blog)
4. Add two custom headers using your newly installed plugin, the first to call the VE Map Control and the second to call your script

   1: <script src=http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2 
   type="text/javascript"></script>
   2: <script type="text/javascript" src="[path-to-my-js-script]"></script>

That should do it. It worked for this page anyway .

Update: note this method will only work on the page for which it was intended, so for example I noticed many users arriving here via web search http://blog.harakis.net/tag/bing-maps/ where this page comes top, but the maps will not display because the wordpress plugin applies to individual posts. You could use a plugin to apply to the whole site to solve this, but I didn’t want to do that as it requires needlessly downloading these APIs on pages where they are not required.

Use the Multimap Open API

As I mentioned earlier Multimap is part of the Bing Maps portfolio and there is an Open API available for non-commercial use for this too:

http://www.multimap.com/share/documentation/openapi/

This is also very easy to use and has lots of demos and code samples to look at and use. There are some differences between the apis and you might prefer to use multimap if you are used to it or just prefer the map styles and controls.

• Sign up for an openapi key http://www.multimap.com/openapi/signup/
• read the documentation and examples provided and use the code provided to build your map
• customise the code and put it on your page

A localised Multimap map with a Photosynth in the infobox

Click the marker to see the synth.This is a map from Radom, Poland with a photosynth I made of a lit Christmas Angel in the town square. A nice feature of the Multimap API is localisation. By adding a parameter to the end of your API call (?locale=pl-PL in this case), you can localise the map control. All widgets and text are in Polish. I used just two demos to get this working:

• http://www.multimap.com/share/documentation/openapi/1.2/demos/localization.htm
• http://www.multimap.com/share/documentation/api/1.2/demos/restyledinfobox.htm

Just a few lines of code gives you a fully functional localised map with widgets, marker and embedded photosynth inside the infobox:

function onLoad() {
    mapviewer = MMFactory.createViewer( document.getElementById( 'mapviewer' ) );
    mapviewer.goToPosition( new MMLatLon( 51.40114006829573,21.153375506401065 ), 16 );
    mapviewer.addWidget( new MMPanZoomWidget() );
    mapviewer.addWidget( new MMMapTypeWidget() );
    var marker = mapviewer.createMarker ( mapviewer.getCurrentPosition() );
    var html = '<iframe frameborder=0 src=\'http://photosynth.net/embed.aspx?cid=85e818df-734d-4ecb-82f8-9cb65f202c7c&delayLoad=true&slideShowPlaying=false\' width=\'400\' height=\'300\'></iframe>';
marker.setInfoBoxContent ( html, { } );
}
MMAttachEvent( window, 'load', onLoad );

I added this code to my javascript file created for the Bing API map above and hey presto, Multimap (Bing) map on my blog.

Resources

Credits

• http://blog.timwarr.net/2008/08/22/my-1st-photosynths-on-a-map/
• http://www.bing.com/community/blogs/maps/archive/2008/08/20/photosynth-released-now-let-s-mash-it-with-virtual-earth.aspx

Reference

• Multimap
• Bing Maps for developers
• Multimap Open API
• Johannes Kebeck’s blog
• Bing Maps blog
• Bing Maps forum
• Multimap forum
• Photosynth website

Commercial Licensing for businesses

• Bing Maps (including Multimap)

Back to the top

Photosynth, HDView and DeepZoom: a new era in digital imagery?

PhotoSynth and DeepZoom, both using Silverlight technology and powered by SeaDragon, have been around for a little while now and have received much critical acclaim in the technosphere.

The latest release of PhotoSynth has a number of new features and is now commercially available with Virtual Earth Bing Maps integration, the platform powering Live Bing Maps.

Here is the view from one of my favourite local landmarks:

SynthView – the Royal Observatory Greenwich, home of Time

I took these pictures with my mobile phone on the spur of the moment. No special equipment needed for an amateur like me. You can see the panorama and the panorama-plan beneath given to aid visitors. Standing there for a few minutes is quite entertaining because you can hear the same conversation repeated in multiple languages between different tourists. I caught what sounded like Japanese, Russian and Italian, ‘blah, blah St.Pauls, blah Millennium Dome/o2 Arena, blah Canary Wharf’ etc. accompanied by lots of pointing gestures.

I managed 85% synthy which is ok, but it still meant there were some ‘orphaned’ pictures. The new ‘hotspot’ feature (thumbnails on the right in ‘highlights’) gives an easy way to zoom into these orphaned images, making navigation easier. There are also extra controls beneath the map making it easier to move around the stitched image-set.

Now that Silverlight is the viewer, it means that both pc and mac users should have no problem viewing Synths and I personally hope that it is not too long before Linux is supported by Silverlight too. Overall I think it is a brilliant imaging tool for bloggers and absolutely can be useful for businesses. The tourist and real estate sectors are being touted as obvious beneficiaries (to show properties, points of interest etc..), but I can see this technology becoming pervasive as it continues to evolve.

How to put a synth on your blog or web page

It’s not Rocket Science, in a nutshell:

1. Take a lot of pictures of your subject, following the guidelines at photosynth.net
2. Upload them using the free software available on Live Labs
3. click the ‘<>‘ embed icon to the right of the synth and copy the code, then insert into your blogpost or webpage

How can Photosynth improve?

Make no bones, I love this technology, it is accessible, easy-to-use and visually stunning. It can still get even better though as a service, some thoughts…

• An online service like DeepZoomPix for creating synths, completely platform-independent, that is in the spirit of the future and cloud computing, and you no longer run the risk of alienating mac/linux users
• I hope Silverlight will be truly cross-platform and work with Linux, a dependency here although there is always Moonlight, nonetheless I think the move to Silverlight was definitely a positive one
• Look at ways to work better with Social Networking Platforms to make the service more integrated and interoperable, easier sharing, publishing to Facebook etc..
• improve the geotagging facility and integrate VE Bing Maps with the interface instead of as a pop-up so users can quickly see the geographical context of a synth

HDView: A panorama Royal Observatory Greenwich

These are a subset of the same pictures used to create the Synth above. This is a Silverlight driven, HDView panorama using DeepZoom imaging format. There is a hell of a lot more you can do with DeepZoom (see Hard Rock Memorabilia Deep Zoom or Charles Darwin for example to be blown away), but the format supports these panoramas nicely too.

This is also at the least a big improvement on just a standard photo, and with better quality than achieved with my mobile phone you can have quite an immersive image.

How to put a HDView panorama on your blog or web page

This was a little more work, but not a lot:

1. Take some overlapping pictures of your subject
2. Download and install the freely available Microsoft ICE
3. Make a new composition with ICE and export using DeepZoom format
4. Upload the html page created by your export, the .xap file (Silverlight controls) and stitch images (directory) to your web server, then either include as an iframe as I have done or you could use the markup from this page to embed the object on your webpage/blogpost. With blog posts this can be a bit tricky if you don’t control the markup in your header, but it is possible (there are plugins etc..)

Seadragon

SeaDragon powers the images you see above, it looks like a very smart technology which enormously enhances the ability of your browser or client to view large numbers of complex images in one viewer. I’m going to quote one of the co-creators of Photosynth, Blaise Aguera y Arcas:

“Seadragon is an environment in which you can either locally or remotely interact with vast amounts of visual data. And it doesn’t matter how much information we are looking at, how big the collections are or how big the images are, it does not make any difference because the only thing that can limit the performances of this system at any given time is the number of pixels on your screen”

Sourced from ted.com

That sums it up nicely for me, I imagine the potential for this is huge. Nasa are already publishing images of their Space Station online using this and CNN displayed a fantastic crowd-sourced synth of Obama’s inauguration, ‘the moment’. Great examples of this potential.

For me this is digital imagery come of age, instead of only publishing static images, I can almost as easily publish immersive, interactive digital imagery. A big step forward.

Reference

• Microsoft Live Labs (includes SeaDragon and Photosynth)
• Photosynth blog
• HDView blog
• Virtual Earth Bing Maps Technical Evangelist Chris Pendleton’s blog – watch out for iSynth and the unique American-style blog-writing
• Tim Warr’s Blog
• DeepZoomPix – looks a very nice facility to publish online and share without needing a client
• Microsoft Virtual Earth Bing Maps