Interactive Mapping Blog

Mapping Solutions News

Jun 23

Bing Maps AJAX & HTML5 GeoLocation API

icon June 23rd, 2011 by Brian

In the second in our series on mobile mapping with Bing Maps AJAX V7 we are going to show you one of the great features of HTML5 that you can start using right now on mobile devices. Where the desktop may take years before all users have access to the features of HTML5 the vast majority of smartphone users already have HTML5 compatible browsers.

HTML5 GeoLocation API

HTML5’s geolocation API allows you to request a users location by prompting the user to optionally share their location information with your website. It is currently supported on:

image

With WP7 hopefully coming soon. Rather than repeat the entire documentation for the geolocation API lets show you how to use it in a code example. Here is an example JavaScript method we have written that we can call to get the user location.

  1. function GetLocation() {
  2.     //check if location api supported
  3.     if (!!navigator.geolocation) {
  4.         
  5.         //request current location
  6.         navigator.geolocation.getCurrentPosition(UpdateLocation,HandleErrors);
  7.     }
  8. }

 

Notice the line “!!navigator.geolocation” this is checking that the browser supports the geolocation api, you should of course in a real application show some kind of message if they do not. Once we have checked if the browser has support we simply call the “navigator.geolocation.getCurrentPosition” method passing in two method names (we will write those in a moment) the first to handle the location response and the second to handle any errors.

The first of the two methods which handles a valid location response looks like this:

  1. function UpdateLocation(position) {
  2.     var latitude = position.coords.latitude;
  3.     var longitude = position.coords.longitude;
  4.  
  5.     //move map to new location and zoom in
  6.     map.setView({ center: { latitude: latitude, longitude: longitude }, zoom: 16, mapTypeId: Microsoft.Maps.MapTypeId.aerial });
  7. }

As you can see it accepts a position parameter from which we can get the user latitude and longitude. We the set our Bing Map to the new location, and in this example zoom the map in on that location.

The next method handles any errors that might occur, this is a very basic example which you would want to expand upon in production:

  1. function HandleErrors(error) {
  2.     //handle geolocation errors and alert user
  3.     switch (error.code) {
  4.         case error.PERMISSION_DENIED: alert("user did not share geolocation data");
  5.             break;
  6.  
  7.         case error.POSITION_UNAVAILABLE: alert("could not detect current position");
  8.             break;
  9.  
  10.         case error.TIMEOUT: alert("retrieving position timed out");
  11.             break;
  12.  
  13.         default: alert("unknown error");
  14.             break;
  15.     }  
  16. }

As you can see it shows a relevant JavaScript alert informing the user of what the error was. Note that one of these errors is simply that the user has not decided to share their location with you website.

Finally here is the entire complete code so you can see how these methods are called, and how the basic Bing Map is setup for mobile display:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4.     <title>Geolocation default</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
  7.     <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
  8.     <script type="text/javascript">
  9.         var map = null;
  10.  
  11.         function GetMap() {
  12.             map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'YOURBINGMAPSKEY' });
  13.             GetLocation();
  14.         }
  15.  
  16.         function GetLocation() {
  17.             //check if location api supported
  18.             if (!!navigator.geolocation) {
  19.                 
  20.                 //request current location
  21.                 navigator.geolocation.getCurrentPosition(UpdateLocation,HandleErrors);
  22.             }
  23.         }
  24.  
  25.         function UpdateLocation(position) {
  26.             var latitude = position.coords.latitude;
  27.             var longitude = position.coords.longitude;
  28.  
  29.             //move map to new location and zoom in
  30.             map.setView({ center: { latitude: latitude, longitude: longitude }, zoom: 16, mapTypeId: Microsoft.Maps.MapTypeId.aerial });
  31.         }
  32.  
  33.         function HandleErrors(error) {
  34.             //handle geolocation errors and alert user
  35.             switch (error.code) {
  36.                 case error.PERMISSION_DENIED: alert("user did not share geolocation data");
  37.                     break;
  38.  
  39.                 case error.POSITION_UNAVAILABLE: alert("could not detect current position");
  40.                     break;
  41.  
  42.                 case error.TIMEOUT: alert("retrieving position timed out");
  43.                     break;
  44.  
  45.                 default: alert("unknown error");
  46.                     break;
  47.             }  
  48.         }
  49.  
  50.     </script>
  51.     
  52. </head>
  53. <body onload="GetMap();" style="padding:0;margin:0;">
  54.  
  55.     <div id="myMap" style="position: absolute; width: 100%; height: 100%;">
  56.     </div>
  57.  
  58. </body>
  59. </html>

