Angular y OpenLayers

Cualquier aplicación o proyecto web de la actualidad, al escalar, se encontrará con la problemática de los mapas. Y se trata de una realidad, en un mundo globalizado una empresa competitiva tiene la necesidad de mostrar mapas, ya sea de forma pública o privada. Cosas simples como poder ver la ubicación de un cliente en el mapa, hasta cosas de mayor complejidad como geolocalizar vendedores o proveedores.

Necesitamos mapas, pero Google ha copado de forma muy ingeniosa el mercado. El problema es que hace poco menos de 2 años, el uso de la API de Google Maps solo puede realizarse mediante un API Key. Seguramente ya lo sepan, el API Key no es gratuito, y si tenemos muchos usuarios no es barato. En la versión 9 de Angular salió un Componente muy interesante que integra Google Maps, pero seguimos necesitando dicha API Key, y es una lástima porque ofrece una gran comodidad. Por supuesto, Google tiene el derecho de cobrar por sus productos lo que quiera, no obstante es normal pensar en alternativas para ciertas implementaciones. En nuestro caso, como comentamos aquella vez que explicamos el desarrollo de GeoEcon, OpenLayers ha sido siempre un gran aliado. ¿Es posible implementar OpenLayers en Angular a fin de tener algo como el Componente Google Maps? Les ahorro la respuesta dejándoles un repositorio de creación propia: https://github.com/ibuioli/ngOpenLayers

Aún así, para los más curiosos, explicaré un poco como se hace esta integración (la cual considero todavía incompleta y en constante desarrollo, por lo tanto no la tomen como algo definitivo). Y al final también les dejo un video explicando dicha integración.

Integrar OpenLayers en Angular

¿Cómo hacemos entonces para que OpenLayers se integre a Angular? Es bastante sencillo, vamos a instalar por NPM OpenLayers y sus types:

npm i ol
npm i @types/ol

Y lo que vamos a necesitar si o si en nuestro proyecto es el CSS base de OL, para eso en el index.html vamos a importarnos esto directamente en el HEAD:

<link rel="stylesheet" href="https://openlayers.org/en/v6.1.1/css/ol.css" type="text/css">

A partir de aquí vamos a necesitar importarnos lo que queramos usar, lo importante son los objetos Map, TileLayer, OSM, View y Controls, para así crear el siguiente Objeto:

map = new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: Proj.fromLonLat([0, 0]),
        zoom: 10
      }),
      controls: defaultControls({attribution: false, zoom: false}).extend([])
    });

Esto es todo de OpenLayers, la integración con Angular está realizada, pero explico brevemente que hacemos acá. Creamos un nuevo objeto que pertenece a la clase Map de OpenLayers, le asignamos de target el ID de un div (donde se renderizará el mapa); al atributo layers le asignamos la capa base de mapa, la cual será una TileLayer que lleva de source un OSM (OpenStreet Map); luego configuramos la vista, es decir que se va a mostrar del mapa, para esto creamos una nueva View la cual se le configura el center (que para que sea Latitud y Longitud estoy usando la función fromLonLat de OL) y el zoom; finalmente configuro los controles para que no tenga ninguno (por defecto viene con el control de Zoom y la Atribución). Vean el video, explico esta integración con un poco más de detalle y les recomiendo el repositorio, ya que incluí todo esto en formato de Módulo de Angular, con lo cual hay una serie de componentes muy cómodos para aplicarlo (junto con Marcadores y Controles). Instrucciones y ejemplos en el repositorio.