Currently, I am in the process of developing a straightforward app using OpenLayers. For this project, I am utilizing Ionic 3 along with version "4.6.5" of OpenLayers as specified in my package.json: "openlayers": "^4.6.5",
Here is an overview of my page.ts file:
import { Component, ViewChild, Renderer, ElementRef } from '@angular/core';
import { IonicPage,Platform } from 'ionic-angular';
import OlMap from 'ol/map';
import OlXYZ from 'ol/source/xyz';
import OlTileLayer from 'ol/layer/tile';
import OlView from 'ol/view';
import OlProj from 'ol/proj';
@IonicPage()
@Component({
selector: 'page-open-map',
templateUrl: 'open-map.html'
})
export class OpenMapPage {
map: OlMap;
source: OlXYZ;
layer: OlTileLayer;
view: OlView;
constructor(platform: Platform, public renderer: Renderer) {
platform.ready().then(() => {
console.log("Platform is ready");
this.loadMap();
})
}
loadMap() {
this.source = new OlXYZ({
// Map tiles sourced from Mapbox (Light)
url: 'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
});
this.layer = new OlTileLayer({
source: this.source
});
this.view = new OlView({
center: OlProj.fromLonLat([6.661594, 50.433237]),
zoom: 3,
});
this.map = new OlMap({
target: 'map',
layers: [this.layer],
view: this.view
});
}
}
This is how my html file looks like:
<ion-header>
<ion-navbar>
<ion-title>OpenMap</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="about">
This is my incredibly fantastic About page.
<div id="map" #map class="map" ></div>
</ion-content>
After building the app, I noticed that the home page displays correctly but when transitioning to a new page, the map is missing. Can someone please assist me in identifying any errors in my code?
Your help is greatly appreciated!