You can see a live demo at http://bit.ly/j6dT0S which will work on your mobile device, or HTML5 enabled desktop browser.

Jun 21

This is the first in our new series on mobile mapping and are based on a talk I gave recently at the Bing Maps user group about some tips and techniques for creating maps specifically for mobile devices.

This first tutorial will focus on creating Infoboxes (or popups) specifically targeted for mobile devices using a combination of Bing Maps Ajax V7 and Jquery Mobile.

If you want to skip the overview and get straight into the code click here.

Fitting everything in

One of the first challenges you encounter when developing for mobile devices is how to fit all your information into such a small amount of space. If we look at the default Bing Maps infobox you can see it fits nicely on the ipad, but not so nicely on the iphone:

image

image

Giving users what they expect

Even if we could find a way to fit our information into such a small space on the iphone using the default infobox would not give users a great experience, and certainly not one they are used to getting from native applications on their mobile.

A better approach to this is to see how we can mimic other user interface concepts that users are already familiar with and use these to display the information that is associated with our pushpins.

The approach we are going to demonstrate in the rest of this tutorial is to create a typical mobile dialog for our pushpin using the Jquery Mobile library:

image

The Code

We will start by setting up a basic html page, adding the script and css references for Bing Maps and Jquery Mobile:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4.     <title>Infobox default</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
  7.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
  8.     <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  9.     <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
  10. </head>
  11. <body>
  12.  
  13. </body>
  14. </html>

 

As you can see this is a pretty basic page and so far it does nothing. Now we need to add a few bits of markup so that Jquery Mobile helps us setup a basic mobile ready page, including automatic ajax page loading. We start by adding the following meta tag to the head:

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />

Now we need to add some html in the body that will tell Jquery Mobile that we have a mobile page (each html file can contain multiple pages in Jquery Mobile), add the basic map div ready for us to load a Bing map into:

  1. <body class="ui-mobile-viewport">
  2.     <div data-role="page">
  3.         <div id="myMap" style="position: absolute; width: 100%; height: 100%;">
  4.         </div>
  5.     </div>
  6. </body>

Jquery Mobile is very much about convention over configuration so the html 5 style “data-role” and the “ui-mobile-viewport” class on the body tag are used by Jquery Mobile to work its magic and apply its ‘mobile-esq’ css styling.

Finally we are going to add the javascript code (in the head section) we need to both load the Bing Map and fire a Jquery Mobile method to load a new page when we click on the puhspin:

  1. <script type="text/javascript">
  2.     var map = null, pushpinClick;
  3.  
  4.     function GetMap() {
  5.         map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'YOURBINGMAPSKEY' });
  6.         var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
  7.         map.entities.push(pushpin);
  8.         pushpinClick = Microsoft.Maps.Events.addHandler(pushpin, 'click', AddMobileInfobox);
  9.     }
  10.  
  11.     function AddMobileInfobox() {
  12.         $.mobile.changePage("infoboxcontent.html", "slideup");
  13.     }
  14. </script>

The code above shows the normal way of creating a Bing Map and then adding a pushpin with a click event that calls the “AddMobileInfobox” method. Inside this click handler is the only piece of JavaScript we need to write specifically for Jquery Mobile. It calls the $.mobile.changepage method passing in the name of the html page we want to load and the name of the animation to see (see here for more animation options). This method loads the new page using ajax and presents it over the map.

The only thing left to do is to create the “infoboxcontent.html” page itself, this again uses Jquery Mobile to provide the styling:

  1. <!DOCTYPE html>
  2. <html class="ui-mobile landscape undefined min-width-320px min-width-480px min-width-768px min-width-1024px">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
  6.     <title>jQuery Mobile Framework – Dialog Example</title>
  7.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
  8.     <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  9.     <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
  10. </head>
  11. <body class="ui-mobile-viewport">
  12.     <div data-role="page" data-url="" class="ui-page ui-body-c ui-page-active">
  13.         <div data-role="content" data-theme="a" class="ui-content ui-body-a" role="main">
  14.             <h3>Infobox Title</h3>
  15.             <p>
  16.                 Infobox description content can go here and fit on a mobile screen just fine.</p>
  17.             <a href="#" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b"
  18.                 class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-b"><span class="ui-btn-inner ui-btn-corner-all">
  19.                     <span class="ui-btn-text">Full Details</span></span></a>
  20.             <a href="#" data-role="button"
  21.                 data-rel="back" data-theme="a" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-a">
  22.                 <span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Cancel</span></span></a>
  23.         </div>
  24.     </div>
  25.     <div class="ui-loader ui-body-a ui-corner-all" style="top: 100px;">
  26.         <span class="ui-icon ui-icon-loading spin"></span>
  27.         <h1>
  28.             loading</h1>
  29.     </div>
  30. </body>
  31. </html>

