TomTom Basemap


En este tutorial veremos cómo crear un mapa básico con TomTom.


Antes de nada, vamos a saber un poco más sobre esta empresa especializada en sistemas de navegación GPS.

Dispone de una API para desarrolladores especializada en tecnología de mapas en tiempo real y datos de tráfico de TomTom, con cobertura global y funcionalidades avanzadas.

Para trabajar con esta API lo primero que necesitamos es una clave de la API:

Podemos seguir los pasos que nos especifican, os lo voy a resumir para haceros la tarea más sencilla:

  1. Registrarnos en TomTom Developer.
  2. Nos llegará un correo, aceptamos para activar nuestra cuenta.
  3. Nos dirigimos al menú superior derecha y hacemos clic en el recuadro rojo MY DASHBOARD.
  4. Veremos en la parte central en rojo My First API Key o nuestra primera API Key.

Una vez ya tenemos la clave de la API solo tenemos que remplazar en el siguiente código y tenemos lista nuestro mapa básico de TomTom:

						
<!DOCTYPE html>
<meta charset="utf-8" />
  <head>
	<link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.40.1/maps/maps.css'>
	<script src='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.40.1/maps/maps-web.min.js'></script>
    <style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
  </head>
  <body>
   <div id='map' class='map'></div>
    <script>
        var map = tt.map({
            key: 'Tu Clave de TomTom',
            container: 'map',
            style: 'tomtom://vector/1/basic-main',
            center: [-0.12634, 51.50276],
            zoom: 10
        });
        map.addControl(new tt.FullscreenControl());
        map.addControl(new tt.NavigationControl());
    </script>
  </body> 
 </html>
						
					

Si desgranamos un poco el código para entenderlo mejor, por un lado, llamamos al script y css necesarios para que todo funcione a través del cdn de TomTom:

						

<link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.40.1/maps/maps.css'>
<script src='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.40.1/maps/maps-web.min.js'></script>
						
					

A continuación, tenemos los estilos del mapa, en este caso para que lo veamos a pantalla completa:

						
<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
						
					

Si nos centramos en la parte del body, llamaremos al mapa de la siguiente manera:

						
<div id='map' class='map'></div>
						
					

Y finalmente la parte del script, donde incluiremos la clave de la API, el estilo del mapa, en este caso hemos dejado el que tiene TomTom por defecto, las coordenadas del mapa y el zoom de visualización.

						
<script>
    var map = tt.map({
        key: 'Tu Clave de TomTom',
        container: 'map',
        style: 'tomtom://vector/1/basic-main',
        center: [-0.12634, 51.50276],
        zoom: 10
    });
    map.addControl(new tt.FullscreenControl());
    map.addControl(new tt.NavigationControl());
</script>
						
					

Y hasta aquí este breve tutorial para empezar a cogerle el truco a esta fantástica API de mapas que nos proporciona TomTom.

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


¿Eres desarrollador? Únete a la red