Curso sobre creación y desarrollo de mapas – Parte 15: Agregar un layer de Nokia Here

En esta décima quinta parte vamos a mostrar un mapa usando un layer de Nokia Here. Esto surge a raíz de un usuario que esta haciendo el curso y estaba teniendo problemas.

Antes de codificar un ejemplo se necesita tener una cuenta y obtener el app_id y el app_code.

Existen varios planes, pero yo utilizo uno gratuito por 90 días.

Cuenta de Nokia Here
Cuenta de Nokia Here

Ya tendremos el app_id y el app_code.

En la primera parte realizamos un mapa simple, ahora copiamos ese código y nombramos la carpeta por ejemplo_layer_nokia_here

Ejemplo Layer Nokia Here
Ejemplo Layer Nokia Here

Abrimos nuestro editor (en mi caso Atom) y modificamos algunas lineas.

Modificaciones en el index.html
Modificaciones en el index.html

Si se fijan modificamos el título y lo que está en el body. Ahora entramos a nuestro navegador favorito y tecleamos en la barra de direcciones: http://localhost/curso_mapas/ejemplo_layer_nokia_here/

Mapa incial
Mapa incial

Tenemos el mapa inicial!!!

Volvemos a entrar al editor Atom y nos dirigimos al archivo MapaOSM.js.
Agregamos lo siguiente:
// Layer Nokia Here..
L.tileLayer('http://{s}.{base}.maps.cit.api.here.com/maptile/2.1/{type}/{mapID}/{scheme}/{z}/{x}/{y}/{size}/{format}?app_id={app_id}&app_code={app_code}&lg={language}', {
attribution: 'Map © 2016 HERE',
subdomains: '1234',
base: 'base',
type: 'maptile',
scheme: 'normal.day',
app_id: '{app_id}',
app_code: '{app_code}',
mapID: 'newest',
maxZoom: 20,
language: 'eng',
format: 'png8',
size: '256'
}).addTo(mapa);
var marcador = L.marker([latitud, longitud]).addTo(mapa);

Agregar el layer Nokia Here
Agregar el layer Nokia Here

En la imagen de arriba deben de colocar el app_id y el app_code que habían obtenido.

Ahora refrescamos el navegador:

Usando Nokia Here con Leaflet
Usando Nokia Here con Leaflet

Si tienen dudas o comentarios, háganlo.

Curso de mapas
Demo: Ejemplo layer Nokia Here
Código fuente: ejemplo_layer_nokia_here/

(Visited 141 times, 1 visits today)

Comments

comments


Post Relacionados

Be the first to comment

Leave a Reply

Tu dirección de correo no será publicada.


*