Again this uses the same page markup as before to tell Jquery Mobile how to style the page and this time it has some more new Jquery Mobile tags and styles that automatically turn our hyperlinks into mobile styled buttons. As you can see this page has zero custom javascript and all the styling is automatically applied by Jquery Mobile. When you load the page it looks like this:

image

Clicking the cancel button closes the dialog and takes us back to the map without reloading the page, all by the magic of Jquery Mobile.

Summary

Hopefully this tutorial has shown you a really quick and easy way to produce infoboxes for mobile devices with very little code mostly thanks to Jquery Mobile. Over the coming weeks we will share a few other mobile mapping tutorials so let us know what issues you would like to see covered.

You can view a live demo and view the code at http://bit.ly/jexeja

May 20

Earthware – how we became famous…

icon May 20th, 2011 by Brian Norman

Ok – so it It might be a slight over exaggeration to say that we are famous but we have been on TV. Or at least a piece of our work has!

If you follow our The Technology Studio blog you may be familiar with our Kinect hack that turned a Puffersphere spherical display into a scary eyeball that follows you around the room.

The Sci-fi geek in us then turned this into the Eye of Sauron and suddenly we had a YouTube sensation on our hands.

Half a million views later and we were offered a space at The Gadget Show Live to show off our wares by the nice people at Channels 5’s The Gadget Show.

eye on the stand

Whilst scary tracking eyeballs are good fun (and kind of cool) we also think the Puffersphere is a fantastic medium for displaying more serious content like global statistics. With this in mind we set about warping the video of our Earthquake sequence map to demonstrate the seismic activity leading up to the devastating Japan earthquakes earlier this year. It made for fascinating viewing and the Producers of the Gadget Show thought so to – hence the appearance of The Puffersphere featuring our Earthquake sequencing video on 9th May. You can view our 30 seconds of fame on a clip of the show featured on the Gadget Show website.

Thanks to the guys at Pufferfish for freeing up a sphere for us to play on and thanks to The Gadget Show for the invite into the studio – we hope we didn’t embarrass ourselves with our star struck behaviour around Suzy Perry!!

Please send any ideas for future Puffersphere concepts to info@earthware.co.uk.

Apr 9

Google Maps on iPhone–it’s best kept secret!

icon April 9th, 2011 by Brian Norman

I was mucking around with Google Maps on my iPhone the other day and accidentally double clicked the little triangle in the bottom left and found a piece of functionality that I had no idea was there.  In effect it acts as a compass and moves the map round according to the direction you are facing.  This is really handy especially when you are on foot navigating around a city for example.

It reminded me of the scene from friends in London when Joey gets into the map.  See the screen shot below:

In the map

Apr 8

We were delighted that this month we featured in the Bing Maps newsletter for a blog article we wrote regarding relative performance of mapping APIs (see below).

If you want to read our full blog article please click here.

Cool

If you can’t see the contents of this email, click here.

Bing_newsltr_March-2010_01

BG_Left2

Bing_newsltr_April2010_03

DEVELOPER NEWS

Bing Maps Android SDK now available on Codeplex
InKnowledge has launched an open-source Bing™ Maps SDK for Android. Built using the latest Bing Maps AJAX Control 7.0, the Bing Maps Android SDK has all JavaScript wrapped with native Java calls. As a result, Android developers can use this control without having to know the JavaScript code.

BingMaps03_VerticalPhoneBingMaps03_HorizontalPhone

Events

MIX11
April 12-14, 2011
Las Vegas, NV

Where 2.0
April 19-21,2011
Santa Clara, CA

Spatial Business Intelligence Workshop with Bing Maps for Enterprise
May 9

Cologne

May 10
Munich

This new SDK now gives Android developers a choice in terms of map controls and provides greater flexibility as a result of having direct access to the code base. Read more here. Get the SDK.

Earthware updates performance tests to include AJAX 7.0
Microsoft partner Earthware recently tested the performance of AJAX Control 7.0 against the version 6.3 “core” control and version 6.3. The results
found that version 7.0 performed up to three times faster than version 6.3.

When it comes to web page load times, it’s hard to have too much performance. In addition, with the growth of mobile applications that use slower connections, tools like the AJAX Control 7.0 can help solve real-world problems.

For the tests, Earthware examined two key performance criteria: speed of download and speed of displaying information. For the first test, Earthware compared the time required to download those files needed to display a basic map. Download time is primarily affected by the size of the file downloaded to the client’s browser. Therefore, the smaller the file size, the quicker the map displays.

