Raphael Scratch Map

This project is based on the tutorial by Andy Fitch from the Parallax web design agency based in Leeds, United Kingdom.

This tutorial draws vector graphics in the browser using scalable vector graphics (SVG) and a visual javascript framework called Raphael.

The first step is to prepare the SVG file of the United Kingdom. I used this map from Wikipedia, which was already an SVG file. Once the dimensions of the file have been set using a vector graphic editor (such as Adobe Illustrator), it can be saved using the extension ‘svg’.

The next step before the code is started is to convert the SVG into something that Raphael can read, as Rephael cannot parse SVG. A converter called ‘Ready Set Raphael’ is used to output javascript code which can be read by Raphael. The code output should look something like this:

var GBR2001 = rsr.path("M420.7 945.7l1 3.3 2.2 4.4 1.5 2 2.1 2 0.7 1.8 0 1.3-1 1.8-2.3 2.8-0.5 2.1 1.5 1.2 9.7 0 3-0.2 1.6-1.8 1.7-1.3 1.9-0.2 1.7 0.5 2 2.5 1 2.6 0 3-0.3 2.6-1 4.6-0.8 3.2-1.5 0.6-1 0.6 1 2.7-0.4 0.5-6.5 3.4-2.3 3.2-0.3 4.2 1.2 4.1-2.7 5.1 0 2.8-2.1 2.7-1.7-0.8-2-3.2-1.4-1-4.2-0.5-0.5 1.9-0.7 0.2-3.8-0.9-1.2 0.3-2.4 5.5-2.6 2.1-0.5 3.6-2.3 4-0.7 6-1.7 1.5-0.1 3.4-1.4 1.7-1.3 0.1-0.5-5.6-1.3 0-0.7 2.5-0.9 0.5 0-1.2 2.2-6 0.1-3.8 0-7.1-0.1-2.8-0.9-2.3-2-2.5-2.9-2.6-2.7-2.2-1.5-1.8-1.1-2.6-1.6-2.8-0.2-1.2 0.9-1.3 2.5 0.5 2.7 0 2.9 1.3 1.9 0 0.4-1.5 0-2.8-0.4-2.1-1-1.7-0.8-2.1 0.5-2 2.1-1.6 2.3-2.8 0.5-2.5 0.1-3.3-1.6-4.6-4.6-2-3.7-2.8-3.5-1.6-1.5-1.5 0.5-0.5 3.4-2.3 3-2.3 0.9-2.6 0-1.5-3.2-1.8-5.2 0-2.2-0.3-1.4-1.2 0.7-2.1 2.5-2.5 3.3-3.9 2.6-5.4 1.2-2.2 1.1 1.4 15.3 6.9 6.1 3.4 2.9 0.9 0.3-0.1z");
 GBR2001.attr({
     id: 'GBR2001',
     name: 'East Ayrshire',
     'stroke-width': '0',
     'stroke-opacity': '1',
     'fill': '#c0c0c0'
 }).data('id', 'GBR2001');

Next create a new Javascript file and put the code generated by ReadySetRaphael into it. This will be the main map code that will be loaded into the HTML file to display the map. At the top of the Javascript file put the following code:

var rsr = Raphael('map', '75%', '75%');
rsr.setViewBox(0, 0, 1000, 1870, true);

And the following code in the HTML:

    <div id="map" class="united-kingdom">
    </div>

Dont forget to set the CSS so the map is visible:

#map {
    height: 100%;
    position: absolute;
}

Where ‘rsr’ is the container for the map and the function ‘setViewBox’ is used to scale the map using the dimensions that you selected when editing the SVG file in your vector graphic program of choice. Getting the SVG in the correct position can be a bit tricky. The Raphael documentation has a handy description of what setViewBox does. The parameters are (x, y, w, h, fit) where x is ‘new x position’ (defaults to zero), where y is ‘new y position’ (defaults to zero) and w, h are width and height respectively, which should be set to the size of the SVG created. Then instead of setting pixel values in the Raphael properties, a percentage is used. The reason setViewBox is used instead of just setting the size in the Raphael properties like Andy Fitch did was to make the map responsive on screen size change, which is vital for mobile devices.

Next each region is added to a group using one of two methods. 1.) Adding each region to an object array manually like so:

