Archive for the 'Web Mapping' Category

MSN UK Local - New Multimap Maps

The MSN Local Property pages have just launched a new version of the property searcher using the Multimap API.  This allows users to search for property geographically and display the results on a map. 

image

It makes nice use of the Multimap marker de-cluttering and info boxes.  Using very simple and small marker icons (like these red houses) is always a good idea.

I also like the way users can easily modify their search:

image

I particularly like all the different methods of sharing the resulting map search:

image

Allowing users to IM a map to each other is a great idea!

Of course it also benefits form all the great Multimap local UK Mapping (e.g. Ordnance Survey maps). 

Multimap Embedded Maps Hack

Now I have shifted the hosting of my blog off wordpress.com, I have the luxury of being able to put iFrames and JavaScript in my blog posts and pages.  So I decided it was about time I had a slippy map on my blog and have added one to my sidebar (just look to the right…)

To do this I used the Multimap.com embedded map functionality (which I blogged about earlier).  This time I have hacked the HTML provided to customise the embedded map and make sure it fits neatly on the sidebar.

To start with I went to multimap.com and found the relevant location I wanted for my embedded map (in this case Innsbruck):

image

I then used the "customize and preview map" link in the "link to this map" dialogue box to customise the map to my needs.  This brings up this page:

image

This page provides a simple GUI to customise your embedded map.  I chose a custom pixel size of 200 x 400 (i.e. thin and long) so it would fit nicely in my sidebar.  The resulting HTML for my embedded map is provided in the "HTML" text box in the bottom.  In this case I do not have much room on my sidebar so I wanted to remove the extra links at the bottom to different multimap.com maps, Birds Eye and directions.To do this, I need to hack the HTML returned.  So firstly I copied the HTML out of the bottom text box, which gives me this when I paste it into UltraEdit (a great programmers text editor): 

<div id="MMEmbeddedMap" style="padding:8px"><iframe width="200" height="400"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://www.multimap.com/client/embed/?width=200&height=400&lat=47.26525
&lon=11.39771&zoomFactor=13&emid=Q3zd58nstiQM4o37TGjfm9hDXl4MelqK
&mapType=hybrid&moveMap=0,0">
</iframe><div>
<a href="http://www.multimap.com/maps/?lat=47.26525&lon=11.39771
&zoomFactor=13&mapType=hybrid">#]
View Aerial Image of Innsbruck, Tirol (Tyrol), Austria</a> on Multimap.com
<br /><a href="http://www.multimap.com/maps/?lat=47.26525&lon=11.39771
&zoomFactor=13&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.26525&lon_2=11.39771&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.26525&lon_1=11.39771
&countryCode_1=AT&displayName_1=Innsbruck, Tirol (Tyrol)&qs_1=Innsbruck,
Tirol (Tyrol)">from</a> Innsbruck, Tirol (Tyrol), Austria
</div></div>

The I edited the HTML in UltraEdit to remove the extra links, change the wording and modify the layout:

<div id="MMEmbeddedMap" style="padding:8px">
<iframe width="200" height="400" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0"
src="http://www.multimap.com/client/embed/?width=200&height=400&lat=47.26525
&lon=11.39771&zoomFactor=13&emid=Q3zd58nstiQM4o37TGjfm9hDXl4MelqK
&mapType=hybrid&moveMap=0,0">
</iframe><div><a href="http://www.multimap.com/maps/?lat=47.26525&lon=11.39771
&zoomFactor=13&mapType=hybrid">Innsbruck</a> on Multimap.com<br />
</div></div>

I use WordPress for my blog, so I have added the embedded map onto my sidebar as a simple text widget.  In this text widget, all I need to do is paste in my edited HTML for the embedded map:

image

Then I saved the changes and checked the appearance on my sidebar.  You can see the results for yourself….

So I hope I have shown that not only is it really easy to create embedded maps on multimap.com, but you can also easily hack the resulting HTML to suit your specific needs.

Happy hacking and embedding!

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:

image

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

image

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!

Yahoo!’s spatial thinking

I have been taking some time to explore there latest spatial thinking and innovations by Yahoo!.  Setting aside some of the current business politics, I think Yahoo! are doing some of the most interesting stuff at the moment. 

It started a while ago with their Where On Earth (WOE) IDs.  Basically these provide a hierarchical identifier system based on location.  I must admit it took me ages to realise what these are all about.  I have a map centric view centric view of the world and places, so it seemed very odd at first.  WOE IDS geo-tag (i.e. locate) things in a very different way (with no need for a map or lat/lon).  When talking about a place all people really care about is what place it is and how to ensure that they are all talking about the same place (even if you might individually define its extent differently).  Lets take an example, if we want to share data relating to Soho, how do we make sure we are talking about the same place?  So with this system we do not have to argue endlessly about what the lat/lon of Soho is (or even worse try and define it’s extent), all we have to agree on is that Soho is in London which is in England which is in Great Britain, give it an ID and then we know we are talking about the same place… 

So what I love about WOE ID is it is a simple non mapping solution to an age old spatial problem.  In fact a map is ultimately relegated to just a display function.

So ahy has this now got really interesting?  Well Flickr has been storing WOE IDs for geo-tagged photos.  From this Yahoo! have been able to predict the extent of places (with WOE IDs) based on the geo-tags for the relevant Flickr photos.  The resulting geometries are know as Alpha Shapes.  So this is a completely different way to discover more about the geo-extent of a place.  Taking the Soho example (which BTW is not an officially defined area) we can define it’s extent by what most people (taking photos) think it is.  There are examples and details of this approach here on the Flickr development blog.. 

What I love about this is that, by taking a non map-centric view of place, Yahoo have developed an approach that can tell us more about what the the perceived geographic extent of a place is.  No GIS person would ever think of doing it this way round!

Even better you can get the data yourself (as ESRI shapefiles) and try the software Yahoo use to create the Alpha Shapes (called Clustr).

More details on Alpha Shapes are blogged here too.

Lets hope this innovation continues!

mapof.it/

I was chatting to John McKerrell yesterday and he was showing me his new creation http://mapof.it/.  This is one of the coolest thinks I have seen recently and like all really cool things it is really simple. 

Basically http://mapof.it/ allows you to build URLs that take you to a specific location (or route) on a web mapping site of your choice.  So http://mapof.it/innsbruck will take you to a map of Innsbruck.  You can also request a route between two places like this http://mapof.it/munich/innsbruck.  In a way it is a kind of understandable  TinyURL for maps! You can specify a mapping site of you choice using this approach:  http://mapof.it/mm/graz,austria or set a specific site as your default with http://mapof.it/set/mm (this preference is saved as a cookie). 

What I love about this is it is simple, useful (as an easy way to send a link to a map of have an easy URL to type) and you can choose which mapping provider you want to use. 

More info is on John’s blog.

So only one question remains: How many spelling mistakes will John find in this post?

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.

Smoking Complaints

Here in Austria smoking is still alive and well as well as a favourite pastime.  Bars still have that wonderful fug of smoke and smoking in offices is still fairly common.  So far anti-smoking legislation has been resisted (apart from the odd token gesture).

Seeing this Cincinnati Enquirer (Gannett) web mapping application made me realise how different ’smoking culture’ is between Austria and the USA.  In the column on the right hand side you can choose to see ’smoking complaints’  and display incidents, like ‘ashtray present’ and ‘Infiltration of Smoke’, on a map. 

image

image

If you are a more health conscious society, serious about a smoking ban, making information like this easily accessible must be one way to have impact. 

Oh, and BTW, this site just happens to be a very cool implementation of Virtual Earth.  More details on this here

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

image

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

image

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!