BingMaps03_Graph1

The second test compared the time required for each version to load and display different numbers of pushpins on a map. Because the results are greatly affected by the browser, Earthware tested three major released browsers.* These tests again show the speed of version 7.0, especially under heavier loads. For example, here are the results when using Windows® Internet Explorer® 8:

BingMaps03_Graph2

*Please note that when this analysis was done Internet Explorer 9 had not been fully released. Internet Explorer 9 has now been released and the AJAX 7.0 performance is excellent. We encourage you to download Internet Explorer 9 and try it for yourself.

For more detail on these results, see the Bing Community Blog or go directly to Earthware’s blog posts.

Real-time transit routing now available for more mobile users in more cities
Bing is the first search engine to offer real-time transit information. With this feature, now available on m.bing.com and through our iPhone app, commuters can access up-to-the-minute transit data.

We’ve just added coverage for Chicago and Los Angeles, to go with our existing coverage in Seattle, Boston, and San Francisco. To see a video on real-time transit in action, and to study all the features and screenshots, check out the Bing Mobile launch announcement.

Simplify pushpin groupings with client side clustering
A map can become quickly cluttered with hundreds, if not thousands, of location pushpins. This can become a problem if a user zooms out, making the map unreadable. Client side clustering
allows for “clustering on the fly” in JavaScript, rather than going back to the server to request more data. This option is significantly faster than server side clustering. It also cuts down on server requests, making the application more scalable.

BingMaps03_Clustering

Learn more about using client side clustering with the redesigned Bing Maps AJAX Control 7.0. The updated algorithms, both of which use grid-based clustering, have been optimized for performance and reuse. In fact, once a modular plug-in is created, it can be used again and again. Learn how to implement the modular plug-ins here.

Data hosting now available with Bing Maps
For maps customers building a locator and in need of data hosting, the Bing Maps developer portal now allows you to load locations, geocode, and publish for use with the Bing Maps API. Log on at the Bing Maps portal
to get started.

Recorded webcast showcases what’s new with Bing Maps
Bing Maps developers from Microsoft partners Earthware, OnTerra, and Infusion recently discussed the latest AJAX 7.0 development tips and tricks. During this fast-paced, 40-minute overview, Microsoft MVP (Most Valued Professional) panelists described how to evaluate and improve the performance of Bing-powered apps, how to work with large sets of pushpins, and also introduced a new tool for working with Microsoft® SQL Server® databases. The webcast aired on March 1, and is now available as a recording here
.

BING MAPS APPS

Japan’s road to recovery illustrated by three new Map Apps
Three new Map Apps have gone live since the tragic events in Japan.

Bing Maps technology specialist Johannes Kebeck put together the “Road Status Japan” Map App that shows which roads in the area have been verified as being open to traffic, using data provided by Honda Motor Company. Go to bing.com/maps, click on “explore map apps,” sort by newest, and click on the Road Status Japan tile.

BingMaps03_Japan

The Bing Maps team has published the “2011 Japan Earthquake” Map App that allows you to easily see aerial images of what the area looked like before the earthquake, and with one click compare it to imagery taken after the tragic events.

BingMaps03_Japan2

Lastly, Chris Pietschmann created the “Earthquakes in Last 7 Days” Map App that shows the location and strength of the week’s earthquakes around the globe. The app collects data from the USGS feed of magnitude 2.5+ earthquakes during the past seven days.

BingMaps03_Japan3

PARTNER SHOWCASE

Zimbio uses high-resolution Bing Maps to geotag where celebrities have visited
Zimbio
is an interactive magazine publisher with a focus on entertainment, style, current events, and a bevy of other pop culture topics. The Zimbio team has done an amazing job integrating its high-quality content (more than 4 million photos) with version 7 of the Bing Maps AJAX API.

BingMaps03_Zimbio

Zimbio’s latest feature, Celebrity Places, combines the accuracy and richness of Bing Maps with Zimbio’s high-resolution photography. Zimbio has a catalog of more than 10,000 geotagged celebrity photos in more than 1,000 cities. Fans can follow favorite celebrities as they travel from hot spot to hot spot. (To protect celebrity privacy, new photos are held for roughly 24 hours.) Zimbio readers can also follow the latest news and photos from other pop-culture events, like the San Diego Comic Convention or next World of Warcraft convention.

The visually interesting juxtaposition of Zimbio’s photography with Bing Maps Bird’s eye view was one the reasons Zimbio chose Bing Maps; another important reason was the load and display speed of AJAX Control 7.0.

BingMaps03_Zimbio2

CUSTOMER NEWS

