jQuery.ZoomMap - Mapa interactivo y con zoom.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Si necesitas para tu aplicación web o página de internet, poder mostrar un mapa y que el usuario pueda hacer zoom a un área específica del mismo, este script que utiliza la librería jQuery te permite hacerlo de una forma fácil.

No es necesario ser experto para implementarlo el ejemplo básico, con mínimos conocimientos de diseño web, ya podrás colocar uno o varios mapas con opción de zoom. Además puedes apoyarte en el ejemplo que se incluye aquí para crear tu propio mapa.

Puede ser útil para varios tipos de sitios web: Sitios de turismo, inmobiliarias, de información general entre otros.

A continuación puedes ver mas información de cómo funciona.

Mas información sobre el programa.

Indice - Contenido.

  1. Ver el mapa en funcionamiento.
  2. Limitaciones del script.
  3. Instrucciones de instalación.

 

1 - Ver el mapa en funcionamiento.

Antes que nada, puedes ver las posibilidades del plugin y las diferentes implementaciones en estos 3 ejemplos que utilizan este mismo script.

Puedes hacer clic en la imagen para ir al sitio y ver el mapa interactivo en funcionamiento. Nota: Si los enlaces a estos 3 ejemplos ya no se encuentran disponibles, de todas formas puedes ver el ejemplo que se incluye en el archivo de descarga haciendo clic clic aquí.

Este es el ejemplo que se incluye con el plugin. ( Abrir el archivo example.html). El área más oscura del mapa es donde el visitante puede hacer clic para ampliarlo.

2 - Limitaciones del script.

Este script o ejemplo fue desarrollado originalmente para un proyecto con requisitos muy específicos.

Ese código luego se volcado a un plugin para que no sea tan genérico y pueda ser implementado para varios usos. De todas formas, algunas de las limitaciones actuales que tiene son:

  • Los datos se deben definir en la instalación del Plugin. Lo ideal sería que todos los datos requeridos se almacenan en las páginas html.
  • API - Cómo se encuentra el plugin por el momento, es imposible interactuar mediante programación con el mapa una vez instalado. Con el tiempo tendrá un API simple para ayudar en la navegación y realizar otras manipulaciones.

3 - Instrucciones de instalación y uso.

Hay cuatro componentes principales necesarios para hacer funcionar el plugin:

  • Las imágenes de fondo.
  • Enlaces a páginas que contienen datos de html en el formato correcto.
  • Un poco de código CSS para el estilo
  • Finalmente, la llamada al plugin.

A continuación están las instrucciones en cada uno.

Imágenes de fondo.

  • Todos deben ser del mismo tamaño, ya que la Sub-región del mapa de fondo que es la utilizada para mostrar cuando se hace zoom, debe rellenar el área completa del mapa.
  • Las imágenes deben estar alineadas. Si no se alinean correctamente, algunos de los efectos de zoom se perderán.

Se pueden ver las imágenes utilizadas en el ejemplo. Son dos: campus.jpg para el mapa y quads.png para el área del zoom.

En la página web, se deben importar, dentro de la sección HEAD, los siguientes archivos:

  • jquery-1.3.2.min.js: La librería jQuery.
  • zoommap.js: Plugin de jQuery para el mapa.
  • setup.js. archivo javascript que contiene la configuración de las opciones para crear el mapa: duración del Zoom, ancho y alto del mapa etc ..
  • zoommap.css: La hoja de estilos.

Luego, dentro de la página, en la sección body, se define un div con el siguiente ID ( id="map ) para incrustar el mapa y en el el archivo setup, toda la información para configurarlo: Path de las imágenes, dimensiones etc ...

Por ejemplo, aquí se muestra el archivo javascript setup.js, con una configuración mínima:

$('#map').zoommap({
width: '500px',
height: '580px',
blankImage: 'images/blank.gif',
map: {
// Información del mapa.
}
});

Nota: Para ver la descripción completa de los parámetros del archivo de configuración, como también la hoja de estilos y otros ajustes, leer el archivo de ayuda del autor llamado writeup.html.

También, en el ejemplo que se incluye en el archivo zip, sólo se muestra el ejemplo básico, es decir un mapa al cual se le puede hacer zoom a una región específica.

En los otros ejemplos listados más arriba, se puede ver cómo implementar además del zoom, un diálogo o ventana popup de información, por ejemplo como se muestra en esta imagen.


Requerimientos de instalación y uso.

Requiere : Únicamente la Librería jQuery

Compatible con la mayoría de los navegadores web.

  • Chrome.
  • FireFox.
  • Opera
  • Internet explorer.
  • Otros.

Videos tutoriales.

No hay video tutoriales para mostrar.

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
--
Licencia:
Gratis
Versión:
--
Idioma:
Inglés
Programa actualizado:


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: