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
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 | <!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 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); $(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(); } }); </script> </body> </html> |
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á:

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!
Hola, Muy buen post! Disculpa los archivos del jquery.min.js no pusiste un enlace para descargar.
Saludos y gracias
Para descargar jquery puedes ir a: http://jquery.com/download/
Muchas gracias por tu comentario
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!
¿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 ?
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.
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
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
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.
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.
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!
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?
hola quisiera si tu me puedes hacer un mapa de chile con esas caracteristicas y me dices cuanto me cobras. gracias
Si alguien que entre por aquí se anima os pongo en contacto. Yo por el momento no tengo mucho tiempo. Saludos!
Hola yo lo logré hacer con el mapa de chile dividido en regiones, por si te interesa aún escríbeme xxxxxxxxxxxxx
Hola Anibal !! Ya te mandé un mail (he editado tu comentario para que nadie lo vea)
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.
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.
Hola disculpa crees que de igual forma se pueda usar con un mapa de un estadio?
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.
Que tal podrías enviarme el código fuente, quiero aplicar tu algoritmo pero a unos planos espero tu pronta respuesa.
Hola Kevin. El código fuente está aquí en el post para que todo el mundo lo coja 🙂
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
¿Qué problema tienes?
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.
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 🙂
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!
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:
2
3
rjs.setViewBox(0,0, 1500, 2500);
rjs.setSize('100%', '100%');
¡Cuéntame si te funciona!
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
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
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.
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.
Por supuesto, ya que ejecutamos una función podríamos hacer llamadas Ajax. El límite es tu imaginación.
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.
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
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…
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!
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();
}
});
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.
Quiero saber si es posible obtener una copia del archivo .svg utilizado en tu ejemplo para compararlo con mi archivo….?
Hola Rodrigo, perdona la tardanza. El archivo es: https://poesiabinaria.net/wp-content/uploads/2014/11/Malaga_municipios.svg
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!
Hola Martin,
Siento que no te haya servido. Te agradezco mucho el comentario, intentaré ser más específico en siguientes tutoriales.
Un saludo!
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.
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.
ufabet เว็บแม่ แทงบอลได้ทุกที่ ทันทีที่ต้องการ สล็อตเว็บตรงอันดับ1 ที่ให้คุณสนุกได้ทุกรูปแบบ
This is a great inspiring article. I am pretty much pleased with your good work. You put really very helpful information.
Miles morales leather jacket
This is the one of the most important information for me. And I am feeling glad reading your article. The article is really excellent?
Yellowstone Merchandise