Commit inicial: Mapa interactivo de España en JS

javiertoledo · Sep 10, 2012 · 507e010 · 507e010
commit 507e010
Show file tree

Hide file tree

Showing 10 changed files with 4,649 additions and 0 deletions.
diff --git a/Cakefile b/Cakefile
@@ -0,0 +1,18 @@
+fs = require 'fs'
+
+{print} = require 'util'
+{exec} = require 'child_process'
+
+includes = "src/spain-map.coffee src/main.coffee"
+
+build = (callback) ->
+  coffee = exec "coffee -j interactive-spain-map.js -o lib -c #{includes}"
+  coffee.stderr.on 'data', (data) ->
+    process.stderr.write data.toString()
+  coffee.stdout.on 'data', (data) ->
+    print data.toString()
+  coffee.on 'exit', (code) ->
+    callback?() if code is 0
+
+task 'build', 'Build lib/ from src/', ->
+  build()
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,22 @@
+Copyright (c) 2012 Javier Toledo
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,46 @@
+# Mapa interactivo de España
+Mapa vectorial creado a partir de un fichero SVG de WikiMedia Commons y la librería RaphaëlJs para el renderizado y el manejo de eventos.
+
+## Uso
+
+El mapa está preparado para integrarlo en cualquier página web ya que está contenido en un único fichero JavaScript: interactive-spain-map.js
+
+1. Carga el código del mapa
+
+  ```
+  <script type="text/javascript" src="some/path/interactive-spain-map.js"></script>
+  ```
+
+2. Crea una instancia de mapa sobre el elemento HTML de tu elección a partir de su ID
+
+  ```
+  <script type="text/javascript">
+      new SpainMap('#map');
+  </script>
+  ```
+
+  ...
+
+  ```
+  <div id="map"></div>
+  ```
+
+## Fuentes
+- [Mapa SVG de España](http://commons.wikimedia.org/wiki/File:Andaluc%C3%ADa_Oriental_con_M%C3%A1laga.svg)
+
+- [RaphaëlJs](http://raphaeljs.com)
+
+- Obtuve pistas muy útiles de:
+
+  - [us-map-raphael](https://github.com/robflaherty/us-map-raphael)
+  - [Marcin Dziewulski's Blog Post](http://playground.mobily.pl/tutorials/building-an-interactive-map-with-raphael.html)
+
+## Extra
+He creado un pequeño script ruby que procesa el mapa SVG para generar los paths de entrada de Raphaël. Es posible que funcione también con otros mapas que no estén agrupados, así que podría ser una buena base para desarrollar mapas de otras regiones.
+
+El script se encuentra en `/utils/jsonify.rb` y su uso sería el siguiente presuponiendo que exista un fichero con nombre `input.svg` en el mismo directorio:
+
+```
+cd utils
+ruby jsonize.rb > ../src/spain-map.coffee
+```
diff --git a/demo.html b/demo.html
@@ -0,0 +1,30 @@
+<html>
+<head>
+  <title>Interactive Spain Map - Demo</title>
+  <script type="text/javascript" src="lib/raphael-min.js"></script>
+  <script type="text/javascript" src="lib/interactive-spain-map.js"></script>
+  <style type="text/css">
+    body {
+      background: #fff;
+      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      text-align: center;
+    }
+    h1 {
+      color: #555;
+      font-size: 20px;
+    }
+    img {
+      border: none;
+    }
+  </style>
+</head>
+<body>
+  <h1>Mapa interactivo de España</h1>
+  <a href="http://theagilemonkeys.com" title="Desarrollo de aplicaciones para web y dispositivos móviles">
+    <img src="http://theagilemonkeys.com/assets/highlights/logolight-a0469cb5d834613622ccfaa81237b42d.png" alt="The Agile Monkeys" width="210" height="48"/>
+  </a>
+  <div id="map"></div>
+  <script type="text/javascript">
+    new SpainMap('#map',800,500);
+  </script>
+</body>
diff --git a/lib/interactive-spain-map.js b/lib/interactive-spain-map.js
diff --git a/lib/raphael-min.js b/lib/raphael-min.js
diff --git a/src/main.coffee b/src/main.coffee
@@ -0,0 +1,41 @@
+# Defined on window scope to be available from outside
+class window.SpainMap
+  constructor: (id, w, h)->
+    R = Raphael(id.split('#')[1], w, h)
+    attr =
+      "fill": "#d3d3d3"
+      "stroke": "#fff"
+      "stroke-opacity": "1"
+      "stroke-linejoin": "round"
+      "stroke-miterlimit": "4"
+      "stroke-width": "0.75"
+      "stroke-dasharray": "none"
+    usRaphael = {}
+
+    # Draw Map and store Raphael paths
+    for code, path of spainMap
+      usRaphael[code] = R.path(path).attr(attr);
+
+
+    # Do Work on Map
+    for code, path of usRaphael
+      path.color = Raphael.getColor();
+
+      processState = (st, state) ->
+
+        st[0].style.cursor = "pointer"
+
+        st[0].onmouseover = ->
+          st.animate {fill: st.color}, 500
+          st.toFront()
+          R.safari()
+
+        st[0].onmouseout = ->
+          st.animate {fill: "#d3d3d3"}, 500
+          st.toFront()
+          R.safari()
+
+        st[0].onclick = ->
+          alert("Has pulsado sobre #{state.substr(3).replace('_',' ')}!")
+
+      processState(path, code)