Crear mapas HTML5 interactivos con RaphaelJS

10 octubre, 2014 Author: Gaspar Fernández

Vivimos en pleno auge del HTML5 y es que con esta tecnología se pueden hacer cosas muy interesantes, de forma muy rápida, elegante y multiplataforma sin necesidad de recurrir a herramientas de terceros como Flash, y eso está muy bien. Personalmente nunca me gustó Flash, así que, tenemos muchas cosas chulas por hacer.

Hace unos días, para un pequeño proyecto surgió la idea de crear un mapa interactivo de municipios, la idea está bien y hay mucho trabajo que hacer. Pero por un lado, tenemos cierta información ya disponible, por ejemplo los mapas y los nombres de los municipios los podemos encontrar por Internet fácilmente. Los mapas los podemos encontrar por ejemplo en esta web. En realidad es una recopilación de mapas de la Wikipedia (he copiado la recopilación aquí, por si la web citada deja de funcionar.)

En este pequeño tutorial voy a hacer un mapa interactivo de los municipios de Málaga en el que se podrá pasar el ratón por encima de los municipios y hacer click en cada uno de ellos.

Para facilitarme la vida he utilizado la biblioteca Javascript RaphaëlJS, con la que puedo dibujar trayectorias SVG de forma muy fácil y además como cada trayectoria será un objeto podré asignarles eventos a través de jQuery. Se va a quedar muy chulo.

De todas formas, para este tutorial utilizaré este mapa de municipios de Málaga, sacado de la Wikipedia, hecha por Emilio Gómez Fernández:

Tabla de contenidos

1 Iniciándonos con RaphaelJS
2 Efecto hover
3 Creando un mapa
4 También podría interesarte....

Iniciándonos con RaphaelJS

La gracia está en que el formato en el que maneja RaphaelJS las trayectorias es el mismo que se usa para los archivos SVG. Al final los archivos SGV son archivos XML con información sobre las trayectorias y estilos dentro.

Para hacer algo sencillo con RaphaelJS vamos a crear un archivo HTML extremadamente sencillo, con lo siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ejemplo Raphaeljs</title>
<script type="text/javascript" src="raphael-min.js"></script>
</head>

<body>
<h1>Ejemplo Raphaeljs</h1>
<hr />
<div id="lienzo">
</div>
<script>
var rjs = Raphael('lienzo', 600, 400);

rjs.path('m 95.725713,145.10504 0,-11.088 9.359997,0 0,-9.36 39.456,0 0,9.36 9.504,0 0,19.008 9.504,0 0,39.456 -9.504,0 0,9.36 -20.304,0 0,-10.8 9.216,0 0,-36.576 -9.36,0 0,-9.36 -7.92,0 0,94.896 -9.504,0 0,9.36 -11.088,0 0,-104.256 -9.359997,0');
rjs.path('m 172.59086,293.9256 0,-94.896 -9.36,0 0,-11.088 9.36,0 0,-9.36 39.456,0 0,9.36 9.504,0 0,19.008 9.504,0 0,29.952 -9.36,0 0,8.064 9.36,0 0,39.456 -9.504,0 0,9.504 -9.504,0 0,9.36 -29.952,0 0,-9.36 -9.504,0 m 20.592,-11.088 17.28,0 0,-36.432 -9.216,0 0,-10.944 9.216,0 0,-27.072 -9.36,0 0,-9.36 -7.92,0 0,83.808');

</script>
</body>
</html>

Las dos trayectorias utilizadas, incluidas en rjs.path() están sacadas de un SVG y el resultado sería algo así:

Efecto hover

Vamos a añadir un efecto a cada uno de los paths o trayectorias del ejemplo anterior. Por ahora, todo sigue muy artesano, pero nos da una pista de cómo podemos aplicar el efecto a cada uno de los elementos del mapa:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ejemplo Raphaeljs</title>
<script type="text/javascript" src="raphael-min.js"></script>
</head>

<body>
<h1>Ejemplo Raphaeljs</h1>
<hr />
<div id="lienzo">
</div>
<script>
var default_attributes = {
fill: '#abcabc',
stroke: '#000000',
'stroke-width': 4,
};
var rjs = Raphael('lienzo', 600, 400);

