A little green in the world of angular (and javascript in general). Here's some code I'm working with:
import {Injectable, OnInit} from '@angular/core';
import OlMap from 'ol/map';
import OSM from 'ol/source/osm'
import OlXYZ from 'ol/source/xyz';
import OlTileLayer from 'ol/layer/tile';
import OlView from 'ol/view';
import OlProj from 'ol/proj';
@Injectable()
export class MapService {
public map: OlMap;
private _source: OlXYZ;
private _layer: OlTileLayer;
private _view: OlView;
constructor() { }
/**
* Function initializes the map
* @returns {} Object of map
*/
initMap() {
this._source = new OSM({
});
this._layer = new OlTileLayer({
source: this._source
});
this._view = new OlView({
center: OlProj.fromLonLat([6.661594, 50.433237]),
zoom: 10,
});
this.map = new OlMap({
target: 'map',
layers: [this._layer],
view: this._view
});
this.map.on("moveend", function () {
console.log(this.map);
})
}
}
The issue lies within the final line. I want to log the map object on moveend event (triggered when a user drags and releases the map), but for some reason, 'this.map' appears as undefined in the console. Despite this, other method calls on 'this.map' work just fine upon mouse button release.
I suspect it may be Javascript-related, possibly related to local or global object references, etc.
Any assistance would be greatly appreciated.
NOTE: The initMap() method is invoked in the map component like so:
ngOnInit() {
this.map = this.mapService.initMap();
console.log(this.mapService.map);
}
(The console.log returns the expected '_ol_map' object without any issues)