OS Grid References and the Multimap API (2)

var locations = new Array();

var xy1 = new MMPoint(523000,212324);  // OSTN97 OS National Grid
var xy2 = new MMPoint(323000,212324);
var xy3 = new MMPoint(423000,212324);

locations.push(xy1);
locations.push(xy2);
locations.push(xy3);

var funcRef = convertResultsLoaded;
var converter = new MMConverter( funcRef );
converter.convert(locations, 'osng');

function convertResultsLoaded() {
    console.log(converter.result_set);
};

A while ago I blogged about using OS Grid References in the Multimap API.  Web mapping developers in the UK often grew up with Ordnance Survey (OS) maps, are used to using the associated OS grid references (rather than lat/lon) to specifiy location and want to use them in mapping APIs.

Previously Multimap released a new feature in the API to allow developers to convert grid references to lat/lon for use in the API.  Multimap have a fantastic technical writing team and they have just released documentation on this feature (which is called Coordinate Transformation). 

The documentation on how to use the features in the Multimap JavaScript API is here and the documentation on how to use the features with the Multimap Web Services is here.

Thanks to Manu Gaur for this great documentation.

Happy coordinate transforming!

Multimap API – New Route ‘Actions’

Web applications using Multimap API Routing often include custom ‘travel direction icons’ in the route instructions for clarity and a richer user experience.  For example Ford use icons to indicate the direction of turn in their Irish Ford Dealer Locator routing:

The RAC has followed a similar approach with their route planner instructions:

Previously developers who are created their own travel directions icons needed to know what all the possible text instructions were, so that they could assemble a full set of images, and then parse the route instructions for the descriptions so that the correct icon could be used for each step.  This got worse if you were implementing applications with several languages, as you would have to look for a different set of instructions with each language!

Thankfully Multimap has been working hard to produce  language independent symbol/step_type tokens that can be used by developers to create their own strings or display their own icons.   So now developers do not have to parse variable instruction strings, but just use the new tokens instead.

This new feature involves step attribute called ‘actions’ which can be used by to build step icons. So, for example, you can make your own turn_left.gif and roundabout_1.gif etc and don’t have to parse the instruction to extract the information on which steps should be given these icons, but just check for the relevant actions (“turn_left” and “roundabout”). We expose these actions as an array called ‘actions’ which can have one or more action values

The full documentation on how to use this new feature is here

Happy routing!

Martin loves Multimap!

Martin Daly has done a review of embedded map tools and Multimap comes out top.  More details on how to use this are here.

Multimap API – New Mapping in the Middle East, Northern Ireland and Great Britain

Multimap have recently released new street level maps for countries in the Middle East.  The countries are:

•    Bahrain
•    Kuwait
•    Oman
•    Qatar
•    Saudi Arabia
•    UAE

We have also added:

• Additional zoom levels of maps in Malaysia
• Collins Bartholomew Road Atlas maps for Great Britain
• Ordnance Survey Northern Ireland maps

Here are some examples:

Middle East (zoom levels 13-18)

Two additional zoom levels of street-level maps in Malaysia

Collins Bartholomew of Great Britain (Road Atlas)

Ordnance Survey Northern Ireland (zoom 13-15) – this data is similar to our OS Land Ranger data in GB

Localising the Multimap API

It is now possible to localise the Multimap API for a specific language.  This means that when I am in Austria, I can develop a mapping application using localisation and see the world from German speaking perspective.  So at last German speakers no longer need to know that Map = Karte.

To do this I add a LOCALE_CODE parameter to my Multimap API request like this:

<script type="text/javascript" src="http://clients.multimap.com/API/maps/1.2/[API_KEY]?locale=de-AT"></script> 

Then the API version I get has all of the following localised:

• labels, tooltips and messages;
• alternative language map labels (currently available only in China);
• translated Virtual Earth hybrid aerial map labels (where available);
• Local Information categories;
• default units (Imperial or metric) in map copyright bars; and
• route instructions.

You can see this in action in the excellent demo application my colleague Alexis Harakis put together here.

Localisation is all documented here and the locale codes are described here

Happy localising!

Multimap.com – Now with Embedded Maps

 

Last week Multimap released a new service for small businesses, personal web sites and hobbyists.  The service, available for free from www.multimap.com, provides a single line of HTML to cut and paste into a web page, like this:

So basically this allows you to easily embed a map in your website, without having to write any of that pesky JavaScript yourself.

The user gets a slippy map in a choice of map styles (Navteq, TeleAtlas, Ordnance Survey and Barts) or aerial for anywhere in the world (US included, using Virtual Earth maps and aerial). The pasted HTML includes hyperlinks back to www.multimap.com:

The service is limited to 50,000 transactions per year (which Multimap tracks) and cannot be used for internal applications (eg BI, CRM).

The uptake has been amazing, with over 500 web sites implementing the new embedded maps in the 1st week. 

So how do I use it?

1. Go to Multimap.com

2. Search for a location

3. Select Link (top right of map)

4. Check the box for T&Cs and cut and paste the line of HTML which will look something like this:

<div id="MMEmbeddedMap" style="padding:8px">
<iframe width="500" height="400" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0"
src="http://www.multimap.com/client/embed/?lat=47.26269&lon=11.3947
&zoomFactor=17&mapType=hybrid&moveMap=-85,-394&
qs=innsbruck&emid=yAstqbmcYmb1ZLXDxu4eDCV95BurZAwb">
</iframe><div><a href="http://www.multimap.com/maps/?l
at=47.26269&lon=11.3947&zoomFactor=17">
View map of Innsbruck, Tirol (Tyrol), Austria</a>
on Multimap.com<br /><a href="http://www.multimap.com/maps/?
lat=47.26269&lon=11.3947&zoomFactor=17&mapType=oblique">
Bird's Eye view of Innsbruck, Tirol (Tyrol), Austria</a>
<br />Get directions <a href="http://www.multimap.com/directions/?
lat_2=47.26269&lon_2=11.3947&countryCode_2=AT&displayName_2=Innsbruck,
Tirol (Tyrol)&qs_2=Innsbruck, Tirol (Tyrol)">to</a>
 or <a href="http://www.multimap.com/directions/?
lat_1=47.26269&lon_1=11.3947&countryCode_1=AT
&displayName_1=Innsbruck, Tirol (Tyrol)&qs_1=Innsbruck, Tirol (Tyrol)"
>from</a> Innsbruck, Tirol (Tyrol), Austria</div></div>

5. To configure and change map size or move the red circle, click on the link “customize and preview map” to update the link text. 

So who is using Embedded Maps?

The uptake has been amazing with over 500 web sites implementing the new embedded maps in the 1st week. 

Here are some of the websites using embedded maps so far:

http://www.hamiltoncollege.org.uk/contacts.html

http://www.stationcatpottery.co.uk/find%20us.php

http://www.fea-online.com/docs/contactus.html

http://www.stedmundsedmonton.co.uk/index.php?pr=Finding_Us

http://www.carparksdrive-incinemas.co.uk/page13.html

http://www.stjoesrfc.co.uk/8.html

http://raveoneinuk.canalblog.com/

http://www.societies.cam.ac.uk/ballet/class%20details.htm

http://www.baconandeggs.co.uk/The_Firs_B&B/Useful_information/How_to_find_us.html

http://friendsofhershamhounds.blogspot.com/2008/10/next-greyhound-social-walk-west-end.html

http://website.lineone.net/~newcastle_staffs_ac/newccontact.html

http://www.thatchamaa.co.uk/venue_whitehouse.htm

Happy embedding!

Multimap and Geonames

One of the common problems with Web Mapping applications is that what end users regard as a place often does not match the ‘official’ place names in the commercial gazetteer data that web mapping services depend on for geocoding.  For example in London everyone knows where “Soho“, “Bloomsbury” and “Big Ben” are, but in reality these are not official place names.  These kind of unofficial place names are often referred to as “Vanity Areas”.  End users rightly expect that there web mapping application will take them to these places, but if we rely on commercial gazetteer data alone this is not enough.

Sp how can we fix this?  Well, Multimap have integrated GeoNames as an additional data source for address look-ups. You can see it in action not only on multimap.com, but also in the Multimap API. 

From the Multimap blog:

GeoNames is a global geographical database that contains over 6.5 million places, with 2 million alternative names in up to 200 languages, that is continuously updated by users around the world, through a friendly wiki interface. Any changes are integrated into the Multimap databases within 24 hours.

GeoNames contains geographic places such as mountains, seas, lakes, valleys, coasts, and places of interest. In addition, it also contains alternative names so you can find a place like ‘London’ in many different languages (Londres, Londra, Londýn, Londain, Londinium).

A great example cropped up recently with a customer I work with.  They had recently developed a new web mapping application and were demoing it to all their local sites.  They knew that one local web master always tested mapping applications by searching for the small hamlet in which they lived in.  This hamlet is so small it does not appear in any of the commercial gazetteers.  So they added this hamlet to Geonames before doing the demo.  When the web master saw the application and found their hamlet they said it was the best web mapping application they had seen!

It is also possible to integrate Geonames with Virtual Earth.  Johannes Kebeck has done a blog post on this. 

How to grow and sell a mapping company

Juts found this video of Sean Phelan talking about how he started Multimap, grew it and eventually sold to Microsoft.  Interesting stuff, especially on surviving the dot-com crash and the reasons for the sale.   I love Sean’s phrase that Multimap (in the context Google and Microsoft) was a mouse “running around two elephants fighting”.

My 1st Photosynths on a Map

I have had some fun taking a few Photosynths in London and wanted to follow Chris Pendleton’s approach to putting them on a map.  However, I decided to use the Multimap API…

Here is my map of Photosynths.  The great advantage of the Multimap API for this is that I can use grid decluttering, which is useful when several Photosynths are located close to each other (i.e. when you zoom out you can still see them all)

It really is easy taking the Photosynths and embedding them in the application.

Here is the code:

<script type="text/javascript">

var mapviewer;

