Ejemplo de código fuente de un mapa de España distribuído por Comunidades Autónomas con efecto highlighting, realizado mediante un plugin de jQuery llamado maphilight, con el cual podremos ir seleccionando cada Comunidad, como si se tratase de un mapa hecho con efectos en flash.
ÍNDICE
Realizar el highlighting con jQuery
Para realizar el highlighting del mapa con jQuery, existen varios plugins conocidos, y yo destaco estos dos: maphilight e ImageMapster. Yo este ejemplo lo hice con maphilight, pero considero bajo mi humilde opinión, que es mucho más profesional y más mega-chuli el plugin ImageMapster.
Crear o conseguir el mapa de España
Lo primero que tenemos que hacer es conseguir el mapa de España distribuído en diferentes Comunidades Autónomas. Yo lo he sacado de una web muy pero que muy práctica, donde puedes descargarte cliparts opensource:
Aunque también la Wikipedia tiene varias. Lo importante es que sea un mapa bien estructurado, y si es en formato svg y lo más poligonal posible, pues mucho mejor, ya que el mapeo después será mucho más sencillo.
Mapear el mapa (valga la redundancia)
Cuando tenemos ya nuestro mapa elegido, es hora de mapearlo. Ésta es la tarea más ruda de todo el proceso, ya que hay que sacar las coordenadas de cada Comunidad Autónoma o Provincia, en modo polígono. Si lo hacemos a mano, ya adelanto que es un trabajo de chinos. Así que para mapearlo y conseguir esas preciadas coordenadas, hay diferentes herramientas por internet, como por ejemplo:
http://imagemap-generator.dariodomi.de
http://www.maschek.hu/imagemap/imgmap
http://www.caricatos.net/areas/index.php
http://www.kolchose.org/simon/ajaximagemapcreator
Otras maneras de conseguir las coordenadas:
- Mediante una herramienta que trae maphilight
Sería ejecutando este script de python:svg2imagemap.py Mapa_Comunidades.svg X Y ComunidadesX e Y serían el width y el height del mapa que queremos crear. Una vez ejecutado, nos creará un archivo html con las diferentes coordenadas.
- Mediante las herramientas ImageBot e Inkscape Map
Una vez mapeado el mapa, obtendremos las diferentes coordenadas de cada zona de ese mapa, en este caso de cada Comunidad. Pues esas coordenadas guardarlas como paño en oro, porque es la joya de la corona de todo este tinglao.
Código
El código a aplicar sería…
Creamos el archivo JS llamado mapaEs.js con las funciones y sus propiedades, del Mapa que vamos a realizar:
//Función para la clase map
$(function() {
$('.map').maphilight(
{
fill: true,
fillColor: '8FA4C9',
strokeColor: '3B5998',
/* Propiedades por defecto en maphilight
* Si queremos cambiar alguna, descomentamos y le ponemos el valor que nos guste
fillOpacity: 0.2,
stroke: true,
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
alwaysOn: false,
neverOn: false,
groupBy: false,
wrapClass: true,
shadow: false,
shadowX: 0,
shadowY: 0,
shadowRadius: 6,
shadowColor: '000000',
shadowOpacity: 0.8,
shadowPosition: 'outside',
shadowFrom: false
*/
});
});
//Función para la clase map_islas
$(function() {
$('.map_islas').maphilight(
{
fill: false,
strokeColor: '3B5998',
/* Propiedades por defecto en maphilight
* Si queremos cambiar alguna, descomentamos y le ponemos el valor que nos guste
fillOpacity: 0.2,
stroke: true,
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
alwaysOn: false,
neverOn: false,
groupBy: false,
wrapClass: true,
shadow: false,
shadowX: 0,
shadowY: 0,
shadowRadius: 6,
shadowColor: '000000',
shadowOpacity: 0.8,
shadowPosition: 'outside',
shadowFrom: false
*/
});
});
Creamos el código HTML incluyendo todas las librerías jQuery, el mapa en formato .png y las coordenadas del mapa:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo mapa de España con jQuery maphilight</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.js"></script>
<script type="text/javascript" src="mapaES.js"></script>
</head>
<body>
<h1>MAPA DE ESPAÑA POR COMUNIDADES</h1>
</head>
<body>
<img class="map" src="mapaes.png" width="300" height="264" usemap="#spain">
<map id="spain" name="spain">
<area shape="poly" href="javascript: void(0)" title="Galicia" coords="26,5,27,4,28,4,29,3,30,4,31,4,32,3,33,3,34,2,35,2,36,3,37,3,40,6,41,6,42,7,44,7,44,9,43,10,43,13,44,14,44,15,46,17,46,18,48,20,49,20,48,20,46,22,46,24,48,26,49,26,48,27,48,28,47,29,47,30,45,32,45,34,44,35,44,38,45,39,47,39,50,42,50,45,45,50,45,53,42,53,39,56,37,56,36,57,34,55,32,55,31,54,25,54,24,55,22,55,22,54,23,53,23,49,21,47,20,47,19,46,15,46,14,47,11,47,10,48,9,48,8,49,8,48,9,47,9,46,11,44,11,43,12,42,12,38,11,37,9,37,11,35,11,32,9,30,7,30,6,31,7,30,7,29,8,28,8,26,7,25,4,25,4,22,3,21,1,21,1,20,4,17,4,16,5,16,7,14,9,14,10,13,13,13,14,14,16,14,17,13,18,13,19,12,20,13,21,13,22,14,24,14,25,13,25,7,24,6,23,6,24,6,25,5" >
<area shape="poly" href="javascript: void(0)" title="Asturias" coords="77,9,78,10,81,10,82,11,84,11,85,12,92,12,93,13,96,13,97,14,98,14,99,15,96,15,95,16,95,18,89,18,88,19,88,20,87,20,86,21,83,21,81,23,79,23,78,22,75,22,74,23,73,23,71,21,69,21,68,20,66,20,64,22,62,22,61,23,60,23,59,24,58,24,57,25,53,25,52,26,52,24,51,23,53,21,53,19,47,13,47,11,49,9,53,9,54,8,64,8,65,9,66,9,67,10,70,10,71,9,72,9,74,7,76,9" >
<area shape="poly" href="javascript: void(0)" title="Cantabria" coords="118,14,119,13,123,13,124,14,126,14,127,15,129,15,126,15,124,17,124,18,123,19,123,20,121,20,120,21,117,21,115,23,114,23,112,25,112,27,115,30,115,31,112,31,109,28,109,27,106,24,105,24,104,23,100,23,99,22,97,22,97,21,98,20,98,19,101,19,102,18,102,15,103,15,104,14" >
<area shape="poly" href="javascript: void(0)" title="Euskadi" coords="151,17,152,18,157,18,159,16,159,17,156,20,156,21,148,29,148,32,147,33,147,34,146,35,146,36,145,37,145,39,144,38,143,38,142,37,143,37,145,35,145,34,144,33,144,32,142,30,137,30,136,31,136,33,137,34,134,31,133,31,132,30,133,30,135,28,135,26,134,25,134,24,133,23,133,20,131,18,132,18,135,15,137,15,138,14,140,14,141,15,142,15,143,16,145,16,146,17" >
<area shape="poly" href="javascript: void(0)" title="Navarra" coords="167,20,173,26,176,26,177,27,180,27,179,28,179,29,178,30,178,31,176,33,175,33,170,38,170,39,169,40,169,42,168,43,168,45,167,46,167,50,168,51,168,53,169,54,167,56,165,56,164,55,162,55,162,53,163,52,163,49,156,42,155,42,154,41,153,41,152,40,149,40,148,39,149,38,149,37,150,36,150,35,151,34,151,32,152,31,152,30,160,22,160,21,163,18,166,18,167,19" >
<area shape="poly" href="javascript: void(0)" title="La Rioja" coords="145,42,146,43,149,43,150,44,152,44,154,46,155,46,159,50,159,51,158,52,158,55,155,55,155,54,154,53,154,52,153,51,152,51,151,50,150,50,149,49,146,49,143,52,143,53,142,54,141,53,142,52,142,51,140,49,139,49,136,52,135,52,135,50,134,49,134,39,136,37,137,38,138,38,141,41,142,41,143,42" >
<area shape="poly" href="javascript: void(0)" title="Aragón" coords="192,32,193,33,194,33,197,36,200,36,201,35,204,35,205,34,212,34,214,36,214,37,212,39,212,40,214,42,214,44,213,45,213,48,212,49,212,52,211,53,211,55,210,56,210,57,209,58,209,59,208,60,208,61,207,62,207,63,206,64,206,66,207,67,207,68,206,69,206,74,207,75,207,76,204,79,204,90,202,92,201,92,200,91,195,91,192,94,192,95,191,96,191,97,193,99,193,103,192,104,192,105,191,106,190,106,189,107,188,107,187,108,187,109,186,110,186,112,181,117,174,110,170,110,169,109,168,109,163,104,163,102,164,102,167,99,167,88,159,80,158,80,157,79,155,79,155,78,154,77,156,75,157,75,159,73,159,70,160,69,160,68,162,66,162,59,170,59,172,57,172,51,171,50,171,49,170,48,172,46,172,42,174,40,174,39,177,36,178,36,182,32,182,30,183,30,185,32" >
<area shape="poly" href="javascript: void(0)" title="Catalunya" coords="237,39,241,43,242,43,243,44,245,44,246,43,252,43,253,44,256,44,258,42,259,42,260,41,262,41,263,40,265,40,267,42,265,44,265,47,268,50,268,53,266,55,266,56,265,57,264,57,259,62,256,62,254,64,253,64,251,66,250,66,248,68,248,69,247,70,247,71,246,72,246,73,245,74,244,74,243,75,241,75,240,76,237,76,236,77,234,77,233,78,231,78,230,79,228,79,227,80,226,80,225,81,224,81,222,83,221,83,215,89,215,92,216,93,218,93,215,96,214,96,213,97,212,97,212,96,211,95,209,95,208,94,208,93,207,92,207,91,208,90,208,86,207,85,207,82,208,81,208,80,210,78,210,73,209,72,210,71,210,70,211,69,211,67,210,66,210,64,211,63,211,62,213,60,213,59,214,58,214,56,215,55,215,52,216,51,216,48,217,47,217,39,218,38,218,36,217,35,217,34,216,33,216,32,215,31,215,30,216,31,217,31,218,32,219,32,220,33,221,33,223,35,228,35,228,41,229,42,231,42,232,43,233,43" >
<area shape="poly" href="javascript: void(0)" title="C.Valenciana" coords="186,121,186,117,187,117,188,116,188,115,189,114,189,113,190,112,190,111,191,110,192,110,196,106,196,95,197,94,198,95,204,95,208,99,209,99,211,101,210,102,210,103,205,108,205,109,203,111,203,112,201,114,201,115,200,116,200,118,199,119,199,120,197,122,197,123,196,124,196,125,195,126,195,127,194,128,194,137,195,138,195,141,196,142,196,144,197,145,197,146,198,147,198,148,199,149,199,150,204,155,205,155,204,156,203,156,202,157,201,157,198,160,197,160,194,163,193,163,192,164,192,165,191,166,191,167,190,168,190,169,189,170,189,171,186,174,186,177,185,178,185,180,184,180,184,179,182,177,182,176,181,175,181,172,182,171,182,169,179,166,179,165,180,164,180,160,181,159,181,158,183,156,183,152,182,151,182,149,180,147,177,147,176,146,176,142,177,141,177,139,176,138,176,136,175,135,171,135,170,134,170,133,169,132,170,131,170,130,172,128,173,128,174,127,174,125,175,124,175,122,176,121,176,120,177,119,177,118,179,120,180,120,182,122,185,122" >
<area shape="poly" href="javascript: void(0)" title="Murcia" coords="173,158,174,157,175,158,176,158,176,164,175,165,175,166,176,167,176,168,178,170,178,178,179,179,179,180,183,184,182,185,182,188,184,190,178,190,177,191,172,191,168,195,166,195,166,194,165,193,162,193,159,190,159,182,158,181,156,181,155,180,154,180,153,179,152,179,152,178,151,177,151,176,156,171,157,171,158,170,160,170,161,169,162,169,163,170,168,170,169,169,169,167,170,166,170,163,171,162,171,160,172,159,172,158" >
<area shape="poly" href="javascript: void(0)" title="Castilla La Mancha" coords="145,85,154,85,156,83,157,83,163,89,163,98,162,98,160,100,160,101,158,103,158,104,166,112,166,113,167,114,167,115,170,118,171,118,172,119,173,119,172,120,172,121,171,122,171,124,166,129,166,135,169,138,170,138,171,139,173,139,173,141,172,142,172,143,171,144,171,145,172,146,172,147,176,151,179,151,179,155,178,155,177,154,176,154,175,153,173,153,172,154,171,154,169,156,169,157,168,158,168,159,167,160,167,163,166,164,166,166,165,166,163,164,162,164,160,166,158,166,157,167,155,167,147,175,146,175,146,174,147,173,147,172,148,171,148,168,144,164,144,163,143,162,133,162,132,163,125,163,124,164,117,164,116,165,110,165,109,166,105,166,104,165,103,165,98,160,97,160,96,159,95,159,94,158,91,158,91,156,90,155,89,155,92,152,92,151,93,150,93,148,92,147,93,146,93,143,94,144,95,144,96,143,96,134,95,133,94,133,93,134,92,133,91,133,90,132,89,132,87,130,87,129,86,128,86,123,85,122,85,121,84,120,83,120,82,119,82,117,81,116,81,115,84,115,85,114,90,114,91,113,92,113,94,111,95,111,96,112,101,112,103,110,103,112,104,113,105,113,107,111,109,111,110,112,112,112,115,115,117,115,115,117,114,117,113,118,113,120,115,122,116,122,117,121,119,121,120,120,121,120,122,119,123,119,124,118,127,118,128,119,131,119,133,117,133,116,134,115,134,114,135,113,135,110,132,107,131,107,132,106,132,104,131,103,131,102,129,100,129,98,125,94,125,90,126,89,126,84,125,83,125,82,126,81,127,81,128,80,131,80,132,79,137,79,138,80,140,80,141,81,141,82,143,84,144,84" >
<area shape="poly" href="javascript: void(0)" title="Andalucía" coords="115,168,122,168,123,167,129,167,130,166,137,166,138,165,141,165,141,166,144,169,144,171,143,172,143,173,142,174,142,175,141,176,141,177,142,178,145,178,146,179,148,179,148,180,151,183,152,183,153,184,155,184,156,185,156,186,155,187,155,188,156,189,156,192,157,193,157,194,159,196,160,196,161,197,163,197,163,198,161,200,161,201,159,203,159,204,158,205,158,207,157,208,157,211,156,212,156,213,153,216,152,216,149,213,146,213,145,214,144,214,140,218,139,217,137,217,136,216,131,216,130,215,129,215,128,216,125,216,124,217,123,217,122,218,120,216,119,216,118,215,106,215,105,216,100,216,99,217,98,217,97,218,97,219,93,223,93,224,83,224,82,225,81,225,79,227,79,228,77,230,77,231,76,232,76,233,74,235,73,235,72,236,72,237,71,238,70,237,69,237,66,234,65,234,64,233,63,233,61,231,61,230,60,229,60,228,59,227,59,226,58,225,58,221,57,220,56,220,55,219,55,217,57,215,57,210,56,209,53,209,52,208,51,208,49,206,48,206,45,203,44,203,44,202,43,201,43,199,42,198,41,198,39,200,34,200,33,201,31,201,30,200,30,199,31,198,31,191,30,190,30,188,31,187,31,186,32,185,32,184,35,181,35,180,37,178,38,178,39,177,40,177,41,176,41,175,42,174,42,173,43,172,45,174,46,174,47,175,48,175,50,177,54,177,55,178,56,178,57,179,62,179,63,178,64,178,65,177,66,177,69,174,69,176,70,177,71,177,72,176,73,176,76,173,76,168,77,167,77,164,80,161,81,161,83,159,84,159,86,157,87,158,88,158,88,161,89,162,94,162,96,164,97,164,101,168,102,168,103,169,104,169,105,170,106,170,107,169,114,169" >
<area shape="poly" href="javascript: void(0)" title="Extremadura" coords="67,109,69,109,70,108,71,108,72,109,73,109,74,110,75,110,76,111,78,111,78,120,79,121,79,122,80,123,82,123,82,124,83,125,82,126,82,128,83,129,83,130,84,131,84,132,87,135,88,135,90,137,93,137,93,139,92,139,90,141,90,143,88,145,88,146,87,147,87,148,88,149,89,149,88,150,88,151,85,154,84,154,83,155,82,155,79,158,78,158,74,162,74,163,73,164,73,170,72,171,72,172,71,171,67,171,64,174,63,174,62,175,61,175,60,176,59,176,57,174,56,174,55,173,51,173,49,171,47,171,44,168,40,168,38,166,38,164,37,163,37,158,38,157,38,155,43,150,43,148,44,147,44,144,42,142,42,141,39,138,39,136,38,135,38,132,37,131,37,130,36,129,36,128,35,127,40,127,41,126,43,126,45,124,45,123,46,122,46,117,47,116,47,115,46,114,46,110,47,109,50,109,51,108,53,108,55,106,56,106,60,102,61,102,63,104,63,105" >
<area shape="poly" href="javascript: void(0)" title="C. de Madrid" coords="123,86,122,87,122,96,125,99,125,101,127,103,127,104,128,105,128,109,129,110,130,110,131,111,131,112,130,113,130,115,121,115,120,116,120,113,118,111,116,111,114,109,112,109,110,107,104,107,104,106,105,106,106,105,106,104,107,103,107,102,108,101,108,100,109,99,109,97,110,96,110,95,111,95,112,94,113,94,114,93,114,92,121,85,122,85" >
<area shape="poly" href="javascript: void(0)" title="Castilla y León" coords="102,26,103,27,104,27,105,28,105,29,110,34,111,34,112,35,115,35,116,34,117,34,118,33,118,32,119,31,119,29,117,27,117,26,118,25,119,25,120,24,125,24,126,23,127,23,128,22,129,22,129,23,130,24,130,25,129,25,127,27,127,30,132,35,132,36,130,38,130,43,131,44,131,45,130,46,130,48,131,49,131,52,132,53,132,54,135,57,137,57,138,56,139,56,140,57,144,57,147,54,147,53,149,53,150,54,151,54,151,56,153,58,155,58,156,59,158,59,158,61,159,62,159,64,157,66,157,67,155,69,155,71,154,71,152,73,152,74,151,75,151,80,152,81,151,81,150,82,147,82,141,76,138,76,138,75,137,74,136,74,135,75,133,75,132,76,128,76,127,77,126,77,125,78,124,78,122,80,121,80,111,90,111,91,110,91,109,92,108,92,107,93,107,94,106,95,106,97,104,99,104,101,97,108,96,108,95,107,94,107,93,108,92,108,90,110,88,110,87,111,82,111,81,110,81,109,79,107,76,107,74,105,73,105,71,103,70,103,68,105,67,104,67,103,62,98,59,98,55,102,54,102,52,104,51,104,50,105,49,105,49,102,50,101,50,92,51,91,51,86,50,85,51,85,52,84,52,82,53,81,53,80,54,79,55,79,56,78,57,78,60,75,61,75,64,72,64,70,65,69,65,66,64,65,64,64,62,62,61,62,60,61,58,61,58,59,57,58,57,56,55,54,54,54,53,53,50,53,49,52,49,51,51,49,52,49,53,48,53,47,54,46,54,42,53,41,53,40,48,35,49,34,49,33,51,31,51,30,52,30,53,29,57,29,58,28,60,28,62,26,64,26,65,25,66,25,67,24,68,24,69,25,70,25,70,26,72,28,73,28,74,27,75,27,76,26,78,26,79,27,81,27,83,25,84,25,85,24,89,24,92,21,92,23,95,26" >
<area shape="poly" href="javascript: void(0)" title="Canarias" class="map_islas" coords="296,203,296,256,187,256,187,203" >
<area shape="poly" href="javascript: void(0)" title="Baleares" class="map_islas" coords="298,100,298,145,255,145,253,147,253,164,221,164,221,151,224,148,224,147,232,139,232,138,242,128,242,127,247,122,247,121,254,114,254,113,262,105,262,104,265,101,265,100" >
</map>
<h2>Creado para <a href="http://www.ejemplocodigo.com">www.ejemplocodigo.com</a></h2>
</body>
</html>
</body>
</html>
Demo del ejemplo
Descargar ejemplo
Proyecto Completo #145 (3280 descargas)
.NET
C/C++
CSS3
HTML5
JAVA
Javascript
jQuery
JSON
Moodle
MyBB
PHP
XAMPP