logo El diario de Pepe Molina (Caricatos)

yo

Vamos a mostrar como se puede hacer un mapa de España interactivo tan solo con los recursos de la web. Ya habíamos adelantado en el apunte javascript: rollover en mapas que sería conveniente usar una imagen con colores planos para poder capturar las áreas con otro recurso (en este caso de mi autoría: Capturar áreas en imágenes).


Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

IV Asamblea de la AEC

RSS de las imágenes: rss


La Cita

Gracias a Dios, el hombre no puede volar y llenar de basura el cielo como ha hecho con la Tierra

Henry David Thoreau, filósofo estadounidense (1817-1862).


En esta zona están las páginas personales del autor.


Mis clientes ahora también son mis amigos (aunque les cobre).


En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..


En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


Puede contribuir a mantener esta página con su donativo.


botón pay-pal

Mapa de España

emoticón de Caricatos Publicado el día 27 de marzo de 2011
id=21; categorías: Así se hizo, Vicisitudes de un Webmaster, Programación

Vamos a mostrar como se puede hacer un mapa de España interactivo tan solo con los recursos de la web. Ya habíamos adelantado en el apunte javascript: rollover en mapas que sería conveniente usar una imagen con colores planos para poder capturar las áreas con otro recurso (en este caso de mi autoría: Capturar áreas en imágenes).

Buscando librerías de clip-art, hemos encontrado una página valiosísima: Open Clip Art, y revisando las librerías, concretamente en la Colección 0.18 full hemos dado con una imagen que nos viene muy bien, cuyo nombre es "spain_provinces_sherrera_01.svg", que hemos pasado al formato png para mantener la calidad, y poderla usar en nuestro recurso.

A continuación mostramos el mapa con todas sus áreas presentadas con un efecto para destacarlas con el ratón; luego explicaremos paso a paso como ha sido hecho.

España
transparencia
Málaga Gerona Granada Almería Cádiz Huelva Sevilla Córdoba Jaén Badajoz Cáceres Murcia Ciudad Real Albacete Toledo Cuenca Ávila Salamanca Madrid Segovia Valladolid Zamora León Palencia Burgos Soria Guadalajara Teruel Alicante Valencia Castellón Tarragona Barcelona Lérida Menorca Mallorca Ibiza Zaragoza Huesca Navarra Guipúzcoa Vizcaya Álava La Rioja Cantabria Asturias Lugo La Coruña Pontevedra Orense Lanzarote Fuerteventura Gran Canaria Tenerife La Gomera La Palma El Hierro Formentera Ceuta Melilla

Esta es la lista de áreas (provincias/islas):

Albacete, Alicante, Almería, Asturias, Álava, Ávila, Badajoz, Barcelona, Burgos, Cantabria, Castellón, Cáceres, Cádiz, Ceuta, Ciudad Real, Córdoba, Cuenca, El Hierro, Formentera, Fuerteventura, Gerona, Gran Canaria, Granada, Guadalajara, Guipúzcoa, Huelva, Huesca, Ibiza, Jaén, La Coruña, La Gomera, La Palma, La Rioja, Lanzarote, León, Lérida, Lugo, Madrid, Mallorca, Málaga, Melilla, Menorca, Murcia, Navarra, Orense, Palencia, Pontevedra, Salamanca, Segovia, Sevilla, Soria, Tarragona, Tenerife, Teruel, Toledo, Valencia, Valladolid, Vizcaya, Zamora, Zaragoza

Y "de dulce", la lista de comunidades autónomas:

Creando áreas y coloreando

Vamos al recurso para detectar áreas, y luego de seleccionar nuestro mapa, pinchamos en cualquier área que sepamos su nombre (también podemos ayudarnos de la wikipedia). Cuando el script reconozca el área, y aparezca la ventana que solicita su nombre, escribimos el mismo y comprobamos que se haya capturado correctamente en la pestaña "edición", y de paso la coloreamos pulsando el botón "Rellenar zona". Repetimos el proceso para cada área hasta colorear todo el mapa.

Hemos coloreado también el área que representa a África, pero solo por razones estéticas, sin considerar luego ese área. Seguidamente pasamos a la pestaña "visión" y generamos el mapa coloreado (en este caso seleccionando la opción "fundida"), que guardamos para usarlo en la página donde lo necesitemos, hemos de comentar que en algunos navegadores podría no generarse correctamente, nosotros hemos usado firefox portable.

Desde la misma pestaña, ahora pulsamos el botón "Ver efecto en popup", que generará una ventana nueva con el efecto funcionando tal como queremos. Solo nos queda guardar esa página en nuestro ordenador, y nuestro navegador se encargará de generar todas las imágenes modificando en el código fuente los elementos que lo requieran (como los nombres de las imágenes de sustitución de cada área).