Update to Bing venue maps: coverage of top malls
Bing Maps introduced mall directory maps in December, making it easier for shoppers to navigate shopping malls and retail stores. The mapping tool provides time-saving information on where to park and how best to plan a shopping excursion. We’ve
increased coverage and usability
. We now offer visitors the chance to access mall maps of nine of the ten largest malls (in square feet) in the United States. As of now we have completed 143 malls in more than 20 states and the list is growing all the time!

We’ve also made locating mall maps an easier venture. Now, when searching on Bing Maps for a mall or any business within that mall, visitors will immediately see either the clickable footprint of the mall or the fully detailed mall map. For most of our mall maps, visitors can locate parking, ATMs, entrances, as well as many other mall services.

BingMaps03_Malls

Until Next Month

On behalf of everyone on the Bing Maps team, thank you for being a valued subscriber. We invite you to explore everything that’s new with Bing Maps this month. Learn more and start building your own map experiences today! For regular updates and information visit www.microsoft.com/maps, the Bing Maps Blog, Facebook, and Twitter.

fbicon twicon

Microsoft respects your privacy. Please read our online Privacy Statement.

If you would prefer not to receive future promotional emails from Microsoft Corporation please click here to unsubscribe. These settings will not affect any newsletters you’ve requested or any mandatory service communications that are considered part of certain Microsoft services.

To set your contact preferences for Microsoft newsletters, see the communications preferences section of the Microsoft Privacy Statement.

Microsoft Corporation
One Microsoft Way
Redmond, WA 98052 USA

BG_Right2

Apr 5

The two videos that we posted showing the “Roving Eye” that we developed using a Kinect and a PufferSphere have now been seen over 500,000 times on YouTube in less than three weeks.

If you haven’t seen them yet, then here are the two videos.

Giant eyeball following one of the team around the room

 

and:

Warning–not for the timid!

 

We are now playing with lots of other ways that we could bring products and services to life using the PufferSphere.  If you have any great ideas please email them to us at info@earthware.co.uk.

For more information, please:

view all our videos on our YouTube channel: http://www.youtube.com/user/earthware

see our blog post telling the story about how we did it at http://www.thetechnologystudio.co.uk/blog/index.php/2011/03/a-boys-own-guide-to-building-a-giant-creepy-eyeball-that-follows-you-round-the-room/

or contact us info@earthware.co.uk.

Mar 28

5 ways to make your web mapping fly!

icon March 28th, 2011 by Brian

map paper planeOver the past four years here at Earthware we have encountered a number of performance challenges when creating mapping applications on the web. We thought it might be helpful to bring together the 5 most common issues we’ve encountered, both when helping other developers or in some of our older mapping projects.

It’s unfair to call these mistakes, rather they are missed opportunities to make your mapping really fly. They are not exclusively focused on specific mapping API’s or web programming languages / frameworks so they should be applicable to the majority of web mapping applications with a little translation.

So in no particular order:

1. How accurate do you really need to be?

We often come across systems or code samples that both store, but more importantly transfer their position data (usually pairs of lat/lon) to very high levels of decimal places (often 13 or more decimal places). Did you know that 8 decimal places of accuracy is a real world value of 1.11 millimetre (at worst when on the equator). How many systems have you worked on that require you to map to 1.11 millimetre accuracy?

So assuming that for most of us meter accuracy is plenty enough we can reduce our values to only use 5 decimal places (1.11 metre accuracy). When transferring either points, or more importantly polygon data reducing your data from 13 to 5 decimal places is likely to decrease the amount of data you are transferring by at least half.

Typical speed improvement: 50%!

2. Load small, load often

Many mapping applications allow the user to drill into the detail of the data shown on the map. In the majority of cases the user does not require the full details of every single piece of data so why bother loading them all?

Typically in the mapping applications we encounter the initial view a user is presented with has a number of pushpins / polygons maybe with a text label and or an icon representing the ‘type’ of data shown (like a hotel, house, pipe etc). So the data we need to initially load for each point is a title, latitude, longitude, type and unique id. We don’t need to load all the description, photos, links or other data that will not be shown until the user clicks the icon/polygon.

At Earthware, the way we normally handle this is to have two services, one that returns the initial map data that matches our query, and one that returns the full details for a single selected entity. You can code your map so that it makes a call to the “full details” service when a user clicks a map entity and in our experience returning the data for a single entity is usually so quick the user doesn’t even notice the slight pause.

To see an example of this service architecture using asp.net and Bing Maps see http://bingmaps.codeplex.com/wikipage?title=Getting%20Started%20in%20Web%20Services&referringTitle=Home

