Tutorial – Creating an Interactive SVG map – Blog – Parallax

Over the past few years there's been an increasing demand from our clients for interactive maps, whether it be for shopping centres, housing developments or just geographical maps. Most recently, I was tasked with creating a masterplan (architectural, not the evil villain kind) for Little Kelham, a property development at Kelham Island in Sheffield built by Citu. They needed two versions of the masterplan: a map to highlight the residential properties they have available, and a map for their commercial properties. Each plot needed to have its own well defined shape and have a hover state & click events. In this tutorial we're going to be drawing vector graphics in the browser using a combination of SVG (Scalable Vector Graphics) and an excellent JavaScript framework called Raphaël to create a map of the United Kingdom. SVG is supported in most browsers except IE8 and below. Raphaël makes drawing vector art easy and, more crucially, cross-browser compatible. It currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+. The United Kingdom is made up of England, Scotland, Wales, Northern Ireland and a fairly exhaustive list of thousands of smaller islands. For the purpose of this tutorial we're just going to focus on England, and in particular its regions. We've split England up into nine regions: the North West, North East, Yorkshire & Humber, West Midlands, Midlands, East Anglia, Greater London, the South East and the West Country. You'll need an SVG image to start with. I used this United Kingdom - Region 3.svg file from Wikipedia. Later, when we use Raphaël, it'll ask us for dimensions for our map. I'd recommend you create a new artboard in Adobe Illustrator at your preferred dimensions, then scale your vector objects to fit. Use File ->, Save As... to save your map as .svg, after which you'll be presented with the SVG Options dialog. Click on the 'SVG Code...' button, which will allow you to save your image out to SVG in XML format. In my example, I saved this file as 'map_england.svg'. Your .svg file will be full of <,path>, (and possibly <,rect>,, <,circle>, etc. if you have some perfectly shaped objects) tags, each with a 'd' attribute containing path data. Raphaël doesn't consume SVG data, it just uses the path data, so we'll use a SVG to Raphaël converter (I use http://readysetraphael.com/) to output our Raphaël JavaScript code. @dalehay tweeted me asking if I knew any alternatives to readysetraphael.com as he had trouble with larger pieces of SVG code. He found http://toki-woki.net/p/SVG2RaphaelJS/, which may be of use to you. Thanks @dalehay! Paste the JavaScript code into an empty file and save it to an appropriate place, such as your website's js directory. I've called mine 'map.js'. At this point your JavaScript will look like spaghetti so, although it's not entirely necessary, I'd advise you untangle & tidy it up at this stage to clarify things going forward (for other developers as well as yourself!) You'll now be left with a really nice section of JavaScript code, which is really understandable and less bloated. If, like on the Little Kelham properties map, you have a *lot* of objects, then it's really useful to be familiar with regular expressions as you can much more easily find & replace sections of code. Just be careful when using mass find & replace as debugging missing parts of code can be a bit of a nightmare when handling hundreds of objects! As we kept the data ID on each of our paths earlier, we can now style our objects. I've used a bit of JavaScript to iterate over the regions array, then modify the fill colour if we've found the Yorkshire path: The only HTML you'll need (other than the rest of your website's markup) is the element where you'd like your interactive map to appear, and the references to the Raphaël script and your JavaScript file containing your custom Raphaël code. In the example below I've added a class to the map's container so that I could add a background image to show the other parts of the United Kingdom (the translucent bits) to provide some context. Because everyone loves a show-off let's add a bit more JavaScript make the name of the region appear below the map whenever we hover over the regions. Note: I added another data attribute to each path, called 'region', to attach a human-readable name. To use more than one attribute, you must pass it as an object using curly braces: We add a bit more JavaScript to attach mouseover and mouseout events to each path, and our map is complete! A reader emailed me asking for help adding a popup next to the clicked region, so here's the code I wrote to help him out (note it now uses jQuery): Source.

Яндекс.Метрика Рейтинг@Mail.ru Free Web Counter
page counter
Last Modified: April 23, 2016 @ 11:04 pm