I don't always get asked to build completed sites: in the case of 10 Clarendon Crescent - residential apartments for visitors - I was asked to build a site-shell that can be added to easily over time.
Part of the reason for this was the ongoing development of the apartments themselves (being converted from an old hotel) but also the marketing was already beginning and a web address / site needed to be set up to supply more information at this early stage.
Therefore the site needed to be easily updated, simple to use and also easy to edit repeatedly as content may well change as the development entered different stages. So, it may be a shell, but feel free to check out the design - what was required was a striking, classy and informative site, with clearly defined sections and big buttons to make each page obvious.
The page also needed to incorporate a nice hand-drawn picture of the building (a remnant of the old hotel's design work), as well as a new logo for the establishment, all blending in to a high-contrast look.
The homepage of the 10 Clarendon Crescent website
One aspect of the site that I was asked to build was the mapping elements. In the end we went with a simple locational map, with a smaller inset-map on the homepage, leading to the map / address details. In time, a directions box will be added, but as the apartments aren't ready yet, we felt this could wait a while.
Detail of the maps on the 10 Clarendon Crescent website
So that's a bit of detail on a (relatively) recent project - I've been working away on a major project that is nearing its release date, but I can't give any more information out until that point - but I'll be sure to do a profile of it once it's done. Due to the reduced amount of time I have on design work, it makes it easier taking on one-off large projects than multiple small ones as I did before.
It's nearly that time of year again, where the Edinburgh Festival takes over the city and people flock to visit the huge variety of performances on offer. And as always, the website / booking service is getting a bit of abuse across the web. They say the online booking system is greatly improved this year, but the website still remains the same design (shame). I haven't fully checked this year, but usually there is also a major lack of a decent, interactive venue map.
Last year I decided to tackle this problem head on by creating the Fringe 2008 Map - I did this project as a 24 hour app or Mashed 2008 - and although I've not done anything this year for Mashed 2009, I'm happy to say I've given the Fringe Map a few tweeks and a redesign for 2009.
Screenshot of the newly-designed Fringe Map 2009.
So, if you'd like to take a look at this years map, click the link below. As always, the map is fully interactive, with users being able to update and edit venues as well as being able to sort the map in a large variety of ways, depending on your needs. And just as a bonus, a few of my favourite food/drink venues are on there too, in case you're unsure where's good to go!
And just to show the Fringe website services aren't all bad, I was pleased to see a nicely designed Flash "game" used to promote this year's festival. It's called "The Fringe Thing" and is an experiment-based discovery tool, whereby the "thing" (it looks much like an egg) can be interacted with in a number of ways, with the ultimate aim of finding out what it is. Some of the experiment videos are great fun as well - and although it has no real purpose, it's a nice little app to kick things off :)
The Fringe Thing - Experimental Game [click to visit]
I decided to tinker around with StreetView and make my own client, with a number of tools not available on the official site. I've developed a system that chooses a random location in the south of Edinburgh and allows you to explore it.
Although I made this a few weeks ago, it's taken me a while to write it up. I've testing out a new system for projects where some of the more technical details are hidden until you click to expand. Sorry for the delay, but hope it works!
The following code highlights a few excerpts from the StreetView client above, but certainly isn't comprehensive - for that, just check out the source code.
First off, you need to declare your variables:
var panoClient; var map; var panorama; var currentYaw = 180; var currentPitch = 0; var timer; var marker; var guyIcon; var mapCentre = "55, -3";
Next up, we need to create a basic StreetView client and panorama to display and parse the data [note the ¶ symbol shows an unintentional line break]:
panoClient = new GStreetviewClient(); panoClient.getNearestPanorama(mapCentre, showPanoData);
panorama = new GStreetviewPanorama ¶ (document.getElementById("pano"));
Then the panaroma div needs to be sent a location, yaw, pitch and zoom - in this case, the last three variables are given 'current' values so data can be gathered from the user's selection:
The ability for the client to smoothly rotate the map is gained from only two small functions, one to set the parameter changes and one to set the timer changes. These values can be tinkered with to change the speed and movement of the rotation.
function spiralslow() { currentYaw += 0.75; panorama.panTo({yaw:currentYaw, pitch:currentPitch}); }
function spinslow() { clearInterval(timer); timer = window.setInterval (spiralslow, 50); }
In order to stop the rotation at any point, a simple stop function is created that resets the timer to zero:
function stop() { clearInterval(timer); }
Finally, you can set up the marker icon to look like the little StreetView man used on the Google Maps site. Other sites may well have missed out the .shadow and .shadowSize lines, but without these the marker will be given an extra shadow - the PNG file for this marker has a shadow in it, so you need to set the default shadow to 0 to end up with it looking right:
guyIcon = new GIcon(G_DEFAULT_ICON); guyIcon.image = "http://maps.google.com/intl/en_us/¶ mapfiles/cb/man_arrow-0.png"; guyIcon.transparent = "http://maps.google.com/intl/¶ en_us/mapfiles/cb/man-pick.png"; guyIcon.shadow = "http://maps.google.com/intl/en_us/¶ mapfiles/cb/man-pick.png"; guyIcon.shadowSize = new GSize(0.0, 0.0); guyIcon.imageMap = [26,13, 30,14, 32,28, 27,28, 28,36,¶ 18,35, 18,27, 16,26, 16,20, 16,14, 19,13, 22,8]; guyIcon.iconSize = new GSize(49, 52); guyIcon.iconAnchor = new GPoint(25, 35); guyIcon.infoWindowAnchor = new GPoint(25, 5);
So that's some of the key functions in this StreetView client - take a look at the source code if you want to find out more. The above code presumes some knowledge about embedding Google Maps, but it's all relatively simple stuff that can be picked up in numerous online tutorials.
- The StreetView Icon doesn't show view direction - Each random view is calculated in JavaScript, within a bounding box - The Panorama function helps find the nearest StreetView
OK, so I was expecting something 'April-foolish' from Google but didn't expect it to be quite this subtle - I was thinking maybe a re-designed logo or an unusual search result, but it seems they've plumped for a Street View panda icon (that old chestnut!).
Maybe this is just in the UK (we've only just got Street View after all) but if you go to Google Maps drag the yellow man onto a blue street as normal, now he magically turns into a panda in the overview map:
I'm about to launch a new Street View service on this blog (next post) so watch out for that - in the mean time, you'll have to make do with some bamboo-fuelled goodness!
Google Maps recently released the functionality to make PolyLines follow the shortest path across the globe, rather than a straight line across the map projection. This will follow a curve showing the shortest distance between any points and will equate to roughly the route a plane would take to get between two points.
To see what I mean, here is an example. Move the two points to see the quickest route and also the route distance:
You might be wondering how to do that and it's really quite simple. You need to set up two points and have set up a PolyLine between them and then it's just a case setting the line to geodesic:true and you're in business:
marker1 = new GMarker(52.166,0.966,{draggable: true, icon:iconStart}); marker2 = new GMarker(37.4328, -122.077,{draggable: true, icon:iconDest}); poly = new GPolyline(line,"#843718", 3, 40, {geodesic:true}) map.addOverlay(poly);
Another nice feature and pretty simple to implement :)
I think a draggable box to resize a map is a really useful feature and is common in GIS software. I've seen this functionality on a couple of online maps before, so thought I'd have a go at implementing it myself.
I've adapted some JavaScript code I found online and designed a couple of button to control the zoom. So this feature doesn't conflict with standard controls, you click the zoom button to enable drag zooming - and click the button again to get back to default control options:
I'll explain in more detail how it's done soon, but for now you'll just have to hazard a guess! :)
I was recently inspired to make my own 24 hour app, to see what could be achieved with a bit of concentrated effort.
Before I start describing the resulting app, it's best to point out that in total this probably took closer to 48 hours to complete and test, but I was working alone so the principal holds I think!
I wanted to create a map that tested a few features I'd not used before and made a short list of what these should be:
1. A search box that references geonames.org before bringing the location back to the google map.
2. Database driven form menus allowing quick reference to any site on the map and a way to simply designate this search result using map icons.
3. An easy-to-use map editing system that allowed users to add a feature to the map without knowing the latitude and longitude: either by searching the map with an address or by pinpointing the marker on the map.
I also wanted to make sure the design was up to date and did the service justice.
So, I decided to make an interactive map for the Edinburgh Festival Fringe 2008, showing all the venues on one map and supplementing this data with places to eat and drink etc. Not only would this allow the criteria above to be met, but also produce something that isn't already available online (or at least not that I could find!). This map is located at:
I'll start with an overview of the finished design then move onto some specific details - feel free to click this first image to enlarge it:
Taking a closer look at the interactive elements, you can see that multiple search boxes have been provided. The main text search sends the entered string to geonames.org, adding ", Edinburgh, UK" to any search to make it fit the service. If the user enters a postcode, however, this addition is unnecessary and not used. The second set of searches use the database to fill form menus with a two list of all the venues on the map. These are ordered by both venue number and by venue name making it easy to find the venue you are interested in:
If the standard search box is used, the map re-centres on this location, keeping any criteria the user has chosen previously on the map. If the venue list is used, the map centres on this venue and changes the icon to a big blue star so it is obvious which venue they have chosen.
The following image shows the map criteria, the 'edit map' button and the standard info box for the features on the map:
The 'edit map' button detailed above brings the user into the Editor. This zooms in to the map, changes the base layer to basic mapping and removes all the markers bar one. Once this marker is moved to the desired location, a popup box appears with a form to fill in all the desired information for a new feature. The latitude and longitude are automatically calculated behind the scenes. Once the boxes are filled in, the form can be submitted and the feature will appear instantly on the map for all to see:
Alternatively, if the exact address is known, this can be submitted to the main search box first. Once the location is found, pressing 'edit map' will zoom on in this location and the marker can be added from here.
So there it is - A 48-hour app inspired by Mashed 2008, I hope it provides a useful service!
I've just got myself a new SmartPhone and have downloaded the Google Maps program (CAB file) for Windows Mobile. It's a great little program and an easy to use - and useful - addition to my phone.
When you load it up, it will centre the map on your current location based on triangulation or GPS (only with GPS-activated phones, of course). The things work pretty much as normal, allowing maps to be explored. But crucially, this allows you to find out where you are when you don't know where you are! (mobile-internet signal depending..)
Triangulation uses distances to various mobile antenna and is available on all phones, but can only provide a location within an accuracy of 1km or so (of course, this varies upon location).
What I'm interested in is the relative qualities of the triangulation and GPS systems and what this service would be used for. I've recently ordered a Bluetooth GPS device so I'll let you know how useful it becomes, but is triangulation accuracy enough?
When traveling in a foreign location, a map of where you are could be immensely useful, but with street names listed on the maps, even 1km accuracy will help you find your way. The only case you'd need higher accuracy is when in more remote location (such as finding a path on a walking route) but of course, the quality of maps and GPS signal in such locations can be dramatically less.
For now, triangulation is OK, but I'm about to explore the use of GPS and (hopefully) OS maps as a walking tool. I'll report back on progress! I imagine GPS will be added to all phones within 5 years, but I suppose this will only happen if it offers any real advantage - perhaps we're waiting on online mapping technology to provide the relevant accuracy to correspond with a GPS?
Just a small round up of nice things I've seen recently. First up, a BBC radio programme that won the Sony Award for Multi-platform Radio at the 2008 bash. Now, I didn't catch any of this programme but i can see that the 'multi platform' nature of the show is stitched together using an interactive google map on the main page - the show was called Bangladesh River Journey.
This map is nothing particularly special, although I like the way separate pages can be scrolled within each map marker, allowing a lot o0f content to be added without too much clutter. However, there is nothing particularly groundbreaking here. I think what it highlights is that relatively simple maps can really help bring a diverse set of media into a coherent web of content.
Another nice site I found was a high-res flash site for Sparks (an energy drink company). I particularly liked the high quality and large image (much bigger than a computer screen) that had to be explored to find the content. Obviously, this would only work well for a website with little meaningful content (a BBC site like this would be disastrous!), but it's great for a high-impact design site and fits in with the "fun" image of an energy drink.
It also adds a bit of 'real-life' into the web as it's basically just a large photo of a wall with things pinned to it using flash. Normally, when a document is much bigger than the screen, scrolling around it causes disorientation, but here that doesn't really matter - it's fun trying!
I recently stumbled across a new BBC project: World On The Move which uses a Google Map to track animal migrations across the globe, showing predicted and actual routes as well as user comments - all on a nicely integrated map that can be changed along a timeline:
The nice thing about this map is how seamlessly it is integrated with the content and the webpage itself. The BBC aren't often ones to make new ground with their services, but they often take the 'old ground' and use it in a professional and interesting way.
Google Maps Street View is a potentially great mapping service, showing street-level imagery via Google mapping, but this brings in issues with privacy etc, with trucks driving around streets taking imagery without prior consent of those individuals on the street at the time.
Obviously, a lot of (bored?) individuals have spent their time looking for interesting things caught by these 'camera trucks'. For a top 15 sightings from this feature click here.
A humorous take on these privacy issues can be seen in the video below - OK, it's a bit corny, but quite nicely done:
Since the beginning of the UK Webcam Map (beatsdesign.co.uk/ukwebcams/), users have been adding data on a number of things. Each day, weather data is imported from the Met Office (changes 3 times daily) and each info box shows the predicted weather at that location.
Users can then look at the webcam image and say if the weather is as predicted or not. This can then be used to show how accurate weather predictions are for that location...
This is not intended to show how weather forecasting can be inaccurate, but mroe to show which areas are served well by a general weather forecast. It may be expected that big cities would have more accurate predictions as weather stations are located there, or maybe that mountainous regions are inaccurate as weather there is very changeable....but take a look at the (ever-changing) results and keep sending that data in - thank you!
The UK Webcam Map (beatsdesign.co.uk/ukwebcams) has remained the same design since its inception, with a nice marroon theme - but it felt like it was time for a change, so a new, more professional was created using a grey background and a nice new logo! Click the screenshot below or the link above to check it out:
Google added a draggable routing system to the travel directions applet a few months ago, but it was a relatively low-key update. I've tried using this service and it's quite useful, although you need a bit of practise to get the most out of it. But the JavaScript / AJAX behind it is pretty intuitive and really opens doors for intelligent web services of the future.
Instead of me explaining it, here's the official Google video, although it's a little bit cheesy. I know english and american have pronounciation differences but for some reason 'route' rhyming with 'out' really grates - anyway, enjoy!
As you may have noticed, Google have recently added a terrain map layer to their mapping applications. In order to add this layer to embedded mapping and also to have it as a layer option (like on maps.google.co.uk), a few changes need to be implemented.
To start with, you need to make sure your javascript link has the most recent version set. This is the same string that contains your google map key. Just before 'key=' you should see 'v=' - this needs to be set to 'v=2.x' to allow all new code in version 2 as it progresses, including the addition of a terrain layer:
Next, when you set up your map, include the following lines of code. These set up the new terrain layer, the layer button and add the old 'hydrid' layer as an option of the 'satellite' button:
map.addMapType(G_PHYSICAL_MAP); var hierarchy = new GHierarchicalMapTypeControl(); hierarchy.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP,
null, true); map.addControl(hierarchy);\n"; map.setCenter(new GLatLng(LAT, LONG), ZOOMLEVEL, G_PHYSICAL_MAP);
We've added the terrain layer on our UK Webcam Map - It loads as the default map layer...take a look and see what you think!
This allowed BBC Berkshire and users of the website to post photos, video and audio reports to locations on the map, which were then displayed using a variety of symbols:
These data were supplemented by use of the Environment Agency official flood warnings as well as council designated 'safe houses' - the result was an up-to-date flood information map for the local community.
This map shares many ideas with our UK Webcam Map in the use of live data and an addition of environemntal data.
Google Mapping is improving fast and becoming easier to create bespoke maps - This change allows maps using live or recent data to be created quickly and to serve a usual public service.
Despite talk of a GPolyCircle, so far nothing has appeared. So in the meantime, use the following script example to get a nice circle drawn onto your google map, simply by selecting the location of its center and it's diameter in kilometres. Styles can also be changed, to alter the width and colour of the line.
In the following map, a number of circle examples are shown, varying in colour (green, red, blue), purpose (simple circles and targets) and thickness:
This script is quite simple, but care needs to be taken to set it up correctly. All the code should go in the function load() section of the Google Maps JavaScript on you page (see this page's source for an idea).
function mapCircle(lat,lng,radius)
{
var points = [];
x = lat;
y = lng;
r = radius;
r2 = radius*(1.74);
for (var i = 0; i < 600; i++) {
x1 = x+r*Math.cos(2*Math.PI*i/599);
y1 = y+r2*Math.sin(2*Math.PI*i/599);
points.push(new GLatLng(x1,y1));
}
return points;
}
This should be followed immediately by the code to create the line of the circle. This code should be repeated for every circle you want to display:
var diameter = 6; //circle diameter in kms
var radius = diameter/220; //ignore
map.addOverlay(new GPolyline(
//mapCircle(lat, long, ignore,), colour, width, ignore;
mapCircle(55.9557,-3.1884,radius), "#666699",2.8,0.8));
That's pretty much it. However, to make sure the lines draw correctly in IE, be sure to replace your <html> tag with the following:
