Cómo crear un mapa básico con la API de HERE


En este tutorial veremos cómo crear un mapa básico con la API de HERE.


¿Qué es HERE?

HERE es un servicio de mapeo web y navegación, operado por Here Technologies. Originalmente desarrollada por Nokia como HERE Maps.

HERE proporciona los datos internamente, lo que incluye vistas satelitales, datos de tráfico y otros servicios de ubicación, la frecuencia de actualización de los mapas es cada dos o tres meses.

Está diseñada para entornos compatibles con WebGL y HTML5 que hace responsive la representación en dispositivos móviles y escritorios. Que además admite muchos casos de uso, entornos de desarrollo y navegadores.

A continuación, os dejo el código completo para implementar un mapa básico con HERE:

						
<html>
  <head>
      <meta name="viewport" content="initial-scale=1.0,width=device-width" />
        <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <style>
	  body { margin:0; padding:0; }
    	#map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" charset="utf-8">
    //Initialize the Platform object:
    var platform = new H.service.Platform({
        'apikey': 'Tu apikey de HERE'
    });

    // Get the default map types from the Platform object:
    var defaultLayers = platform.createDefaultLayers();

    // Instantiate the map:
    var map = new H.Map(
        document.getElementById('map'),
        defaultLayers.vector.normal.map,
        {
            zoom: 15,
            center: { lng:-0.878873, lat: 41.656434 }
        });

    // Create the default UI:
    var ui = H.ui.UI.createDefault(map, defaultLayers, 'es-ES');
</script>
  </body>
</html>
						

					

Si queréis saber un poco más sobre él código del mapa básico de HERE:

El primer paso es cargar las bibliotecas JavaScript en el head y añadir los estilos CSS, para ello lo cargaremos a través de un CDN:

						
<head>
  <meta name="viewport" content="initial-scale=1.0,width=device-width" />
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
<style>
  body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
						
					

Nosotros estamos utilizando la Versión 3.1.

La tercera parte del código y una vez dentro del cuerpo o body, corresponde al contenedor, veréis que está directamente relacionado con los estilos (#map), ya que tiene un identificador id=map.

						
<div id="map"></div>
						
					

Si nos fijamos ahora en la parte del Script veremos varias partes imprescindibles, la primera es la APIKEY que es única para cada usuario de HERE.

						
//Initialize the Platform object:
var platform = new H.service.Platform({
    'apikey': 'Tu apikey de HERE'
});
						
					

Para obtenerla solo es necesario registrarse de una manera gratuita en la web de desarrolladores de HERE, el plan gratuito que ofrecen es suficiente para aplicaciones sencillas y con hasta un tráfico de 250 K al mes.

En la segunda parte vamos a añadir las capas por defecto que trae la API de HERE:

  • Mapa Base
  • Satélite
  • Estado del tráfico
  • Mostrar incidentes de tráfico

Para ello utilizaremos el método createDefaultLayers()definido en la clase Platform.

						
// Get the default map types from the Platform object:
var defaultLayers = platform.createDefaultLayers();
						
					

En la tercera parte vamos a definir la escala de visualización, en nuestro caso 15 y el centro del mapa en coordenadas geográficas en grados decimales como longitud (lng) y latitud (lat), nosotros hemos puesto las coordenadas de Zaragoza (-0.878873, 41.656434).

						
// Instantiate the map:
var map = new H.Map(
    document.getElementById('map'),
    defaultLayers.vector.normal.map,
    {
        zoom: 15,
        center: { lng:-0.878873, lat: 41.656434 }
    });
						
					

La parte final es el idioma de las capas de visualización, en nuestro caso le obligaremos a que sea en castellano 'es-ES'.

						
// Create the default UI:
var ui = H.ui.UI.createDefault(map, defaultLayers, 'es-ES');
						
					

Modificando mínimamente este código podemos hacer mapas muy atractivos con la API de mapad de HERE, rápidos, sencillos y de una manera gratuita.

¿Alguna pregunta? ¿Quieres realizar sinergias o colaboraciones? ¿Te gustaría enviarnos feedback sobre el tutorial? No dudes en contactar a jgabas@geopois.com.



Sobre el Autor


Javier Gabás Jiménez

Soy un apasionado de los mapas y la infraestructura de datos espaciales, me divierto mucho buscando formas de comprender y presentar datos visualmente, así como entender la programación que hay debajo. Ingeniero en geomática y topografía por la Universidad Politécnica de Madrid, cuando no estoy trabajando o estudiando, estaré viajando y disfrutando de la vida junto a mi pareja.



Formamos parte del programa de emprendimiento #17actuaupm