var p1 = rjs.path('m 95.725713,145.10504 0,-11.088 9.359997,0 0,-9.36 39.456,0 0,9.36 9.504,0 0,19.008 9.504,0 0,39.456 -9.504,0 0,9.36 -20.304,0 0,-10.8 9.216,0 0,-36.576 -9.36,0 0,-9.36 -7.92,0 0,94.896 -9.504,0 0,9.36 -11.088,0 0,-104.256 -9.359997,0');
p1.attr(default_attributes);
p1.hover(function() {
this.animate({
fill: '#00bbff'
}, 100);
p1[0].style.cursor = 'crosshair';
},
function() {
this.animate({
fill: default_attributes.fill
}, 100);
}).click(function() {
alert("click en la P");
});;
var p2 = rjs.path('m 172.59086,293.9256 0,-94.896 -9.36,0 0,-11.088 9.36,0 0,-9.36 39.456,0 0,9.36 9.504,0 0,19.008 9.504,0 0,29.952 -9.36,0 0,8.064 9.36,0 0,39.456 -9.504,0 0,9.504 -9.504,0 0,9.36 -29.952,0 0,-9.36 -9.504,0 m 20.592,-11.088 17.28,0 0,-36.432 -9.216,0 0,-10.944 9.216,0 0,-27.072 -9.36,0 0,-9.36 -7.92,0 0,83.808');
p2.attr(default_attributes);
p2.hover(function() {
this.animate({
fill: '#ffbb00'
}, 100);
p2[0].style.cursor = 'wait';
},
function() {
this.animate({
fill: default_attributes.fill
}, 100);
}).click(function() {
alert("click en la B");
});;

</script>
</body>
</html>

El resultado es algo así:

Creando un mapa

En este ejemplo ya estamos cambiando cursores y colores. Ahora bien, hacer todo esto con tantas trayectorias puedes ser un poco más complicado, podemos hacerlo de varias formas. Algunas de ellas implican un poco de programación en el servidor (aunque no voy a entrar ahí hoy), lo que sí deberíamos hacer es establecer una correspondencia entre los identificadores de las trayectorias que encontramos en el SVG (sólo tenemos que abrirlo) con los nombres o la identificación de los elementos del mapa. Para lo cual, podríamos utilizar una base de datos.

Tenemos que tener en cuenta que si abrimos el archivo SVG con un programa y lo guardamos de nuevo, puede que algunos IDs cambien por lo que podremos perder información.

Hemos visto en la imagen de ejemplo, que el SVG tiene los nombres escritos (lamentáblemente, si abrimos este SVG, no encontramos el texto del nombre, sino las trayectorias que forman cada letra, por lo que sería muy complicado establecer las correspondencias automáticamente). De todas formas, los textos no nos hacen falta ahora mismo, por lo que los voy a eliminar (desde Javascript). En principio, vamos a mostrar el id de las trayectorias, por lo que no haremos correspondencias entre trayectoriasnombres.

En este ejemplo, he utilizado jQuery para hacer una descarga ajax del archivo SVG y cargarlo, así como buscar dentro de la estructura XML del SVG y escribir el nombre del ID:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

Para finalizar, vamos a hacer corresponder algunos ID de trayectoria con el municipio que representan (muy parecido al anterior):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ejemplo Raphaeljs</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="raphael-min.js"></script>
</head>

