Cómo Crear un mapa de Isócrona con la API de HERE


En este tutorial veremos cómo representar una Isócrona con la API de HERE.


¿Qué es una isócrona?

Una isócrona es polígono formado por todos los puntos que están a la misma distancia o que se recorren en el mismo tiempo de viaje.

A continuación, os dejo el código completo para implementar un mapa de Isócrona con la API de 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 charset="utf-8" type="text/javascript">
	    //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: 8,
	            center: { lng:2.174367, lat: 41.403678 }
	        });

	    var routingParams = {
	      'mode': 'fastest;car;',
	      'start': 'geo!41.403678,2.174367',
	      'range': '300',
	      'rangetype': 'time'
	    };

	    // Define a callback function to process the isoline response.
	    var onResult = function(result) {
	    var center = new H.geo.Point(
	      result.response.center.latitude,
	      result.response.center.longitude),
	    isolineCoords = result.response.isoline[0].component[0].shape,
	    linestring = new H.geo.LineString(),
	    isolinePolygon,
	    isolineCenter;

	    // Add the returned isoline coordinates to a linestring:
	    isolineCoords.forEach(function(coords) {
	    linestring.pushLatLngAlt.apply(linestring, coords.split(','));
	    });

	    // Create a polygon and a marker representing the isoline:
	    isolinePolygon = new H.map.Polygon(linestring);
	    isolineCenter = new H.map.Marker(center);

	    // Add the polygon and marker to the map:
	    map.addObjects([isolineCenter, isolinePolygon]);

	    // Center and zoom the map so that the whole isoline polygon is
	    // in the viewport:
	    map.getViewModel().setLookAtData({bounds: isolinePolygon.getBoundingBox()});
	    };

	    // Get an instance of the routing service:
	    var router = platform.getRoutingService();

	    // Call the Routing API to calculate an isoline:
	    router.calculateIsoline(
	      routingParams,
	      onResult,
	      function(error) {
	      alert(error.message);
	      }
	    );

	    // 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 para representar isócronas con la API de HERE:

Las partes esenciales son las mismas que explicamos en nuestro tutorial de cómo crear un mapa básico con la API 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, esta parte es común y debemos hacerla siempre que queramos desarrollar un mapa basado en la API de HERE:

						
<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>
						
					

En este tutorial 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 y que también es común en cualquier mapa de HERE.

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

Nos vamos a fijar ahora en la parte de script:

La APIKEY os la proporcionará HERE para obtenerla solo es necesario registrarse de una manera gratuita en la web de desarrolladores de HERE.

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

Con el siguiente código vamos a añadir las capas por defecto que trae la API de HERE.

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();
						
					

A continuación, vamos a definir la escala de visualización y el centro del mapa que a su vez será desde donde se empiece a calcular nuestra isócrona, esta vez vamos a irnos a la Basílica de la Sagrada Familia en Barcelona.

						
// Instantiate the map:
var map = new H.Map(
    document.getElementById('map'),
    defaultLayers.vector.normal.map,
    {
        zoom: 8,
        center: { lng:2.174367, lat: 41.403678 }
    });
						
					

Especificamos el tiempo como 'range': en segundos, por ejemplo, si queremos una Isócrona de 5 min lo pasamos a segundos que serían 300 segundos.

Especificamos 'rangetype' como ‘time' para calcular una isócrona basada en tiempo.

En esta parte debemos introducir las coordenadas del centro de la Isócrona.

						
var routingParams = {
  'mode': 'fastest;car;',
  'geo!41.403678,2.174367',
  'range': '300',
  'rangetype': 'time'
};
						
					

Definimos la función callback que va a procesar la isócrona.

¿Qué es un Callback?

Un callback son como su propio nombre, en inglés, indica, llamadas de vuelta, es una función que recibe como argumento otra función y la ejecuta.

						
var onResult = function(result) {
var center = new H.geo.Point(
  result.response.center.latitude,
  result.response.center.longitude),
isolineCoords = result.response.isoline[0].component[0].shape,
linestring = new H.geo.LineString(),
isolinePolygon,
isolineCenter;
						
					

Transformamos las coordenadas calculadas a una cadena "Linestring".

¿Qué es un Linestring

LineString es un objeto unidimensional que representa una secuencia de puntos y los segmentos de línea que los conectan.

						
// Add the returned isoline coordinates to a linestring:
isolineCoords.forEach(function(coords) {
linestring.pushLatLngAlt.apply(linestring, coords.split(','));
});
						
					

Añadimos el polígono y el marcador a nuestro mapa.

						
// Add the polygon and marker to the map:
map.addObjects([isolineCenter, isolinePolygon]);
						
					

Centramos el mapa en la extensión del polígono generado (BoundingBox).

						
// Center and zoom the map so that the whole isoline polygon is
// in the viewport:
map.getViewModel().setLookAtData({bounds: isolinePolygon.getBoundingBox()});
};
						
					

Iniciamos el servicio de enrutamiento.

						
// Get an instance of the routing service:
var router = platform.getRoutingService();
						
					

Llamamos a la API de HERE que nos va a calcular la isócrona.

						
// Call the Routing API to calculate an isoline:
router.calculateIsoline(
  routingParams,
  onResult,
  function(error) {
  alert(error.message);
  }
);
						
					

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

						
var ui = H.ui.UI.createDefault(map, defaultLayers, 'es-ES');
						
					

Y ya tenemos listo nuestro mapa de HERE en el que hemos calculado nuestra isócrona, os invito a cambiar las coordenadas y los tiempos.

¿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