jQvmap
JQVMap es un plugin de jQuery que hace mapas vectoriales. Utiliza tamaño variable Scalable Vector Graphics (SVG) para navegadores modernos como Firefox, Safari, Chrome, Opera e Internet Explorer 9. Compatibilidad con sistemas existentes para versiones anteriores de Internet Explorer 6.8 se proporciona a través de VML.
Es muy sencillo añadir este elegante mapa para tu Web. Tan solo debes incluir los estilos y scripts necesarios en el <head>:
<link href="../jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="../jqvmap/jquery.vmap.js" type="text/javascript"></script>
<script src="../jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script>
<script src="../jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#333333',
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: true,
values: sample_data,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
onRegionClick: function(element, code, region)
{
var message = 'You clicked "'
+ region
+ '" which has the code: '
+ code.toUpperCase();
alert(message);
},
onRegionOver: function(element, code, region)
{
/*var message = 'You estas encima de "'
+ region
+ '" which has the code: '
+ code.toUpperCase();
alert(message);*/
}
});
});
</script>
Tiene muchos parámetros para configurar y además se puede programar mediante jQuery lo que pasa cuando pasas el ratón por encima de un país o cuando haces click entre otras opciones.
En la página oficial del script tienes una amplia documentación además de poder descargarlo.
Dentro del <body> deberemos incluir el contenedor que tiene el mapa con ancho y alto personalizable.
<div id="vmap" style="width: 600px; height: 400px;"></div>
El script también incorpora un zoom del mapa que lo hace aún más atractivo.
Ver ejemplo en funcionamiento
Autor
¿Buscas trabajo de programador?
75 artículos que te podrían interesar
Ver más sobre
Deja una respuesta