Un extra: listado de áreas

A partir del listado de areas que nos proporciona el código fuente de la última ventana generada podemos fácilmente generar el listado de áreas con el siguiente código de este mismo apunte:

function sortexto(a, b) {
	aaa = a.charAt(0).toLowerCase();
	bbb = b.charAt(0).toLowerCase();
	abc = "aábcdeéfghiíjklmnñoópqrstuúvwxyz";
	if (abc.indexOf(aaa) == abc.indexOf(bbb))
		return sortexto(a.substr(1), b.substr(1))
	else
		return (abc.indexOf(aaa) - abc.indexOf(bbb)); 
}

array_areas = [];
for (a in areas)
	array_areas.push(a);
array_areas.sort(sortexto);

Ya con el listado ordenado alfabéticamente, el listado lo generamos dentro de el párrafo con id="lista_areas" con el siguiente código:

array_enlaces = [];
for (i = 0, total = array_areas.length; i < total; i++)	{
	ancla = "<a name='" + array_areas[i];
	ancla+= "' href='http://es.wikipedia.com/wiki/" + array_areas[i];
	ancla+= "' onmouseover='mostrarArea(this.name)";
	ancla+= "' onmouseout='ocultarArea(this.name)";
	ancla+= "'>" + array_areas[i] + "</a>";
	array_enlaces.push(ancla);
}
tag("lista_areas").innerHTML = array_enlaces.join(", ") + ".";

Ahora vemos que se utiliza funciones distintas a las originales que describimos a continuación:

function ocultarArea(cual)	{
	document.images[cual].style.visibility = "hidden";
	document.anchors[cual].style.backgroundColor = "transparent";
}
function mostrarArea(cual)	{
	document.images[cual].style.visibility = "visible";
	document.anchors[cual].style.backgroundColor = "yellow";
}

Las imágenes y enlaces se referencian por su nombre (atributo name) y en ambos casos es el mismo

Un dulce: Las comunidades autónomas

Si por el nombre de una provincia o isla podemos marcarla en una lista y a la vez destacarla en el mapa, podemos considerar la lista de provincias/islas de una comunidad y a todas individualmente aplicarle el efecto, simplemente recorriendo esa lista:

Andalucía = [
	"Almería",
	"Cádiz",
	"Córdoba",
	"Granada",
	"Huelva",
	"Jaén",
	"Málaga",
	"Sevilla"
];
for (i = 0, total = Andalucia.length; i < total; i++)
	mostrarArea(Andalucia[i]);

Como último comentario debemos advertir que todos los enlaces son hacia la wikipedia, y que algunos términos pueden ser "ambiguos", por lo que es posible que en algunos casos no sea el enlace esperado.

Zona de comentarios

Hemos encontrado 13 comentarios.

#Mensaje enviado por Ágata
Comentario escrito el día 18 de diciembre de 2015, a la hora 23:16:13
email: agatamarquiegui@gmail.com

Hola!

Llevo meses trabajando en la construcción de una página web sobre patrimonio y paisaje. Aún no la he hecho pública. Quiero localizar obras en municipios dentro de una provincia, que a su vez está dividida en comarcas.

Cuando he visto el mapa de España, he alucinado!!!. Es exactamente lo que quería.

Tengo dibujados los mapas en autocad y pasados a formato png. Incluso creo que podría sacar las coordenadas de los polígonos de las áreas a mano.

Me gustaría hacer el mapa de mi comunidad autónoma con sus municipios, igual que el mapa de España del ejemplo, de manera que se enlacen comarcas, links y municipios.

Soy novata y algunos pasos de los que expone se me escapan por completo. Sería posible que me guiara. Se lo agradecería mucho.

Saludos cordiales!!

#Mensaje enviado por Pepe Molina
Comentario escrito el día 18 de de 2015, a la hora 23:42:31
url: http://pepemolina.com
email: webmaster@pepemolina.com

Hola:


Desde luego que me encantaría echar una mano a tu proyecto. Para empezar, en vez de buscar coordenadas a mano, puedes usar nuestro recurso sobre: Capturar áreas en imágenes.


Saludos mi emoticón


#Mensaje enviado por Reparación Plotter
Comentario escrito el día 08 de septiembre de 2015, a la hora 16:27:28
url: http://reparacionplotter.com

Muy interesante, vamos a intentar integrar este mapa en nuestra web, que está separado por provincias y se dedica al servicio técnico de plotters. Gracias!!


#Mensaje enviado por Erik
Comentario escrito el día 25 de abril de 2014, a la hora 23:14:17
email: erik.bs.lp@gmail.com

