Interactive Maps With JavaScript

Going beyond standard web design: To make your site really stand out requires you to go beyond standard design procedures and make your contently with interactive features. Adding features that allow your users to explore the content will create a unique and memorable experience; the key to this is making sure these features enhance the content.

• Inspiration: www.taocommunity.com

Creating the experience: “Tao Community is a group of companies that boosts communal relations at its core. What better way of showing this than through an interactive map that reflects what they do? We challenge ourselves to create an experience and, at the same time, make it easy enough for the audience to know what Tao is all about. We wanted the map in greyscale so that we can focus more on the detail without overwhelming the user.”

With the steady rise of sites looking for rich media experiences without the use of Flash – especially in the light of the recent announcements from Adobe – JavaScript has become an increasingly important power source for these experiences. The Tao Community provides a huge map to explore that can be dragged with several clickable elements; these then load relevant content to the centre of the screen. Once this would have doubtlessly been the reserve of Flash, but with HTML supporting ever richer experiences, plug-ins can now be left behind. JavaScript is used here to grab the width and height of the window and make the image full screen, and then power the dragging functionality.

#1 - INSPIRATION: Illustration style

Some of the best sites have extremely stylised content and it’s usually this element alone that makes a site stand out from its rivals. When implementing a unique navigation system that involves exploring a map, the perfect solution is to have a stylised image. In this particular case the map is created like an illustration with a monochromatic colour scheme. This allows for the links to stand out against the background. It’s also worth noting that the links have all been placed towards the centre so the user doesn’t have to develop a repetitive strain injury in order to find the actual content!

#2 - TECHNIQUE: Draggable areas with JavaScript

STEP 1: Get The Library

There are a number of JavaScript libraries that offer the ability to create draggable content within a div area. The simplest that we found can be downloaded from www.switchonthecode.com/tutorials/javascripttutorial-draggable-view-in-a-container, but feel free to shop around for one that works best for you. Once downloaded link to it in the head section of the JavaScript with the code shown below.

CODE:

<script type="text/javascript" src="SOTC-Draggable_View_Example.js">

</script>

STEP 2: Let's Create The Draggable Content

Here we create a div that will have a 1-pixel solid black line around the edge of the div area. In this case, the div is set to be 1,000 pixels wide by 600 pixels high – however, you can change the size of this div tag to whatever scale is necessary for your content. Notice how the overflow is hidden because the image needs to be masked by the div area.

CODE:

<div id="containerBox" style="position:relative; border:1px solid black;width:1000px;

height:600px; overflow:hidden;" >

Click and Drag: Clicking on the image allows it to be panned around by dragging with the mouse. This enables you to create interactive draggable content for your users similar to that found on the impressive Tao Community website.

STEP 3: Add An Image

Now we add this image inside the ‘containerBox’ div tag. Note that we have to use an image which is larger than the div area, otherwise it won’t be able to be dragged around when it’s clicked on. As you can see in the code, we’ve used an image here which is more than double the width and height of the div tag; this suits our purposes down to the ground.

CODE:

<img id="draggableElement" src="images/largepicture.jpg"

style="width:2530px; height:1688px; position:absolute;

top:-333px;left:-500px; cursor:move;" />

</div>

STEP 4: Add The JavaScript

The following JavaScript code can be added to the body area of the document. Here we store the element to be dragged in the variable ‘el’. At this stage, we also get the parent node, which is the surrounding div area. Finally from this area, we store the left-hand edge of the div tag.

CODE:

<script type="text/javascript">

var el = document.getElementById('draggableElement');

var parent = el.parentNode;

var leftEdge = parent.clientWidth - el.clientWidth;

STEP 5: Wrap Up The Code

The next variable that we add takes the top edge position of the draggable area. The final line of code below just sets this up to be the draggable object. All the real power is done in the library that we linked back in step 1. All you need to do now is save the document and preview in your web browser to check everything is working as it should. And there you have it; now your users can click and drag to their hearts’ content!

CODE:

var topEdge = parent.clientHeight - el.clientHeight;

var dragObj = new dragObject(el, null, new Position(leftEdge, topEdge), new Position(0, 0));

</script>

#3 - TECHNIQUE: Create Line-Art Images

Without a doubt, one of the coolest parts of the Tao Community website is the amazing artwork of the city. This is a time-intensive job that can be achieved by tracing a photo using Photoshop.

STEP 1: On The Right Path…

In the Paths, panel add a new path and switch to the Pen tool. Click on the outside of the buildings to trace the edges. If you need to deselect a path to start a new one, switch to the Direct Selection tool and click on the document, then switch back.

STEP 1: On The Right Path…

STEP 2: Stroke and Fill

Back in the Paths panel, click on "path 1" and hit the second icon from the left at the bottom which will stroke the path with the paintbrush. Choose a light grey colour and start adding shading to various parts of the image to create a sense of depth.

STEP 2: Stroke and Fill

STEP 3: Add A New Layer

Create a new layer and use the Paint Bucket tool with a white foreground colour to fill the canvas with white. Next, add another layer and switch to the Brush tool. Choose a 2-pixel-sized brush and select black as the foreground colour.

STEP 3: Add A New Layer