CoffeeScript to create an interactive map of the world using SVG and Raphaël.js

map.js.coffee

class WorldMap
  constructor: ->
    @baseColor = '#f5f3e6' # set the base fill color of the vector shapes 
    @hoverColor = '#053a5a' # set hover color
    @R = Raphael('map', 960, 543) # create the canvas element #map and define dimensions
    # define default attributes for all paths
    @defaultAttr =
      fill: @baseColor
      'cursor': 'pointer'
      'stroke-opacity': 0.001
      'stroke-linejoin': 'bevel'
      'stroke-linecap': 'round'
      'stroke-width': 0
    @init()

  init: =>
    # initialize array (path data is loaded in separate file)
    worldRaphael = {}

    # draw region paths
    for region of world
      translate = world[region].translate
      worldRaphael[region] = @R.path(world[region].path)
        .attr(@defaultAttr)   # apply default transformations

    # allow user to interact with region paths
    for region of worldRaphael
      ((rg, region) =>
        worldRaphael[region].node.id = region
        rg[0].onmouseover = (e) =>
          rg.animate
            fill: @hoverColor, 200
        rg[0].onmouseout = (e) =>
          rg.animate
            fill: @baseColor, 200
        rg[0].onclick = (e) =>
          @goToURL(e)
      ) worldRaphael[region], region
      
  goToURL: ->
    window.location = 'locations/' + @regionName

$ ->
  new WorldMap