javiertoledo / spain-map

Mapa vectorial de España interactivo creado a partir de un mapa SVG y la librería RaphaëlJs.

Mapa interactivo de España

Mapa vectorial de España interactivo creado a partir de un mapa SVG y la librería RaphaëlJs.

Demo

Demo

Uso

El mapa está preparado para integrarlo en cualquier página web ya que está contenido en un único fichero JavaScript minificado: spain-map.min.js

El mapa depende de la librería RaphaëlJs

1. Carga raphaeljs y el script spain-map.js

<script type="text/javascript" src="some/path/raphael-min.js"></script>
<script type="text/javascript" src="some/path/spain-map.min.js"></script>

2. Crea una instancia de mapa. El mapa acepta los siguientes parámetros de configuración:

<script type="text/javascript">
    new SpainMap({
      id: 'map', //(Requerido) Elemento HTML en el que se renderizará el mapa
      width: 700, //(Requerido) Ancho del mapa
      height: 400, //(Requerido) Alto del mapa
      fillColor: "#eeeeee", // color de relleno del mapa
      strokeColor: "#bbbbbb", // color de las líneas de frontera
      strokeWidth: 0.7, // ancho de las líneas de frontera
      selectedColor: "#99eeee", // color de relleno de la provincia al pasar el ratón por encima
      animationDuration: 200, // Duración de la animación de salida
      onClick: function(province, mouseevent) {
        // Método que se ejecutará al hacer click sobre una provincia
      },
      onMouseOver: function(province, mouseevent) {
        // Método que se ejecutará al pasar el ratón sobre una provincia
      },
      onMouseOut: function(province, mouseevent) {
        // Método que se ejecutará al salir de una provincia
      }
    });
</script>

...

<div id="map"></div>

Fuentes

• Mapa SVG de España

• RaphaëlJs

• Obtuve tips muy útiles de las siguientes fuentes:

  • us-map-raphael
  • Marcin Dziewulski's Blog Post

Generación de Paths a partir del fichero SVG

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 > spain-map.coffee

Existen también servicios web que realizan conversiones a partir de SVGs más complejos como: Ready Set Raphael SVG2RaphaelJs

spain-map's Issues

Any chance there is a version of this with Portugal and Andorra added for a Peninsula map?

I'd love to have this with Portugal and Andorra also in the map. Do you know if there's any fork of this map that has them or did you think about it?

Thanks!