Typical initial map load improvement: > 500%

3. Don’t repeat yourself

Often when helping developers improve their JavaScript map performance we come across an approach to loading the map data that we don’t recommend except in the most simplistic applications. That approach is to generate the JavaScript code on the web server that is used to create entities on the map and to pass this chunk of JavaScript back to the client and execute it there. For example, we see a service return the following JavaScript:

var pin = new Microsoft.Maps.Pushpin(52.011,-0.221, {text: '1'});
map.entities.push(pin);
pin = new Microsoft.Maps.Pushpin(53.011,-0.121, {text: '2'});
map.entities.push(pin);
pin = new Microsoft.Maps.Pushpin(51.011,-0.251, {text: '3'});
map.entities.push(pin);
pin = new Microsoft.Maps.Pushpin(50.011,-0.321, {text: '4'});
map.entities.push(pin);
pin = new Microsoft.Maps.Pushpin(54.011,-0.143, {text: '5'});
map.entities.push(pin);
pin = new Microsoft.Maps.Pushpin(55.011,-0.0123, {text: '6'});
map.entities.push(pin);

This approach seems to be popular with developers because it’s quick and simple to achieve. However, the downside is that you are constantly repeating the same long text phrases and transferring all these repeats to your user, thus slowing down their mapping experience to make it easier for you to code. This data could be sent in a simple data structure, like JSON, and with some simple code looped through and added to the map. The same data above in JSON would look like:

{points:{point:[{title:1,lat:52.021,lon:-0.211},
  {title:2,lat:53.011,lon:-0.121},
  {title:3,lat:51.011,lon:-0.251},
  {title:4,lat:50.011,lon:-0.321},
  {title:5,lat:54.011,lon:-0.143},
  {title:6,lat:55.011,lon:-0.0123}

]}}

To see an example of this data transfer architecture using Asp.net, JSON and Bing Maps see http://bingmaps.codeplex.com/wikipage?title=Getting%20Started%20in%20Web%20Services&referringTitle=Home

Typical map data load improvement: > 100%

4. Some data you just can’t load fast enough

As we have recently blogged the latest Bing Maps AJAX API is now even faster at showing pushpins on a map, but there is still a limit especially when you are working with older browsers. If your data consists of thousands of entities then it won’t take long before you either cannot transfer the data fast enough or the performance of your map is too slow.

So what can you do? Your users still need to be able to search all the data so you cannot just remove some. The most common solution to this problem is ‘clustering’ of map entities. This is where you group together nearby or overlapping entities and only show individual entities once the user has zoomed in. This can be achieved either using client side code (see http://rbrundritt.wordpress.com/2011/03/02/client-side-clustering-in-v7/) or on the server side before you transfer the data to the client (see http://www.viawindowslive.com/Articles/VirtualEarth/ClusteringVirtualEarthwithMSAJAXandC.aspx). The advantage of doing this on the server side is that you do not have to transfer the data for each individual entity but instead can just transfer the data required to show the ‘clustered’ entity.

There are other approaches to this problem including generating rasterised image tiles of your data and only showing interactive map elements once the user has zoomed in. This works just as well for pushpins as it does polygons. A good example of this ‘hybrid’ approach is the open source ajax map data connector project on codeplex: http://ajaxmapdataconnector.codeplex.com/

5. Transferring data as plain text is soooo slooowwwww

We have already discussed ways of optimising the data you send your clients (in 3.) above but that approach still ends up transmitting plain text data to your clients. There are much better binary formats you could transfer the data in that would massively reduce the size of your transfers.

The first and easiest of these is to use a compression format called Gzip that is seamlessly built into all modern web browsers and plugins (Flash and Silverlight). If on your web service you compress all your map data using Gzip your clients browser will be able to atomically decompress the data ready for you code to use without you having to change you client side code at all. Gzip compression is usually very simple to enable on your web service (see these links for apache, iis6 and iis7).

This approach doesn’t just apply to data transfer or mapping and (if you are not already) you should look at compressing other ‘static’ files like your JavaScript and css.

If you are using Silverlight to load data from WCF services then an even better solution is to use the built in binary http protocol.

There is usually a slight CPU cost to compressing the data but on a modern processor this is minimal and well worth the decrease in data transfer sizes.

Typical map data load improvement: > 50%

In Summary

Hopefully some or all of these issues might help you make a real, measurable difference to your applications performance and many of them are quick and simple to achieve. We would love to hear your real world performance improvements if you do use any of these tips so please feel free to share them in the comments section below.

Mar 18

Quake sequence leading up to Japan tsunami

icon March 18th, 2011 by Brian Norman

We always say that displaying data on a map is one of the best ways to bring information to life, especially when the information has a geographical element. One obvious place where this is true is when looking at the pattern of earthquakes. Bing Maps Silverlight Earthquake MapThe US Geological Survey publishes a list of recent earthquakes. However, a list doesn’t show the patterns or relationships in the same way that displaying this data on a map will.

Which is why, given recent events in Christchurch and Japan in particular, we have done just this – embedded USGS’s earthquake data in a Bing Map using Silverlight technology to create a mapped sequence of earthquakes between 7th and 11th March 2011 as recorded by USGS).

