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.

npm install --save @ types/googlemaps

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:

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 Universal

En Angular Universal el objetivo consiste en crear un Server Side Rendering SSR para ser detectada por Google y mejorar nuestro SEO. (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.

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.