Raphael Map Demo

by Brodingo

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js"></script>
<div id="canvas"> 
    <div id="paper"></div> 
    <div id="nsw"> 
        <h2>New South Wales</h2> 
        <p> 
            New South Wales (abbreviated as NSW) is Australia’s oldest and most populous state, located in the south-east of the
            country, north of Victoria and south of Queensland. It was founded in 1788 and originally comprised much of the
            Australian mainland, as well as Lord Howe Island and Norfolk Island. New Zealand was not initially part of the colony,
            although when Britain annexed New Zealand in 1840 it was briefly a part of New South Wales. During the 19th century
            large areas were successively separated to form the British colonies of Tasmania, South Australia, Victoria,
            Queensland, and New Zealand.
        </p> 
    </div> 
    <div id="vic"> 
        <h2>Victoria</h2> 
        <p> 
            Victoria is a state located in the south-eastern corner of Australia. It is the smallest mainland state in area but
            the most densely populated and urbanised. Prior to European settlement, some 30,000 Indigenous Australians lived in
            the area now occupied by the state. By contrast, over five million people now inhabit the region. European settlement
            in Victoria began in the 1830s as a farming community. Victoria is the second most populous Australian state, after New South Wales, with
            an estimated population of 5,205,200 as of June 2007. Melbourne is Victoria’s capital and largest city, with more
            than 70% of all Victorians living there.
        </p> 
    </div> 
    <div id="wa"> 
        <h2>Western Australia</h2> 
        <p> 
            Western Australia is a state occupying the entire western third of the Australian continent. The nation’s largest
            state and the second largest sub-national entity in the world, it has 2.1 million...

CSS

body {
    background: #333;
    color: #fff;
    font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
}

#holder {
    height: 480px;
    left: 50%;
    margin: -240px 0 0 -320px;
    position: absolute;
    top: 50%;
    width: 640px;
}
#copy {
    bottom: 0;
    font: 300 .7em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
    position: absolute;
    right: 1em;
    text-align: right;
}
#copy a {
    color: #fff;
}

#canvas {
    height: 300px;
    left: 50%;
    margin: -150px 0 0 -300px;
    position: absolute;
    top: 50%;
    width: 600px;
}
#paper {
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width: 300px;
}
#nsw, #vic, #wa, #sa, #nt, #qld, #tas {
    display: none;
    height: 400px;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
}
h2 {
    text-align: center;
}

JavaScript

window.onload = function() {
    var R = Raphael("paper", 300, 300);
    var attr = {
        fill: "#333",
        stroke: "#666",
        "stroke-width": 1,
        "stroke-linejoin": "round"
    };
    var aus = {};
    aus.vic = R.path("M252.869,203.121l-0.873-0.643l-1.721-0.121l-8.182-4.065l0.178-1.349l-0.354-1.082l-0.722-1.028l-0.566-1.235l0.204-1.168l-1.433-0.73l-0.899,0.326l-0.711,0.295l-0.74,0.111l-1.083,0.354l-1.451,0.408l-1.961-0.461l-1.037-0.603l-0.896,0.327l-0.658,0.666l-1.164-0.204l-1.223-0.571l-0.925,0.139l-1.434-0.729l-1.85,0.28l-0.823-0.444l-0.741,0.11l-0.471,0.638l0.223,1.481l-1.295,0.195l-1.619-0.701l-1.277-0.943l-0.379-1.268l-1.973-1.783l-1.619-0.701l-1.138-0.018l-1.444-2.054l-0.604-2.748l-1.008-0.413l-1.721-0.119l-0.98-0.232l-1.055,0.539l-0.045,0.953l-1.092-0.971l-0.492-2.009l-1.73-1.44l-2.12-0.248l-1.748-0.305l-1.024,0.723l-1.834-0.86l-1.109,0.168l-0.08,0.038v28.152l0.436,0.031l2.342,1.916v1.065l0.64-0.214l0.638,0.427l1.278-1.491l2.556,1.278l1.703-0.427l7.881,4.261l3.193-3.195l2.557-1.704h1.49l0.428-1.275l-1.492,0.425l-0.853-0.64h1.063l2.771-2.129l1.277,2.555l-1.277,1.703l-1.917-0.424l1.917,1.702l1.277-0.852l0.64,0.213l0.211-1.703h1.492l0.426,1.276l-0.852,0.214l-0.215,1.276l1.49,1.065l1.491-0.213l0.214,0.426l-0.639-0.213l1.064,1.916l0.851-0.64l0.853,0.427l-0.213-0.64l0.854,1.705l1.064,1.063l0.426-2.769l-1.277,0.852l-0.426-1.703h2.13l2.526-0.843l4.074-4.269l2.768-1.703l-3.406,1.489l1.917-1.278l-0.071-0.07l-0.568-0.567l1.492,0.427l1.703-0.64l-0.213,0.427l9.371-0.853l1.915-1.703l-0.638-0.64H252.869z").attr(attr);
    aus.nsw =...