In the sequence you can clearly see the build up of earthquakesJapan in the northern part of the Ring of Fire along the Aeultian Islands starting from the 7th of March 2011.

As well as watching the sequence of events from 7th to the 14th of March 2011, you can experience the last seven days earthquakes or just the last one:

Last seven days of earthquakes in mapped sequence

Last day of earthquakes in mapped sequence

For a more detailed view of the locations experiencing major earthquakes during this period watch our video of the sequence.

Mar 16

In the second part of our series we show you how to upload the xml data you created in part 1 using a simple console application.

The next and final part in this series will show you how to create a simple JavaScript map application that displays data from the Bing Maps Spatial Data Services.

We will release the full source code for these series as soon as the last part is complete.

Mar 12

clip_image001

Introduction

Twitter is a great service that has given the average person in the street a way to share his opinions and criticism of just about anything with the world. Receiving accurate and well thought out criticism is one of the best ways for companies to improve their products and services, at Earthware we have learnt a lot over the years by listening to what others think about what we do and trying to improve in those areas.

The problem with the two points above is that too often Twitter’s instant availability and it’s 140 character limit has made us all a bit lazy when sharing our opinions and criticism and made us tend to exaggerate or generalise our feedback.

The aim of this blog article is to explore this problem a little further, specifically relating to the opinions and criticism we see shared about two of the most popular mapping platforms Bing Maps and Google Maps.

Comparing apples & pears

Its often difficult to compare two things that arrive at very similar results but from different directions. As a simple example of this lets compare the following two cars:

clip_image002

Both of these are great sports cars and the result of talented engineers and designers but when comparing individual characteristics they are very different and it would be too easy to suggest one of them is much better than the other.

For example let’s compare the top speeds of both, without a doubt the Ferrari is by far the fastest almost 100% faster. However if we compare the emissions of both the Tesla Roadster, being electric, is by far the best performer (assuming you charge it from a zero emission source) and blows the Ferrari away.

If we say one car is better than the other, because one or more characteristic is better, does that mean the other car “sucks”? I think we can agree that’s not true, it’s just that one car or the other will suit the owner depending on what criteria they see as most important to them.

Bringing this back to the world of mapping hopefully you can see how untrue it is to say that one mapping platform “sucks” compared to another if you are only comparing one feature, for example road mapping styles.

Comparing building materials vs. the builder

So if it’s difficult to compare two products by only looking at one, or two, characteristics, or only those that apply to one person’s needs, how about comparing two products that set out to create the same result but one is clearly better? Again let’s compare two cars:

clip_image003

If someone offered you either of these cars for FREE I’d be surprised if anyone would take the Skoda. Skoda are not exactly know for creating the best build quality or the most stylish cars in the world (they are known for their value but we are talking about a free car). VW however are well known for their quality and reliability and have some stylish cars. Both these cars are created from the same raw materials in fact some models share the same engine and some of the same parts so why is the VW Golf a much more popular car, winning many more awards?

It’s a combination of factors potentially including the time spent building and designing the car, the quality of the tools used to build them and the talent of the engineering and design teams involved.

Brining this back to the world of mapping this means it’s often difficult for consumers to differentiate between how well a website has implemented and designed their mapping vs. how good the mapping platform they are using actually is.

Too often at Earthware we see users complaining about Google Maps or Bing Maps when actually it’s that the site they are using the maps on has either not spent enough time implementing their maps or their development team doesn’t have much experience creating mapping applications.

Taking a closer look at some common mapping criticisms

Here at Earthware we think both Google Maps and Bing Maps are great mapping platforms and we have used both of them in a variety of client’s mapping projects depending on which one fitted the client’s needs better at the time.

