My initial project incorporates OpenMaps / Openlayers. The specific component I am referring to appears as follows:
import {AfterViewInit, ChangeDetectionStrategy, Component} from '@angular/core';
import {Map, MapBrowserEvent, View} from 'ol';
import {OSM} from "ol/source";
import {fromLonLat, toLonLat} from "ol/proj";
import {defaults, MousePosition} from "ol/control";
import {createStringXY, toStringHDMS} from "ol/coordinate";
import {Tile} from "ol/layer";
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css'],
changeDetection: ChangeDetectionStrategy.Default
})
export class MapComponent implements AfterViewInit {
latitude: number = 52.520008;
longitude: number = 13.404954;
private map?: Map;
view?: View;
_lastClicked: string;
constructor() {
this._lastClicked = 'abc'; // This value remains unchanged in the frontend
}
ngAfterViewInit() {
let osmTile = new Tile({
source: new OSM()
});
this.view = new View({
center: fromLonLat([this.longitude, this.latitude]),
zoom: 8
});
let mousePositionControl = new MousePosition({
coordinateFormat: createStringXY(4),
projection: 'EPSG:4326',
undefinedHTML: ' ',
className: 'custom-mouse-position',
target: document.getElementById('mouse-position') || undefined
});
let controls = defaults({
attributionOptions: {
collapsible: false
}
}).extend([mousePositionControl]);
this.map = new Map({
target: 'map',
controls: controls,
layers: [
osmTile
],
view: this.view
});
this.map.on('click', this.onClick);
}
onClick(evt: MapBrowserEvent) {
var coordinate = evt.coordinate;
this.lastClicked = toStringHDMS(toLonLat(coordinate));
console.log(this.lastClicked + ' was clicked'); // This correctly prints the values
}
get lastClicked(): string {
return this._lastClicked;
}
set lastClicked(value: string) {
this._lastClicked = value;
}
checkCoordinate() {
console.log(this.lastClicked + ' represents the current position'); // This wrongly prints a value
}
}
The HTML template for that component is structured like so:
<h1>There is a map</h1>
{{lastClicked}}
<p>
<button (click)="checkCoordinate()"> Check Coordinate </button>
</p>
<div id="mouse-position"></div>
<div id="map" class="map"></div>
</div>
The end result along with the console output is displayed here:
https://i.sstatic.net/ulXT8.png
Upon the initial click on the map, the correct output is shown in the console, while the top value still reads 'abc':
https://i.sstatic.net/zkuLc.png
(Debugging verifies that the coordinates are indeed stored within the property lastChecked.)
Subsequently, after clicking the 'Check Coordinate' button, the original value ('abc') is oddly printed rather than the updated one.
https://i.sstatic.net/nKpKe.png
(Debugging also confirms that the old value persists in the lastChecked property.)
I have a strong sense that there is an element missing from the Angular tutorials and resources I utilized during my learning process. Any assistance in clarifying this issue would be greatly appreciated.
EDIT:
Further investigation led me to identify the following root cause/problem: https://i.sstatic.net/nNl0X.png It appears that "this" points to the ol/Map instance, not my primary component (which I named MapComponent).
Although this discovery does not provide a solution, it brings me closer to resolving the issue.