function onLoad()
{
  //Add the map
  mapviewer = MMFactory.createViewer( document.getElementById( 'mapviewer' ));
  mapviewer.goToPosition( new MMLatLon( 51.50854, -0.06619), 13);
   mapviewer.setMapType( MM_WORLD_HYBRID );

  map_type_widget = new MMMapTypeWidget ();
  pan_zoom_widget = new MMPanZoomWidget ();
  overview_widget = new MMOverviewWidget ();
  location_widget = new MMLocationWidget ();
  mapviewer.addWidget ( map_type_widget );
  mapviewer.addWidget ( pan_zoom_widget );
  mapviewer.addWidget ( overview_widget );
  mapviewer.addWidget ( location_widget );

  addMarkers();

}
function addMarkers() {
    mapviewer.removeAllOverlays();
    var group_name1 = 'Group 1'; 

    var icon = MM_DEFAULT_ICON.copy();
    icon.groupName  = group_name1;

    var pos = new MMLatLon( 51.46135, -0.05164 );
     var marker = mapviewer.createMarker( pos, {'label': 'Nunhead1', 'text' : 'P1', 'icon' : icon} );
    marker.setInfoBoxContent("<iframe frameborder=0 src='http://photosynth.net/embed.aspx?cid=35bbb7bc-d58f-48bc-9186-5bc19c456dd5' width='400' height='300'></iframe>");

    var pos2 = new MMLatLon( 51.46325, -0.05153 );
    var marker2 = mapviewer.createMarker( pos2, {'label': 'Nunhead2', 'text' : 'P2', 'icon' : icon} );
    marker2.setInfoBoxContent("<iframe frameborder=0 src='http://photosynth.net/embed.aspx?cid=DAEF7506-5F32-4413-99CE-DEEC112D75DA' width='400' height='300'></iframe>");

        //nunhead 3
    var pos3 = new MMLatLon( 51.46383, -0.05121 );
    var marker3 = mapviewer.createMarker( pos3, {'label': 'Nunhead2', 'text' : 'P3', 'icon' : icon} );
    marker3.setInfoBoxContent("<iframe frameborder=0 src='http://photosynth.net/embed.aspx?cid=DF97FEEF-B370-4E5D-9A34-4238A721BAA1' width='400' height='300'></iframe>");

        //bank
    var pos4 = new MMLatLon( 51.51344, -0.08881 );
    var marker4 = mapviewer.createMarker( pos4, {'label': 'Nunhead2', 'text' : 'P4', 'icon' : icon} );
    marker4.setInfoBoxContent("<iframe frameborder=0 src='http://photosynth.net/embed.aspx?cid=7DB0ED82-3038-4EDC-AD03-A630B8FA00E7' width='400' height='300'></iframe>");

        //deptford
    var pos5 = new MMLatLon( 51.47942, -0.02417 );
    var marker5 = mapviewer.createMarker( pos5, {'label': 'Nunhead2', 'text' : 'P5', 'icon' : icon} );
    marker5.setInfoBoxContent("<iframe frameborder=0 src='http://photosynth.net/embed.aspx?cid=891FBC9E-5085-4D7E-A5BD-C98998EE3DB3' width='400' height='300'></iframe>");

   mapviewer.declutterGroup( group_name1, {}, MM_DECLUTTER_GRID );

}

MMAttachEvent( window, 'load', onLoad );

</script>

And the HTML:

</head>
<body>
<!-- The Multimap Map -->

<!-- The Multimap Map -->
<H1>Tim's Photosynths</H1>
<div id="mapviewer" style="width: 800px; height: 500px;"></div>
<br><LI>Click on the P markers to see the photosynths</LI>
</body>

</html>

Note – you need to change the ” (double quotes) to ‘ (single quotes)  in the iframe text provided by Photosynth when adding this to the infobox content. 

Update

Peter Batty has done a great Photosynth review with some good tips here.

Progressive Enhancement in Web Mapping – An Example

A while ago I blogged about Static Maps and how these could be used without any JavaScript.  This means that Static Maps can be used to develop mapping applications that use ‘Progressive Enhancement’.  Basically this is a fancy way of describing applications that gradually increase their functionality only as and when required by the end user (so the application becomes progressively enhanced).

One of the disadvantages of JavaScript mapping APIs is that the browser needs to download the JavaScript library before the mapping loads.  This can take a little time.  If you use a static map it requires no download of the JavaScript library and therefore a quicker download of the page and map.  This means that you can use these together, starting with the static map, and then progressing to the JavaScript mapping API only if the end user needs advanced map navigation or searching.

Active Hotels have implemented a great example of progressive enhancement using Multimap Static Maps and the Multimap API.  It is really important that the hotel brochure pages download really quickly (so as not too lose the end user).  Active Hotels also wanted a map on the page, but perhaps only about 20% of end users ever interact with the map (e.g. dragging it to pan).  So if Active Hotels used a full Mapping API for the page it would lead to slower downloads and 80% of the end users would not use the advanced mapping functions anyway.  Instead Active Hotels used the Multimap Static Maps for the initial map on the brochure page (see image above).  If a user clicks on the static map to interact with it, only then is the Multimap API downloaded and a full rich ’slippy’ map is available (see image below).

Try it for yourself here or by searching for a hotel on Active Hotels.