However both platforms are not identical, they have some features in common and some very different. Both platforms have areas in which they are better than the other for some, or all, of the specific client needs. Below are some of the more common criticisms we see and some insight into why these features may differ / ‘are perceived as better’ in one platform or the other.

  • Bing maps road map/labels suck

    Recently Bing maps have released a new style for their road maps which have received some praise, and a lot of negativity. Why would Bing change their road map style to something that some people don’t like as much as their old style? Surely there is a reason or do they just not care?

    Digging a little deeper we can start to find the answer, and an angle that suggests Bing Maps may actually be on to something for that is actually better than Google for some uses. Bing actually spent a lot of time and money, and worked with some great talent at Stamen, to produce this new style, but they were aiming for a different goal than Google.

    Bing’s goal for the redesign was to help mapping developers, like Earthware, showcase their data on maps without the bright and colourful maps taking over the show. The new ‘muted’ colour scheme makes it easier for users to concentrate on pushpins and data shown on top of the map. The downside of this is that consumers who are trying to read the labels and roads on the map, without much or any extra data being shown, are now arguably finding it more difficult to read.

    So many peoples perception is that Bing Maps road style ‘sucks’ compared to Google’s. Hopefully you may now see that it does indeed ‘suck’… if you are using it in one particular situation.

  • Bing/Google maps aerial imagery suck

    Another common complaint is that the aerial imagery available is much better in one platform than the other. The problem here is that it may indeed be worse on Google than Bing but is that just in the town/city/country you are interested in? Elsewhere in the world you will often find a different story.

    Also, you will often find it has a lot to do with when you are comparing them, Bing and Google release imagery at completely different times and have very different plans for when and where to take aerial imagery. You may find Google is better this month, but then Bing release more up to date imagery at the same location a month later.

    Again it’s perhaps easier now to understand why it’s not perhaps not a fair comparison of an entire mapping platform’s coverage if you are just focusing on where you want aerial imagery.

  • Bing/Google birdseye/streetview is much better

    Users are often amazed by Bing’s birdseye imagery, or Google’s street view imagery and judge the other platform as ‘sucking’ because they either don’t have birdseye/streetview or don’t have the same coverage worldwide.

    Both birds eye and streetview imagery are brilliant experiences and are useful in different circumstances. For example when searching for a new house streetview really gives you a clear indication of what the front of house looks like as well as the roads around the house. Birdseye however lets you see what the entire area looks like including the back garden and nearby parks. Both are useful if different ways and neither ‘suck’ compared to the other.

    The other common comparison we hear is the coverage Google have in streetview vs. the birdseye coverage Bing have. With Google having streetview over huge areas of Europe and North America it’s easy to think Bing’s Bird’s eye coverage of only major metropolitan areas in these countries is not as impressive an achievement. However consider the following as it might start to seem less of a valid comparison:

    1. Streetview can be taken on any day it doesn’t rain/snow, birdseye can only be taken on cloudless days
    2. Streetview is taken using any normal car, Birdseye is taken from a plane. Costs and laws applying to the use of these two is vastly different.
    3. Streeview required specialist cameras but they are nowhere near as expensive as the cameras and lenses required to take imagery from a plane.
    4. Capturing an entire city in streetview only captures the streets and the areas visible from the street, a small fraction of what birdseye captures with every square metre of the city.
    5. Streetview does not have to combine as many images, taken at different times, from different angles and heights. The sheer processing involved in producing quality aerial imagery let alone birdseye imagery is vast in comparision.
  • TheWebsiteIUse.com’d new maps ‘suck’ because they have moved from Bing/Google to Google/Bing

    Lastly we often hear complaints from regular users of various websites when that website changes the mapping platform they use. Their complaints are usually a combination of the following factors:

    1. They were used to how the old mapping worked, no one likes change
    2. TheWebsiteIUse.com has not implemented all the features of the new mapping platform, or has implemented them in a worse way often because they try and replace like with like rather than creating a mapping experience that works best with the new platform.
    3. The new mapping platform doesn’t offer the same quality of imagery in their locations as the old platform. However it may now be vastly superior in other regions or the new platform brings ‘different’ types of imagery or data like birdseye or OS maps in the UK.

Enough preaching, what are we trying to say?

Maybe you found our blog today, or read it regularly, or someone sent this article to you after you expressed your opinion on a mapping platform. However you came to read this article, we hope it has inspired you to think a little more about giving a mapping opinion or criticism online. If you have just tweeted, emailed, blogged something maybe you would like to go and add more detail, or suggestions, to your comment and maybe even target it at someone who will gladly receive your feedback and have the power change things?

Why not share your new clearer opinion or criticism with the right people, so try the following twitter accounts in your tweet or tweet the website or product that you are using the maps on.

@bingmaps, @googlemaps, @mapquest, @openstreetmap, @ovimaps, @earthware

Syndication

Links

Archives

July 2014
M T W T F S S
« Mar    
 123456
78910111213
14151617181920
21222324252627
28293031  

Other