var allCountiesArray = [GBR2001, GBR2002, GBR2003, GBR2004, GBR2005, GBR2006, GBR2007, GBR2008, GBR2009, GBR2010, GBR2011, GBR2012, GBR2013, GBR2014, GBR2015, GBR2016, GBR2017, GBR2018, GBR2019, GBR2020, GBR2021, GBR2022, GBR2023, GBR2024, GBR2025, GBR2026, GBR2028, GBR2029, GBR2030, GBR2031, GBR2032, GBR2033, GBR2034, GBR2035, GBR2036, GBR2038, GBR2039, GBR2040, GBR2042, GBR2043, GBR2044, GBR2045, GBR2046, GBR2047, GBR2048, GBR2050, GBR2051, GBR2052, GBR2053, GBR2054, GBR2055, GBR2056, GBR2057, GBR2058, GBR2059, GBR2060, GBR2061, GBR2062, GBR2063, GBR2064, GBR2065, GBR2066, GBR2067, GBR2068, GBR2069, GBR2070, GBR2071, GBR2072, GBR2073, GBR2074, GBR2075, GBR2076, GBR2077, GBR2078, GBR2079, GBR2080, GBR2081, GBR2082, GBR2083, GBR2084, GBR2085, GBR2086, GBR2087, GBR2088, GBR2089, GBR2090, GBR2091, GBR2092, GBR2093, GBR2094, GBR2095, GBR2096, GBR2097, GBR2098, GBR2099, GBR2100, GBR2101, GBR2102, GBR2103, GBR2104, GBR2105, GBR2106, GBR2108, GBR2110, GBR2111, GBR2112, GBR2113, GBR2114, GBR2115, GBR2116, GBR2117, GBR2118, GBR2119, GBR2120, GBR2121, GBR2122, GBR2123, GBR2124, GBR2125, GBR2126, GBR2127, GBR2128, GBR2129, GBR2130, GBR2131, GBR2132, GBR2133, GBR2134, GBR2135, GBR2136, GBR2137, GBR2138, GBR2139, GBR2140, GBR2141, GBR2142, GBR2317, GBR2318, GBR2319, GBR2674, GBR2675, GBR2676, GBR2677, GBR2678, GBR2679, GBR2744, GBR2745, GBR2746, GBR2747, GBR2748, GBR2749, GBR2750, GBR2751, GBR2752, GBR2753, GBR2754, GBR2755, GBR2756, GBR2757, GBR2758, GBR2759, GBR2760, GBR2761, GBR2762, GBR2763, GBR2764, GBR2765, GBR2766, GBR2767, GBR2768, GBR2769, GBR2770, GBR2771, GBR2772, GBR2773, GBR2774, GBR2775, GBR2776, GBR2777, GBR2778, GBR2779, GBR3409, GBR4809, GBR5661, GBR5662, GBR5663, GBR5664, GBR5665, GBR5666, GBR5667, GBR5668, GBR5669, GBR5670, GBR5671, GBR5672, GBR5673, GBR5674, GBR5675, GBR5676, GBR5677, GBR5678, GBR5679, GBR5680, GBR5681, GBR5682, GBR5683, GBR5684, GBR5685, GBR5686, GBR5687, GBR5688, GBR5689, GBR5690, GBR5691, GBR5692, GBR5693, GBR5694, GBR5695, GBR5696, GBR5697, GBR5698, GBR5699, GBR5700, GBR5701, GBR5702, GBR5703, GBR5704, GBR5705, GBR5706, GBR5707, GBR5708, GBR5988];

Or doing the addition to the array in the Raphael code as you go along editing it using the javascript push function

var allCountiesArray = []; // put this at the top of the code
allCountiesArray.push(GBR2001); // put this at the bottom of each county 
allCountiesArray = [GBR2001] // what allCountiesArray should look like after each push.

Next I wanted to colour each county that I had visted, much like the popular ‘scratch maps’ that you hang on your wall and scratch off each place you have visted. To do this, first a list of county codes to the counties was needed, which I cannot seem to find, so I have uploaded the codes to a gist on github here

Once you have figured out which counties you have visted or whichever you want to colour a Javascript loop is created to colour each county like so:

for (var i = 0; i < allCountiesArray.length; i++){
    if (allCountiesArray[i].data('id') == 'GBR2004'){
        allCountiesArray[i].node.setAttribute('fill', 'gold');
    } else if (allCountiesArray[i].data('id') == 'GBR2023'){
        allCountiesArray[i].node.setAttribute('fill', '#ffba06');
    } else if (allCountiesArray[i].data('id') == 'GBR2043'){
        allCountiesArray[i].node.setAttribute('fill', '#ff1b00');
    } else if (allCountiesArray[i].data('id') == 'GBR2048'){
        allCountiesArray[i].node.setAttribute('fill', '#ff6102');
    } else if (allCountiesArray[i].data('id') == 'GBR2054'){
        allCountiesArray[i].node.setAttribute('fill', '#c6ff04');
    }
    console.log(allCountiesArray[i].data('id'));

};

What this code does is:
Loop through the ‘allCountiesArray’ using a for loop:

for (var i = 0; i < allCountiesArray.length; i++){}

Then using a combination of ‘if’ and ‘else’ the for loop is used to change the fill colour of each county like so:

    {
    if (allCountiesArray[i].data('id') == 'GBR2004'){  // the loop is used to find a certain county 
        allCountiesArray[i].node.setAttribute('fill', 'gold'); // the fill colour is set 
    } else if (allCountiesArray[i].data('id') == 'GBR2023'){  // note the if then the else if
        allCountiesArray[i].node.setAttribute('fill', '#ffba06');
    }

Finally the HTML document should be set up like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Raphael Scratch Map</title>
    <link rel="stylesheet" href="../css/raphael.css">
</head>
<body>
    <div id="map" class="united-kingdom">
    <!-- Raphaël JS Map Here -->
    </div>
    <script src="../js/raphael.js"></script>
    <script src="../js/ukMap.js"></script>
</body>
</html>