Hola :)


Estoy en un proyecto algo similar y era para saber si me podias echar una mano ya que no controlo mucho sobre java script, estoy usando gimp para seleccionar areas con sus respectivas coordenadas y me gustaria saber que codigo me haria falta para que se me iluminen las coordenadas que me proporciona el gimp. He visitado mas de 100 foros buscando alguna solución y la verdad que no he tenido suerte.


Un saludo Gracias =)


#Mensaje enviado por Ivan
Comentario escrito el día 22 de agosto de 2013, a la hora 12:17:46
url: http://www.olimpodelpadel.com
email: contacto@olimpodelpadel.com

¿Las comunidades de Ceuta y Melilla?

#Mensaje enviado por Pepe Molina
Comentario escrito el día 16 de de 2014, a la hora 08:29:26
url: http://www.pepemolina.com

Hola Ivan:


Ya hemos añadido a Ceuta y Melilla. Lamentablemente son casi imperceptibles.


Saludos mi emoticón


#Mensaje enviado por victor
Comentario escrito el día 13 de marzo de 2013, a la hora 11:54:34
url: http://www.marca.com
email: victorpedros@hotmail.com

como puedo poner enlaces en las provincias, y como inserto ese codigo javascript en la web. Gracias

#Mensaje enviado por Victor
Comentario escrito el día 14 de de 2013, a la hora 12:13:22
url: http://www.marca.com
email: victorpedros@hotmail.com

Ya he solucionado como darle a cada provincia su enlace, en cada area al final puedes poner la propiedad onclick onClick="location.href='index.html'" asi poner lo que quieras.

#Mensaje enviado por Pepe Molina
Comentario escrito el día 16 de de 2013, a la hora 07:48:35
url: http://www.pepemolina.com

Los mapas son un sistema de enlaces, así que la respuesta no es correcta; es más, el mapa que estamos mostrando tiene un enlace en cada provincia a su referencia en la wikipedia.

No se trata de hacerlo con funciones javascript sino con el propio atributo href de cada uno de los áreas.


Saludos mi emoticón


#Mensaje enviado por bier
Comentario escrito el día 25 de noviembre de 2012, a la hora 17:09:44
email: bierlayus@hotmail.com

Hola Pepe,

Muy interesante el rollover sobre cambiar el color de las provincias de España.

Yo deseo poder cambiar el color de una provincia al momento de desplegar el gráfico, esto es, al momento de desplegar el gráfico.

¿alguna idea?

Gracias anticipadas.

#Mensaje enviado por Pepe Molina
Comentario escrito el día 26 de de 2012, a la hora 01:34:03
url: http://www.disegnocentell.com.ar

Hola Bier:


Después de ver tu mensaje en los foros: Colorear una provincia de mapa he visto este comentario, y seguro que hay muchas opciones; tal vez te interese más una solución desde el servidor, y un ejemplo bueno lo puedes ver en esta página "Esquinas redondeadas más simples" de nuestro compañero y amigo panino5001...

Y sabiendo las coordenadas de la provincia, otra opción podría ser generar un fichero svg.


Saludos mi emoticón


#Mensaje enviado por Andrés Fernández
Comentario escrito el día 14 de febrero de 2012, a la hora 21:16:51
url: http://www.disegnocentell.com.ar
email: mobius@disegnocentell.com.ar

Muy bueno, como siempre. Muy interesante la función sortTexto!

#Mensaje enviado por Pepe Molina
Comentario escrito el día 14 de de 2012, a la hora 23:56:20
url: http://www.pepemolina.com

Hola:


Gracias Andrés, se agradecen siempre tus comentarios; y curiosamente releyendo el apunte y la función que comentas, he descubierto que en la lista de letras faltaba la "e" acentuada (é), y ya está corregido.


Saludos mi emoticón

Evaluación

Valoración de esta página: (apunte.21) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 16918 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

http://www.pepemolina.com/postales/Fondos/FONDO005.gif
http://www.pepemolina.com/postales/Musicales/Imagen1.gif
http://www.pepemolina.com/postales/Musicales/Imagen2.gif
http://www.pepemolina.com/postales/Musicales/Imagen3.gif
http://www.pepemolina.com/postales/Musicales/Imagen4.gif
http://www.pepemolina.com/postales/Musicales/Imagen5.gif
http://www.pepemolina.com/postales/Musicales/Imagen6.gif
http://www.pepemolina.com/postales/Musicales/Imagen7.gif
Postal Digital
Postal Digital
enlace a la postal
Copyright © 2002-2017 www.pepemolina.com
RSS rss | Ver Mapa del sitio