After many, many hours of fine-tuning, I've created a nice little system for displaying multiple photographic layers withing one image. This is great when you have multiple versions of one image (say a colour and b&w copy) and want to be able to easily flick between layers.
 
This uses a relatively simple piece of JavaScript as well as HTML image maps, but the reason it took so long to perfect was because of problems using this script across different internet browsers. Instead of setting the multiple layers to invisible div tags, they have to have the setting 'display:none'. This allows the layers to be pre-loaded without the HTML displaying a blank space where the image should be. Secondly, a lot of issues were encountered when using multple instances of the same script on one page, but again these issues have been resolved.
 
The first example shows a black & white image and a colour image of Napier University's Craighouse campus:
 

 
The second example shows a different image of the same campus, but this time using four layers with different tints applied in Photoshop. This allows the effects of various photographic filters to be reviewed:
 
 

 
The final example shows a slightly more intuitive use of this code, using a little bit of image design to alter a night time photo by adding 'lighting' to an image. Clicking the lamp will turn on the lights and increase the image brightness:
 

 
At the moment, I'm going to leave this example without script details. It took so long to perfect that I can't face explaining all the code right now, but feel free to view the page source to have a wee look at the process. I'll update this post with detailed instructions in the next few days!

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:

 <script src="http://maps.google.com/maps?
  file=api&amp;v=2.x&amp;key=YOURKEYHERE" 
  type="text/javascript">
 </script>
 

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!

There was an interesting shift of the BBC's use of Google Mapping when they documented the floods in Berkshire using live or recent imagery:

BBC Flood Map 2007

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.

To leave feedback about the BBC Flood Map, click here.

Although PHP is gradually taking over where database-driven websites are concerned [link: PHP Overtaking Perl], there are still may reasons to use perl. It is faster for one thing and has simpler complex functions than php [link: PHP in contrast to Perl].

I'm not advocating either language, especially as what language one uses is often down to experience and tradition, more than anything else. What I will show here is how perl can be used to perform a function normally easier to perform in PHP: creating content in an HTML document from a database.

In this simple case, I am going to show how to set up a changing hyperlink that links from an HTML page. In PHP, the html would be created (as a .php file) and the link retrieved from the database as the page writes. HTML pages can contain database-driven Perl content using iframes, but this isn't the best method for a simple hyperlink.

The following code is currently in use on the Beats! Design webpages and can be seen at the bottom of every page. the image below shows the bottom-right of each page, where a little square containing musical notes can be seen. This is our 'hot link' - a particular website that has recently gained out attention...which we wanted to change easily (for all pages) using a simple database form:



The way we have used Perl to make this link database-driven is to link to a Perl file with a 0 second redirect. The Perl file calls up the database to get the latest 'hot link' and redirects instantly to this page. This way, no iframes are needed and the link can be changed once and instantly applied to all pages.

The perl file calls up the database and retrieves the link, then sets this to a variable ($url) and this is then replaced in the following script. This script sets up a very basic HTML page to redirect instantly to this link:

 <html><head><title>Redirecting...</title>
  <meta http-equiv="Content-Type" content="text
  /html;charset=iso-8859-1">
    <style type="text/css">
     <!--
     body {background-color: #000000;}
     -->
    </style></head>
  <meta http-equiv="REFRESH" content="0;url=$url">
 <body></body></html>
 

So that should explain how Perl can still be used for jobs more naturally done in PHP - and don't forget to click our 'hot link' from time to time to see an interesting website!

One of the greatest omissions from the Google Maps API / Documentation is the ability to draw circles onto maps.

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:

 <html xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:v="urn:schemas-microsoft-com:vml">
 

Adobe Photoshop is a great design tool, but - like any program - can be put to both good and bad uses. Sometimes, the desired effects take a lot of time, so I thought I'd introduce a couple of very quick and easy techniques that can create great design looks!

First up, creating custom brushes.

All you need to do here is grab a picture of a shape you want to use and isolate this using the select or magic wand tool (see picture below, left). Then go to the edit menu and select Edit > Define Brush from Selection. Now, save the shape and go to the paint brush tool. Now, select the brush you just created from the bottom of the paint brush drop-down menu.

You can play around with it as much as you like. Here, i used a hot air balloon for my brush and made a little image for the made-up (although it may exist!) organisation 'Ballooning UK'. This has a gradient background, 2 layers with a bigger balloon and smaller balloon and a bit of text:




Next up, iTunes-style reflections.

This is much easier than you might think! First up, grab a photo of an album cover or anything really. Either use a two-tone background or all black, but make sure the bottom half is all black. Copy the photo in and let the bottom land just below the half way mark.

Now, duplicate the layer and (using the free transform tool) drag it down so it is the reflection of the image above. Now, select this layer and apply a gradient to it. Edit the gradient tool so it is 'foreground to transparent' and set the foreground colour as black. Apply this tool in different ways until the bottom half of the reflection fades into the black background.

On the left of the picture below, a simple vertical reflection is used and on the right, the reflection image is slightly rotated (and slightly edited) to give an off-centre reflection. try it and see!

If you create a basic HTML page, then you will find the automatic margins are places around the contents of the document body.

If you start a table or image from the first line of HTML code, there will be a small gap displayed between this image and the top of the page as margins are automatically added by most browsers.

However, if you look at the top of this webpage, you will see that the graphics start from the very first line of the page. This is evident where the strings holding up the trumpet meet the top of the page.

This applies to the left, right and bottom margins as well, although this is less obvious here. The code is really simple to get rid of margins in all main browsers - simply copy and paste this code into the <head> section of your document.

 <style type="text/css">
   v:* {behavior:url(#default#VML);}
   html, body {width: 100%; height: 100%}
   body {margin-top: 0px; margin-right: 0px;
         margin-left: 0px; margin-bottom: 0px}
 </style>