OpenStreetMap en Angular

Si has llegado hasta aquí, significa que necesitas agregar un mapa en tu web Angular. La forma más sencilla para lograr tu objetivo es utilizar Google Maps.

Pero no lo recomiendo. Su uso gratuito es limitado y Google únicamente ofrece un descuento mensual de $200 que, en caso de superarlo, deberás abonar. Además, para obtener la clave de la API os pedirán datos de facturación.

Mi recomendación es utilizar Leaflet con OpenStreetMap. OpenStreetMap es una fuente de datos abierta y Leaflet permite crear mapas interactivos con poco peso. A continuación os dejo un ejemplo para que podáis interactuar con él:

Por qué Leaflet encaja bien en Angular

Leaflet mantiene la capa de mapa ligera, evita depender obligatoriamente de una cuenta de facturación y funciona bien con teselas de OpenStreetMap. En proyectos Angular SSR, la clave es cargar el código del mapa solo en navegador después de que SSR haya entregado el contenido del artículo.

Después de esta base, la continuación natural es el artículo sobre mapas multicapa en Angular con WMS y geolocalización. Mapas multicapa en Angular .

Instalación.

El primer paso es la instalación de la librería:

Y añadir en el fichero angular.json la siguiente información:

Una vez importado, creamos un componente con la siguiente vista:

Fichero del ejemplo: component.scss

.map-container {
  width: 100%;
  margin: 1.5rem 0;
}

.map-frame {
  border: 2px solid black;
  min-height: 610px;
  overflow: hidden;
}

#map {
  height: 610px;
  width: 100%;
}

Fichero del ejemplo: component.ts

Os podéis descargar el código en el siguiente repositorio: https://github.com/al118345/OpenStreetMapAngular12 y el siguiente video: https://www.youtube.com/watch?v=2zYe5fSa2ZU:

Instalación en Angular SSR

En proyectos Angular actuales el objetivo consiste en tener renderizado en servidor para que Google reciba HTML indexable. Los ejemplos antiguos suelen llamarlo Angular Universal; en proyectos nuevos lo normal es hablar de Angular SSR. (https://1938.com.es/app-seo-angular)

En estas circunstancias la configuración cambia y se deben aplicar las siguientes implementaciones.

Importante Importante: entendemos que el punto de instalación del proyecto ya lo has realizado y partimos desde ese punto.

Notas de producción para mapas en Angular

Un mapa puede parecer sencillo en desarrollo y aun así crear problemas en producción. Las decisiones importantes son dónde se carga la librería, cuántas peticiones externas de teselas se hacen y qué alternativa existe si el mapa no llega a inicializarse.

Cargar Leaflet solo en navegador para evitar errores SSR con window o document.
Mantener texto, encabezados y enlaces fuera del mapa para que el HTML SSR siga siendo indexable.
Definir una altura estable del mapa para evitar saltos de layout mientras cargan las teselas.
Usar la atribución correctamente y respetar las políticas del proveedor de teselas.
Añadir una alternativa textual o un resumen estático de ubicación para usuarios y rastreadores sin JavaScript.

LeafletService

Crearemos un servicio nuevo que nos permita obtener, en el caso de ser un usuario navegador y no la araña de Google, la información de la web.

Comando

fichero: service/leaflet.service.ts

A continuación modificamos el component.ts con la siguiente información:

Eliminamos los siguientes imports:

Añadimos el servicio:

Y modificamos el fichero tsconfig.app.json con la siguiente configuración:

Os podéis descargar el código en el siguiente repositorio: https://github.com/al118345/OpenStreetMap_Angular13_Universal

Si deseáis ampliar conocimientos, os invito a visitar la continuación del artículo en el siguiente enlace: https://1938.com.es/ejemplo-maps-multicapa. En este enlace podéis aprender a geolocalizar usuarios y utilizar mapas multicapa.