I am curious to learn if there is a way to utilize a service in Angular for creating an OpenLayers map and then passing that service to other components to update the map based on interactions within those components. I have outlined my approach below. Despite successfully logging the creation of the Map object, I am unable to see the map on the screen.
dashboard-map-service
import { Injectable } from '@angular/core';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
@Injectable({
providedIn: 'root'
})
export class DashboardMapService {
map: Map;
constructor() {
this.map = new Map({
view: new View({
center: [16400413.444439406, -5295269.033843756],
zoom: 12,
minZoom: 10,
}),
layers: [
new TileLayer({
source: new OSM(),
}),
]
})
}
returnMap(){
return this.map;
}
setMap(updatedMap: Map) {
this.map = updatedMap;
console.log("map", this.map)
}
}
add-location-component
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { Map } from 'ol';
import { DashboardMapService } from 'src/app/services/dashboard-map.service';
@Component({
selector: 'app-add-location',
templateUrl: './add-location.component.html',
styleUrls: ['./add-location.component.css']
})
export class AddLocationComponent implements OnInit, AfterViewInit {
refmap: Map;
constructor(private dashboardMap: DashboardMapService) {
this.refmap = dashboardMap.returnMap()
this.refmap.setTarget("add-location-map")
this.dashboardMap.setMap(this.refmap)
}
ngOnInit(): void {
}
ngAfterViewInit() {
}
}