El diario de Pepe Molina (Caricatos)

• Webmaster Pepe Molina
• Su Caricatura.com
• facebook
• Google+
• twitter

• Caricaturas "San Jorge"
• The Irish Affair (Pub)
• Construcciones Costa del Sol
• Polígonos Costa del Sol
• Red Tape

• Javascript Códigos (por Tunait)
• Centell: Diseño Gráfico...
• Recursos CSS
• Utilidades para Webmasters
• Blog de Juaniquillo
• Kseso de CSS

• Desarrollo y Poesía
• Caricaturas "San Jorge"
• Fotografías de Sevilla, España
• Autos con arte
• Medina Colón ArtWork
• AlSaPa
• Juan Ruiz
• AJC Creaciones

• Foros del web
• Maestros del web
• HERA
• Validador de feeds
• Sitemaps
• ISCA
• AEC

• Más Benalmádena
• Animarte
• Los Pescadores Playa
• Gráfica creativa
• MiniGolf Happy Days

• Prociencia
• Universidad Autónoma de Barcelona
• Pekegifs
• Publica tus poemas
• Cherrylandia
• Granada Links
• Desenvolvimento web
• El blog del Vinagre Asesino
• Bahía Sin Fondo
• Las historias eulerianas
• webfly

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.

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.

Hemos encontrado 13 comentarios.

• Este diario: Extras
• Caricaturas en Córdoba
• Mapa de España
• Desafío javascript: 100!
• Clip-art: carpetas y ficheros
• Sistema de comentarios paso a paso: Validar con javascript
• javascript: rollover en mapas
• SVG: Mapa de España
• Mapa de España SVG II: Herramientas
• Fondos con SVG

• Caricaturas en Córdoba
• Mapa de España SVG II: Reflexiones
• Mapa de España SVG II: Herramientas
• Mapa de España SVG II: Vicisitudes
• SVG: Zoom en mapa de imagen
• SVG: Dibujando mapas
• Mapear una imagen paso a paso
• Mapas y formularios
• Asociación Española de Caricaturistas
• Clip-art: carpetas y ficheros

• Caricatos ⁽²⁰⁾
• Así se hizo ⁽⁴¹⁾
• Vicisitudes de un Webmaster ⁽¹³⁶⁾
• Mentes pensantes ⁽⁹⁾
• Eventos y efemérides ⁽⁹⁾
• Globalización ⁽⁶⁶⁾
• Mamarrachadas ⁽⁶⁾
• Artes y oficios ⁽¹²⁾
• Programación ⁽¹¹²⁾
• Caricaturas y caricaturistas ⁽¹⁵⁾
• Experiencias SEO ⁽¹¹⁾

• listado de caricaturas
• listado de imágenes
• listado de extras
• listado de categorías
• listado de etiquetas
• listado de postales
• grupos de apuntes
• buscador interno
• anuario 2010
• anuario 2011
• anuario 2012
• anuario 2013
• anuario 2014
• anuario 2015
• anuario 2016
• anuario 2017
• anuario 2018
• anuario 2019
• anuario 2020
• anuario 2021
• anuario 2022
• anuario 2023
• anuario 2024

• Arrays javascript
• Capturar áreas
• Colección de clipart
• Editor de textos
• Editor del diario
• Galeria de imágenes
• Generador html
• Imagenes
• Máquina de Turing
• Postales digitales
• Probador de scripts
• Recortes en imágenes
• Reloj analógico
• Sudo-Captcha
• Todo sobre los colores
• Libro de visitas

2017 (7)

• diciembre (2)
• abril (1)
• marzo (1)
• febrero (1)
• enero (2)

2016 (2)

• abril (1)
• marzo (1)

2015 (6)

• mayo (1)
• abril (1)
• marzo (2)
• febrero (1)
• enero (1)

2014 (12)

• diciembre (1)
• noviembre (1)
• julio (2)
• junio (1)
• mayo (1)
• abril (1)
• marzo (1)
• febrero (1)
• enero (3)

2013 (20)

• diciembre (2)
• noviembre (1)
• octubre (1)
• septiembre (1)
• agosto (1)
• junio (1)
• mayo (2)
• abril (2)
• marzo (1)
• febrero (3)
• enero (5)

2012 (45)

• diciembre (3)
• noviembre (6)
• octubre (2)
• septiembre (4)
• agosto (2)
• julio (2)
• junio (3)
• mayo (4)
• abril (3)
• marzo (6)
• febrero (5)
• enero (5)

2011 (62)

• diciembre (5)
• noviembre (9)
• octubre (6)
• septiembre (6)
• agosto (3)
• julio (2)
• junio (5)
• mayo (4)
• abril (2)
• marzo (5)
• febrero (7)
• enero (8)

2010 (1)

• diciembre (1)