En este post quiero hablar un poco de un servicio de mapas disponible en la nube de Microsoft, llamado Azure Maps.

Azure Maps es un conjunto de servicios geoespaciales que ofrece mapas que pueden ser usados en aplicaciones web y móviles.

Sus precios los podemos ver aqui -> https://azure.microsoft.com/es-es/pricing/details/azure-maps/

¿Qué ofrece?

Estos servicios están disponibles tanto con un SDK para web como un SDK para Android.

Para poder hacer uso de este servicio, es necesario disponer de una suscripción de Azure, donde poder crear el servicio desde el Marketplace.

Estos servicios están disponibles actualmente en todos los países menos en China y Corea del Sur.

Ejemplo de uso

Vamos a ver un ejemplo práctico, de un mapa incrustado en una página HTML, que muestra las gasolineras mas cercanas a un punto geográfico.

Para empezar, como hemos dicho, necesitamos una suscripción de Azure y crear el servicio de Azure Maps:

Una vez creado, en la opción de authentication tendremos nuestra subscriptionKey que necesitaremos para poder usar los mapas:

Ahora creamos un archivo html, en el que podemos identificar varias partes:

  • En la cabecera tendremos que meter las referencias a los estilos y js de Azure Maps

  • El body con un div para alojar el mapa

  • La parte de javascript, que la vamos a comentar paso a paso.

Código Javascript

Tenemos una primera parte que es el constructor del mapa, en el que indicaremos en que punto queremos centrar el mapa (longitud y latitud), el idioma, el zoom, etc.

Luego una región para habilitar controles de tipo de mapa, zoom, inclinación, rotación, etc. Podemos ver el resultado en las siguientes imágenes:

Como parte final, vamos a añadir una llamada a la API de búsqueda para buscar las gasolineras mas cercanas a nuestro punto en el que hemos centrado el mapa, vamos a mostrar los puntos y también vamos a añadir un evento para que nos muestre la info de la gasolinera al poner el ratón sobre el punto.

Quedando el mapa final de esta forma:

Os dejo el código completo de la página HTML en mi repositorio de Github.

En próximos posts, veremos otras integraciones con Azure Maps.

Procesando…
¡Lo lograste! Ya estás en la lista.
Última modificación: mayo 15, 2020

Autor

Comentarios

Comenta o responde a los comentarios

Tu dirección de correo no será publicada.