Oct 242014
 

HERE Maps es la nueva marca comercial de la plataforma de mapas de Nokia/Navteq, tras su adquisición por Microsoft. En la actualidad, consituye una seria alternativa a Google Maps, ofrece una funcionalidad similar y puede tener un rendimiento superior.

En este artículo explicamos la manera de acceder al API de HERE Maps para insertar un mapa en una página web.

1. Obtener credenciales de uso del API de HERE Maps

Los accesos al api deben ir acompañados de unas credenciales de uso. Para obtenerlas, accedemos a la url http://developer.here.com/get-started:

En esta página, podemos escoger entre tres tipos de licencia:

– Licencia de evaluación: Permite acceder a toda la funcionalidad del API, durante un tiempo limitado a 90 días

– Licencia Base: Permite acceder a la funcionalidad básica, durante un tiempo ilimitado, pero tiene un límite de 10.000 accessos al día. Puede ser utilizada para aplicaciones comerciales.

– Get In Touch: Poniéndose en contacto con el departamento comercial, se puede negociar una licencia comercial adecuada a las necesidades.

Para redactar este artículo, nosotros hemos solicitado una licencia base:

Here-Maps-Functionality

2. Cargar la librería del API de HERE Maps

Comenzamos por añadir a la sección <head> de la página el código que carga la librería del API desde el servidor de here.com:

3. Insertar el elemento contenedor del mapa

En el interior de la sección <body> de la página, añadimos un elemento <div> para contener el mapa

4. Generar el mapa

Una vez que la página se ha cargado completamente, podemos realizar la correspondiente llamada al API para crear un objeto de tipo mapa, y visualizarlo en el elemento ‘divmapa’. Para ello, definimos una función “cargaMapa” en un script, dentro de la sección <head> de la página:

y añadimos al tag <body> un evento “onload” que llama a la función cargaMapa cuando la página se ha cargado completamente:

Y este es el resultado:

Como vemos, el resultado que se obtiene es un mapa estático. Para permitir al usuario interactuar con el mapa, desplazarlo, cambiar el nivel de zoom, etc, deberemos añadir un gestor de eventos, como se explica en el siguiente apartado.

5. Gestión de eventos

Los eventos son las acciones que realiza el usuario sobre el mapa, tales como hacer click sobre el mismo. La funcionalidad que permite al mapa ejecutar acciones en respuesta a estos eventos está implementada en el módulo “mapsjs-events.js”.

Para cargar el módulo, añadimos un elemento <script> en la sección <head> del documento HTML, bajo los elementos que carga los modulos “base” y “service”:

A continuación, en el código Javascript que inserta el mapa en el elemento <div>, añadimos las sentencias:

 

Y con esto conseguimos un mapa que implementa la interactividad por defecto:

  • Al hacer click sobre el mapa y arrastrar el cursor sin soltar, el mapa se desplaza
  • Al hacer doble click con el botón izquierdo del ratón, aumenta la ampliación del mapa (zoom in)
  • Al hacer doble click con el botón derecho del ratón, disminuye la ampliación del mapa (zoom out)

Adicionalmente, podemos añadir nuestros propios manejadores de eventos para sustituir o complementar  la interactividad por defecto.

Por ejemplo, el siguiente código escribe un mensaje en consola cuando se hace click:

Referencias

Artículos relacionados

 Publicado por en 12:08 pm

 Deja un comentario

(requerido)

(requerido)