<body>
<h1>Ejemplo Raphaeljs</h1>
<hr />
<div id="municipiotxt">Selecciona un municipio</div>
<div id="lienzo">
<img id="loadingicon" src="loading.gif" />
</div>
<script>
var municipios_data = {'path2643': 'Cuevas de San Marcos',
'path2647': 'Alameda',
'path2651': 'Cuevas Hajas',
'path2655': 'Villanueva de Algaidas',
'path2659': 'Antequera',
'path2667': 'Villanueva de Tapia',
'path2671': 'Sierra de Yeguas',
'path2675': 'Mollina',
'path2679': 'Humilladero',
'path2683': 'Fuente de Piedra',
'path2687': 'Archidona',
'path2691': 'Campillos',
'path2695': 'Villanueva del Trabuco',
'path2699': 'Almargen',
'path2703': 'Teba',
'path2707': 'Villanueva del Rosario',
'path2711': 'Cañete la Real',
'path2715': 'Alfarnate',
'path2719': 'Alfarnatejo',
'path2723': 'Colmenar',
'path2727': 'Periana',
'path2731': 'Riogordo',
'path2735': 'Valle de Abdalajis',
'path2739': 'Alcaucín',
'path2743': 'Ardales',
'path2747': 'Álora',
'path2751': 'Ronda',
'path2763': 'Cuevas del Becerro',
'path2775': 'Canillas de Aceituno',
'path2779': 'Sedella',
'path2787': 'Viñuela',
'path2795': 'Málaga',
'path2799': 'El Burgo',
'path2803': 'Canillas de Albaida',
'path2807': 'Salares',
'path2811': 'Comares',
'path2819': 'Carratraca',
'path2823': 'Cómpeta',
'path2827': 'Casarabonela',
'path2831': 'Vélez-Málaga',
'path2839': 'Frigiliana',
'path2843': 'Nerja',
'path2859': 'Arriate',
'path2867': 'Cártama',
'path2871': 'Torrox',
'path2875': 'Pizarra',
'path2899': 'Algarrobo',
'path2903': 'Yunquera',
'path2907': 'Montejaque',
'path2911': 'Totalán',
'path2915': 'Alozaina',
'path2927': 'Coín',
'path2931': 'Benaoján',
'path2935': 'Rincón de la Victoria',
'path2939': 'Tolox',
'path2943': 'Alhaurín de la Torre',
'path2947': 'Guaro',
'path2951': 'Alpandeite',
'path2955': 'Alhaurín el Grande',
'path2959': 'Parauta',
'path2967': 'Jimera de Líbar',
'path2971': 'Cortes de la Frontera',
'path2975': 'Júzcar',
'path2979': 'Atajate',
'path2983': 'Igualeja',
'path2987': 'Istán',
'path2991': 'Monda',
'path2995': 'Faraján',
'path2999': 'Torremolinos',
'path3003': 'Benahavís',
'path3007': 'Benadalid',
'path3011': 'Pujarra',
'path3015': 'Mijas',
'path3019': 'Benalmádena',
'path3023': 'Benalauría',
'path3027': 'Ojén',
'path3031': 'Jubrique',
'path3035': 'Algatocín',
'path3039': 'Fuengirola',
'path3043': 'Benarrabá',
'path3047': 'Genalguacíl',
'path3051': 'Gaucín',
'path3055': 'Marbella',
'path3059': 'Estepona',
'path3063': 'Casares',
'path3067': 'Manilva'};

var default_attributes = {
fill: '#abcabc',
stroke: '#000000',
'stroke-width': 1,
};
var $munictxt = $('#municipiotxt');

$.ajax({
url: 'Malaga_municipios.svg',
type: 'GET',
dataType: 'xml',
success: function(xml) {
var rjs = Raphael('lienzo', 700, 400);
var corr="";
$(xml).find('svg > g > g > path').each(function() {
var path = $(this).attr('d');
var pid = $(this).attr('id');
var munic = rjs.path(path);

munic.attr(default_attributes);
munic.hover(function() {
this.animate({ fill: '#00bbff' });
var text = "Municipio: ";
if (typeof(municipios_data[pid])!='undefined')
text+=municipios_data[pid];
else
text+="Sin nombre";
text+="("+$(this).attr('id')+")";

$munictxt.html(text);
}, function() {
this.animate({ fill: default_attributes.fill });
$munictxt.html("Selecciona un municipio");
}). click(function() {
alert("Click sobre un municipio. ID = "+$(this).attr('id'));
});
});
$('#loadingicon').hide();
}
});

</script>
</body>
</html>

El resultado de todo esto será:

Selecciona municipio

Otra opción, sería almacenar las trayectorias individualmente en base de datos con los datos asociados que queramos almacenar (población, usuarios de esas zonas, enlaces y más), descargarlo por AJAX cuando se genera la página o devolver las trayectorias y los datos adicionales junto con el HTML de la página.

