Openlayers
Creando las directiva para el mapaCreando la directiva para el marcadorCreando la directiva para el buscador

<< Facebook Auth Animaciones >>

Aunque existe una librería de Angular para Openlayers (ng-openlayers), es bastante reciente y no es oficial. En cualquier caso, y como no existe la versión para Angular 19 en el momento de escribir esto, vamos a ver como sería integrar una funcionalidad básica en Angular utilizando la librería de JavaScript por debajo.

Empezaremos instalando laa libreríaa necesarias:

npm i ol  @geoapify/geocoder-autocomplete

A continuación importaremos el CSS de las librerías, ya sea en el archivo angular.json o en styles.css.

@import "ol/ol.css";
@import "@geoapify/geocoder-autocomplete/styles/minimal.css";

.autocomplete-container {
  position: relative;
}

//...

Creando las directiva para el mapa

Vamos a crear una directiva para el mapa, pero en lugar de un selector de atributo [olMap], tendrá un selector de elemento ol-map. Al igual que un componente puede tener un selector de atributo, una directiva puede ser un elemento. La principal diferencia es que un componente gestiona una plantilla, mientras que la directiva no, solo gestiona el elemento sobre el cual actúa, y en este caso no necesitamos plantilla. Cargaremos el mapa dentro del elemento ol-map.

ng g d ol-maps/ol-map

import { afterNextRender, afterRenderEffect, Directive, ElementRef, inject, input } from '@angular/core';
import { View, Map, Feature } from "ol";
import { OSM, Vector as VectorSource } from "ol/source";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { useGeographic } from 'ol/proj';
import { Geometry } from 'ol/geom';


@Directive({
  selector: 'ol-map',
})
export class OlMapDirective {
  #elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
  coordinates = input.required<[number, number]>();
  zoom = input(16);

  #map!: Map;
  #view!: View;
  #vectorLayer!: VectorLayer<VectorSource>;

  get view() {
    return this.#view;
  }

  get vectorLayer() {
    return this.#vectorLayer;
  }

  constructor() {
    afterNextRender(() => { // Ejecutamos solo en cliente (SSR)
      useGeographic();

      this.#view = new View({
        center: this.coordinates(),
        zoom: this.zoom(),
      });

      this.#map = new Map({
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        target: this.#elementRef.nativeElement,
        view: this.#view,
      });

      this.#vectorLayer = new VectorLayer<VectorSource>({
        map: this.#map,
        source: new VectorSource<Feature<Geometry>>({
          features: [],
        }),
      });
    });

    afterRenderEffect(() => { // Cada vez que cambien las coordenadas
      this.#view.setCenter(this.coordinates());
    });
  }

}

Como se puede observar, inyectamos la referencia al elemento de la directiva (ol-map) y recibimos las coordenadas y el zoom iniciales como parámetros de entrada. En el constructor creamos el mapa junto a la vista y el objeto VectorLayer asociado (para poder dibujar marcadores por ejemplo).

Además, cada vez que las coordenadas cambian, centramos el mapa. Esto lo hacemos con una función afterRenderEffect en lugar de effect, porque es lo recomendado con librerías que no están integradas con Angular y manipulan del DOM.

Así crearíamos el mapa en el componente correspondiente (sin olvidar el CSS para darle tamaño al mapa):

<ol-map [coordinates]="coordinates()"></ol-map>

Creando la directiva para el marcador

A continuación vamos a crear una directiva para el marcador, que tendrá también un selector de elemento y pondremos dentro del elemento de mapa. Los componentes y directivas pueden a su vez inyectar otros componentes y directivas dentro de las cuales estén.

ng g d ol-maps/ol-marker

import { afterNextRender, afterRenderEffect, Directive, inject, input } from "@angular/core";
import { Feature } from "ol";
import { Point } from "ol/geom";
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style.js";
import { OlMapDirective } from "./ol-map.directive";

@Directive({
  selector: 'ol-marker',
})
export class OlMarkerDirective {
  #olMap = inject(OlMapDirective); // Inyectamos Directiva del mapa (padre)
  coordinates = input.required<[number, number]>();
  color = input('red');
  fill = input('white');
  #marker!: Feature;

  constructor() {
    afterNextRender(() => {
      this.#marker = new Feature({
        geometry: new Point(this.coordinates()),
      });
      this.#marker.setStyle(
        new Style({
          image: new CircleStyle({
            radius: 9,
            fill: new Fill({
              color: this.color(),
            }),
            stroke: new Stroke({
              color: this.fill(),
              width: 3,
            }),
          }),
        })
      );

      this.#olMap.vectorLayer.getSource()?.addFeature(this.#marker);
    });

    afterRenderEffect(() => { // Cada vez que cambien las coordenadas
      this.#marker.setGeometry(new Point(this.coordinates()))
    });
  }
}

Como se puede observar, tanto las coordenadas, como los colores son señales de entrada. En cualquier caso solo reaccionamos (afterNextRender) a los cambios de valor en las coordenadas. Pero se podrían crear otra función similar para gestionar el cambio de color si quisiéramos.

Así quedaría un mapa con marcador en el componente donde queramos mostrarlo (se pueden añadir tantos marcadores como se quiera):

<ol-map [coordinates]="coordinates()">
  <ol-marker [coordinates]="coordinates()"></ol-marker>
</ol-map>

Creando la directiva para el buscador

Por último, crearemos una directiva para asociar un campo de búsqueda al mapa y que nos autocomplete. Utilizaremos la librería de @geoapify que hemos instalado antes.

ng g d ol-maps/ga-autocomplete

ng g i ol-maps/search-result

import { afterNextRender, Directive, ElementRef, inject, output } from '@angular/core';
import { GeocoderAutocomplete } from "@geoapify/geocoder-autocomplete";
import { SearchResult } from './search-result';

@Directive({
  selector: 'ga-autocomplete',
  host: {
    'style': `
      z-index: 1;
      display: block;
      position: absolute;
      top: 20px;
      right: 20px;
      width: 50%;
      background-color: white;
    `
  }
})
export class GaAutocompleteDirective {
  #elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
  #autoComplete!: GeocoderAutocomplete;
  locationChange = output<SearchResult>();

  constructor() {
    afterNextRender(() => {
      this.#autoComplete = new GeocoderAutocomplete(
        this.#elementRef.nativeElement,
        "42c7710f83bc41698b841fec7a3b5d2d",
        { lang: "es" , debounceDelay: 600}
      );

      this.#autoComplete.on("select", (location) => {
        this.locationChange.emit({
          coordinates: location.geometry.coordinates,
          address: location.properties.formatted
        });
      });
    });
  }
}

Esta directiva tendrá un parámetro de salida (output) para devolver el resultado de la búsqueda, tanto la dirección como las coordenadas seleccionadas.

Finalmente, así quedaría un mapa completo, con función de búsqueda incluida:

<ol-map [coordinates]="coordinates()">
  <ga-autocomplete (locationChange)="changePlace($event)"></ga-autocomplete>
  <ol-marker [coordinates]="coordinates()"></ol-marker>
</ol-map>

<< Facebook Auth Animaciones >>