Actualización 15/07/2016: Cambio de la web oficial de RaphaelJs, el dominio que había antes dejó de funcionar. Ahora enlazo al GitHub. Gracias Dann!

También podría interesarte....

Tags : ajax , antequera , imagen , interactivo , Javascript , malaga , mapa , marbella , municipios , población , raphael , raphaeljs , ronda , svg , vectorial , villanueva , wikipedia , xml

URL for this post : https://poesiabinaria.net/2014/10/crear-mapas-html5-interactivos-con-raphaeljs/

There are 45 comments left Ir a comentario

GustavoMG / 23 enero, 2015 at 21:13
Usando Mozilla Firefox 35.0 en Windows 7
Hola, Muy buen post! Disculpa los archivos del jquery.min.js no pusiste un enlace para descargar.
Saludos y gracias
Reply
1. Gaspar Fernández / Post Author26 enero, 2015 at 10:43
  Usando Google Chrome 39.0.2166.2 en Linux
  Para descargar jquery puedes ir a: http://jquery.com/download/
  Muchas gracias por tu comentario
  Reply
Emilio / 15 julio, 2015 at 13:11
Usando Google Chrome 43.0.2357.134 en Windows XP
He implementado el ejemplo en un servidor IIS 7.0, añadiendo el tipo SVG, pero no me muestra el mapa. En cambio, las letras si las muestra. ¿Que puede estar pasando?
Muchas Gracias!
Reply
1. Gaspar Fernández / Post Author15 julio, 2015 at 19:57
  Usando Mozilla Firefox 39.0 en Ubuntu Linux
  ¿El fichero del mapa se encuentra accesible? Es decir, directamente desde el navegador podrías descargarte el mapa en la ruta que le especificamos a jquery ?
  Reply
  1. Emilio / 16 julio, 2015 at 9:48
    Usando Google Chrome 43.0.2357.134 en Windows XP
    Si, está disponible la ruta de la imagen. Al final conseguí arreglarlo, cambié en la funcion find la ruta de busqueda del path.
    $(xml).find(‘svg > g > g > path’).each(function() { …}
    por este
    $(xml).find(‘svg > g > path’).each(function() { …}
    y ya me lo muestra, lo que si es que no reconoce el nombre de los municipios que están dentro de la imagen.
    Reply
    1. Gaspar Fernández / Post Author16 julio, 2015 at 17:40
      Usando Mozilla Firefox 39.0 en Ubuntu Linux
      Hola Emilio. Intenta visualizar los elementos dentro del $.each() con console.log() a ver si así te puede dar una pista de lo que pasa. A priori, creo que no te pilla bien los IDs de los elementos. Igual que tuviste que cambiar el path
      Reply
Fabian Hernandez / 8 septiembre, 2015 at 23:48
Usando Google Chrome 45.0.2454.85 en Windows 7
Hola realmente no se nada de sitios web o algo similar pero si de mapas y deseo con muchas ganas poder llegar a hacer algo asi por eso pongo mi consulta por mas tonta y básica que parezca xq realmente quiero aprender y espero alguien me ayude.
Abri una pagina de google normalmente y le di inspeccionar, luego ahi dentro borre la informacion que tenia en «elements» y copie lo que decia la ultima pagina de color negro.. pero en la parte de la izquierda donde se deberia visualizar mi avance solo dice «EJEMPLO RAPHAELJS» y «selecciona un municipio» pero no los graficos de distritos…. ahora bien descargue el archivo jquery.min.js pero la verdad no se donde utilizarlo.
Perdon ser basico en esto pero si tengo muchas ganas de aprender… asi que si alguien puede ayudarme le daria las gracias de antemano.
Saludos
Reply
1. Gaspar Fernández / Post Author16 septiembre, 2015 at 18:21
  Usando Mozilla Firefox 40.0 en Ubuntu Linux
  Hola Fabian,
  Intenta copiar el ejemplo tal cual, y crear un archivo html desde cero. Muchas veces cuando borramos cosas desde el inspector que no debemos y cuando hay scripts como este implicados es mucho más fácil cargarnos algo. Sobre todo porque bibliotecas como raphael.js generan contenidos, y no se van a dibujar cosas nuevas.
  Por eso, si creamos un archivo html desde cero (bájate jquery.min.js, raphael-min.js, inclúyelos como hago en el ejemplo) y carga el archivo html con el navegador a ver si así funciona. Dese ahí podrás modificar el html que has creado y recargar en el navegador las veces que quieras hasta conseguir el resultado deseado.
  Reply
luis / 23 febrero, 2016 at 23:29
Usando Google Chrome 48.0.2564.116 en Windows 8
No me carga la url: ‘La_Coruña.svg’, pegue el archivo La_Coruña.svg dentro de la carpeta de donde esta mi .html, pero no me carga.
Reply
1. Gaspar Fernández / Post Author24 febrero, 2016 at 7:18
  Usando Mozilla Firefox 44.0 en Ubuntu Linux
  Hola Luis,
  Tal vez tengas un problema de codificación, intenta llamarlo La_Coruna.svg a ver si le gusta. De todas formas, en general, intenta evitar los nombres de archivos con caracteres «raros» porque, aunque en tu máquina local funcione, tal vez al subirlo a un servidor puedas tener problemas, o incluso si haces migración entre servidores.
  Saludos!
  Reply
  1. luis / 24 febrero, 2016 at 15:23
    Usando Google Chrome 48.0.2564.116 en Windows 8
    Hola Gaspar gracias por la respuesta, pues ya lo llamé La_Coruna.svg pero sigue si funcionar. Tambien lo levante con apache tomcat, pero igual sigue sin funcionar, no se si hay alguna linea de codigo que tenga que modificar?
    Reply
alejandro / 21 marzo, 2016 at 19:51
Usando Google Chrome 49.0.2623.87 en Windows NT
hola quisiera si tu me puedes hacer un mapa de chile con esas caracteristicas y me dices cuanto me cobras. gracias
Reply
1. Gaspar Fernández / Post Author22 marzo, 2016 at 10:28
  Usando Mozilla Firefox 45.0 en Ubuntu Linux
  Si alguien que entre por aquí se anima os pongo en contacto. Yo por el momento no tengo mucho tiempo. Saludos!
  Reply
2. Anibal Contreras / 8 agosto, 2016 at 23:05
  Usando Google Chrome 51.0.2704.103 en Mac OS X 10.11.6
  Hola yo lo logré hacer con el mapa de chile dividido en regiones, por si te interesa aún escríbeme xxxxxxxxxxxxx
  Reply
  1. Gaspar Fernández / Post Author9 agosto, 2016 at 16:26
    Usando Mozilla Firefox 48.0 en Ubuntu Linux
    Hola Anibal !! Ya te mandé un mail (he editado tu comentario para que nadie lo vea)
    Reply
Dann / 13 julio, 2016 at 7:44
Usando Google Chrome 51.0.2704.103 en Windows 8
Hola, quiero saber si esta libreria aun existe, esque reviso los links de para Raphaeljs y estan caidos.
Probe el ejemplo mas sencillo que se pones en el articulo y no funciona, naturalmente accedi a la libreria por la URL: http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js
porque no tengo el js y no funciona.
Reply
1. Gaspar Fernández / Post Author15 julio, 2016 at 11:49
  Usando Mozilla Firefox 47.0 en Ubuntu Linux
  Hola Dann,
  En Raphael han cambiado cosas, yo creo que el dueño ya no quería gastar dinero en el dominio, porque la biblioteca no reportaría dinero. Cosas que pasan, de todas formas, la dirección que das de GitHub, creo que es la nueva dirección para encontrarla. Voy a cambiarlo en el post. ¡Muchas gracias!
  Yo he logrado cargar los ejemplos con la nueva versión de la biblioteca sin problema. Si quieres, carga las herramientas para desarrolladores de tu navegador a ver si en la consola (o en Red) te devuelve algún mensaje que nos ayude a depurar.
  Reply
zeuss / 9 octubre, 2016 at 23:33
Usando Google Chrome 53.0.2785.143 en Windows 7
Hola disculpa crees que de igual forma se pueda usar con un mapa de un estadio?
Reply
1. Gaspar Fernández / Post Author10 octubre, 2016 at 17:12
  Usando Mozilla Firefox 48.0 en Ubuntu Linux
  Claro que sí, al final lo que estamos manejando son imágenes svg por lo que si tienes el mapa (o lo pasas tú) a este formato, no deberías tener ningún problema.
  Reply
Kevin Edmundo TRUJILLO LOBATO / 27 octubre, 2016 at 23:22
Usando Google Chrome 54.0.2840.71 en Windows NT
Que tal podrías enviarme el código fuente, quiero aplicar tu algoritmo pero a unos planos espero tu pronta respuesa.
Reply
1. Gaspar Fernández / Post Author28 octubre, 2016 at 10:20
  Usando Mozilla Firefox 49.0 en Ubuntu Linux
  Hola Kevin. El código fuente está aquí en el post para que todo el mundo lo coja 🙂
  Reply
jhonatan / 13 octubre, 2017 at 0:21
Usando Google Chrome 61.0.3163.100 en Windows 7
hola, buenas tengo un problema al momento de llamar al mapa, no se a que se debe, lo iba a implementar en un proyecto usando jsf
Reply
1. Gaspar Fernández / Post Author13 noviembre, 2017 at 19:28
  Usando Mozilla Firefox 56.0 en Ubuntu Linux
  ¿Qué problema tienes?
  Reply
Gonzalo / 4 diciembre, 2017 at 20:26
Usando Google Chrome 62.0.3202.94 en Windows 7
Hola Gaspar,
Estuve probando tu tutorial, con un mapa de mi provincia, me funcionó PERFECTO … Logré hacer todo, pero a la hora de graficar, se ve gigante el mapa jaja
Tenes idea de que atributo debería modificar para adaptar la imagen a la resulucion de pantalla?
Desde ya mil gracias.
Reply
1. Gaspar Fernández / Post Author4 diciembre, 2017 at 21:04
  Usando Mozilla Firefox 57.0 en Linux
  Hola Gonzalo, pues ahora mismo no sé qué puede ser. ¿Podrías publicarlo en jsfiddle, github, o los ficheros en pastebin para echarles un ojo? Sólo si el código es visible 🙂
  Reply
Gonzalo / 5 diciembre, 2017 at 12:17
Usando Google Chrome 62.0.3202.94 en Windows 7
No hay problema Gaspar!
https://pastebin.com/fTdagQnh
Ese es el código que estoy probando. Como podrás observar, tomé las trayectorias del archivo SVG y le apliqué tu tutorial. Pero el problema es que no se adapta ni a la resolución de una pc. He probado con algunos atributos, pero todavía no doy con uno que me sirva creo jaja
Saludos cordiales!
Reply
1. Gaspar Fernández / Post Author7 diciembre, 2017 at 18:13
  Usando Mozilla Firefox 57.0 en Ubuntu Linux
  Ok, Gonzalo, creo que ya vi cuál era el problema. Tenemos que centrarnos en el lienzo y vincular RaphaelJs contra este lienzo. Además, te pongo las líneas que añadí a tu código:
  1
  2
  3
  var rjs = new Raphael("lienzo");
  rjs.setViewBox(0,0, 1500, 2500);
  rjs.setSize('100%', '100%');
  ¡Cuéntame si te funciona!
  Reply
Gonzalo / 5 diciembre, 2017 at 18:50
Usando Google Chrome 62.0.3202.94 en Windows 7
Buenos dias,
Ahora probé hacerlo de la forma final, donde detectas los IDs. Detecto todo pero el mapa sigue gigante, sin adaptarse siquiera a la pantalla, es muy raro
Reply
Alberto / 15 diciembre, 2017 at 1:40
Usando Google Chrome 62.0.3202.89 en Windows NT
Hola, se me ocurrio utilizar una imagen en PNG y convertirla sn SVG con un convertidor online, pero al obtener el SVG y querer dibujarlo, no pinta nada, despues de observar un momento me di cuenta que los dibujos que tu tienes traen punto decimal y lo que me devolvio la pagina es bastante diferente, alguna ayuda?
lo que obtengo es algo asi
Created by potrace 1.10, written by Peter Selinger 2001-2011
Created by potrace 1.10, written by Peter Selinger 2001-2011
Reply
1. Gaspar Fernández / Post Author18 diciembre, 2017 at 12:33
  Usando Mozilla Firefox 57.0 en Ubuntu Linux
  Hola Alberto. Tiene que haber algún problema con el fichero SVG, fíjate que no esté comprimido y que lo puedas abrir con otro programa de escritorio. Tal vez incluso puedes probar con Inkscape -> Salvar como y lo salvas con otro nombre, intentando guardarlo descomprimido. Tal vez sea algo así.
  Por cierto, el programa potrace para convertir imágenes en gráficos vectoriales te lo puedes descargar en tu ordenador para hacer todas las pruebas que quieras.
  Reply
Oscar E. / 29 noviembre, 2018 at 5:35
Usando Google Chrome 70.0.3538.110 en Windows NT
Excelente explicación, gracias. podrias indicar que otras funciones tenemos bajo click( function(), aparte de alert, ¿ podria cargar otra pagina o hacer un procedimiento que segun el municipio se leyera informacion almacenada en una bd y la mostrara, por ejemplo la poblacion u otros datos?. de antemano gracias por la ayuda.
Reply
1. Gaspar Fernández / Post Author29 noviembre, 2018 at 19:51
  Usando Mozilla Firefox 63.0 en Ubuntu Linux
  Por supuesto, ya que ejecutamos una función podríamos hacer llamadas Ajax. El límite es tu imaginación.
  Reply
Daniel / 2 mayo, 2019 at 22:04
Usando Mozilla Firefox 65.0 en Windows NT
Hola, te comento, estamos intentando crear el mapa de un plano y tenemos algunas dudas. ¿como estableces los ID’s de cada municipio? A nosotros nos aparece un valor totalmente aleatorio en cada casa. Por ultimo, como deberia hacer para mandar ese ID a una variable para usarla en PHP? Saludos, gracias.
Reply
1. Gaspar Fernández / Post Author31 marzo, 2020 at 21:04
  Usando Google Chrome 79.0.3945.79 en Ubuntu Linux
  Hola Daniel,
  Los IDs son prácticamente aleatorios, dependiendo del programa con el que lo hagas, lo bueno es una vez tengas el fichero, extraer los IDs y hacer la correspondencia. Podrás encontrar mejores formas de hacerlo, puedes analizar los paths con php y analizarlos desde ahí si lo prefieres. Puedes utilizar si lo prefieres lo que menciono aquí: https://poesiabinaria.net/2016/10/analiza-el-contenido-de-una-web-directamente-desde-php-web-scrapping-sencillo-y-mucho-mas/
  Salduos
  Reply
Eliver Colmenares / 24 junio, 2019 at 3:46
Usando Google Chrome 75.0.3770.100 en Windows 7
Buenas noches estimado, tengo una consulta. Cree un mapa pero el mismo se posiciona en la parte superior izquierda de la pantalla y solo muestra la mitad del mapa, que puedo hacer al respecto.
Gracias de antemano saludos…
Reply
1. Gaspar Fernández / Post Author31 marzo, 2020 at 21:02
  Usando Google Chrome 79.0.3945.79 en Ubuntu Linux
  Hola Eliver,
  Perdona la tardanza, el posicionamiento del mapa dependerá del CSS y la disposición que tengas en tu proyecto, si quieres, puedes compartirlo con jsfiddle y te echo una mano.
  Saludos!
  Reply
Rodrigo Abadia Mondragon / 18 septiembre, 2019 at 18:37
Usando Google Chrome 76.0.3809.132 en Windows NT
Hola, un cordial saludo. Estoy tratando de mostrar un mapa en formato .svg pero no muestra nada cuando trato de verlo en el navegador. En la descarga de ajax del archivo svg parece que no encuentra la ruta de ubicación, pero al hacer la depuración en chrome no muestra ningún error: En tu código lo único que hago es remplazar el archivo svg:
Ejemplo Raphaeljs
Ejemplo Raphaeljs
Selecciona un municipio
var default_attributes = {
fill: ‘#abcabc’,
stroke: ‘#000099’,
‘stroke-width’: 1,
};
var $munictxt = $(‘#municipiotxt’);
$.ajax({
url:’direcciones_seccionales_inkscape.svg’,
type: ‘GET’,
dataType: ‘xml’,
success: function(xml) {
var rjs = Raphael(‘lienzo’, 700, 400);
$(xml).find(‘svg > g > g > path’).each(function() {
var path = $(this).attr(‘d’);
var pid = $(this).attr(‘id’);
var munic = rjs.path(path);
munic.attr(default_attributes);
munic.hover(function() {
this.animate({ fill: ‘#00bbff’ });
$munictxt.html(«Municipio: «+pid);
}, function() {
this.animate({ fill: default_attributes.fill });
$munictxt.html(«Selecciona un municipio»);
}). click(function() {
alert(«Click sobre un municipio. ID = «+pid);
});
});
$(‘#loadingicon’).hide();
}
});
Reply
1. Gaspar Fernández / Post Author31 marzo, 2020 at 21:07
  Usando Google Chrome 79.0.3945.79 en Ubuntu Linux
  Hola Rodrigo, perdona la tardanza,
  Tienes que intentar especificar una URL válida para tu archivo. Si estás trabajando en local, tal vez debas usar file:///… o http://localhost/, es conveniente poner la URL completa, en el ejemplo no lo hago porque todo está al mismo nivel, pero a lo mejor en tu sistema no lo está.
  Asegúrate también de que guardas un archivo svg válido, que no sea un JPG con la extensión cambiada, por ejemplo.
  Reply
Rodrigo Abadia Mondragon / 18 septiembre, 2019 at 18:40
Usando Google Chrome 76.0.3809.132 en Windows NT
Quiero saber si es posible obtener una copia del archivo .svg utilizado en tu ejemplo para compararlo con mi archivo….?
Reply
1. Gaspar Fernández / Post Author31 marzo, 2020 at 21:08
  Usando Google Chrome 79.0.3945.79 en Ubuntu Linux
  Hola Rodrigo, perdona la tardanza. El archivo es: https://poesiabinaria.net/wp-content/uploads/2014/11/Malaga_municipios.svg
  Reply
Martin / 31 marzo, 2020 at 18:48
Usando Google Chrome 80.0.3987.149 en Windows NT
Te agradezco el tutorial, pero resulta sumamente complejo el intentar reproducirlo en otra cosa, o de hecho, cuesta mucho el seguirlo ya que en ningún momento explicas, por ejemplo, cuando se abre el SVG que es lo que representa cada ID, o bien cómo reemplazar dentro de tu código algunas cosas, o bien a que hace referencia el:
»
«,
entre otras cosas.
De todos modos gracias por el esfuerzo, pero particularmente a mi no me sirvió.
Saludos!
Reply
1. Gaspar Fernández / Post Author5 abril, 2020 at 18:21
  Usando Google Chrome 79.0.3945.79 en Ubuntu Linux
  Hola Martin,
  Siento que no te haya servido. Te agradezco mucho el comentario, intentaré ser más específico en siguientes tutoriales.
  Un saludo!
  Reply
Humberto / 4 mayo, 2020 at 23:45
Usando Google Chrome 81.0.4044.129 en Windows NT
Que tal solo para agradecer, por el tutorial muy bien explicado y sencillo, me costo un poco conseguir exactamente el svg pero lo logre.
Esto lo necesitaba para sacar estadísticas por municipios, saludos.
Reply
Humberto / 5 mayo, 2020 at 3:43
Usando Google Chrome 81.0.4044.129 en Windows NT
Que tal soy yo de nuevo, tengo una duda es que mi mapa le falta un trozo de mapa, como que si el mapa sobre saliera de una linea y ya no se ve, mmm seria algo como que si tuviera un contenedor pequeño y el mapa grande que le quita una parte del lado izquierdo.
ya intente hacerlo mas pequeño y sigo sin ver ese pedazo.
Reply
Mike Rooney / 2 marzo, 2023 at 8:35
Usando Google Chrome 110.0.0.0 en Windows NT
This is a great inspiring article. I am pretty much pleased with your good work.You put really very helpful information. Shining Jacket
Reply