I'm trying to load the OL map with Ionic. When I load it with 'ionic serve' the map load fine in the browser. The problem is when I load the map in mobile, the map quality gets really low. This happened to me once in a web app when the map container changed the size and the map don't load again. In the web app I fixed it by applying a function that realoaded the map after the container change it's size, something like this:
$('#containerMap').on('change', function () {
setTimeout(function(){ map.updateSize(); }, 500);
});
I tried to apply the same function in the home.ts page, but no success. After some research I see some people saying that the right way to load the map is with Ionic Components, but I can't replicate from the examples.
Ionic v4 & OpenLayers v5.3
The Ionic Components related answers:
Other example that I followed:
What I'm trying to do (home-page.ts):
import { Component, Renderer, ViewChild } from '@angular/core';
import { NavController, Platform } from '@ionic/angular';
import { Map } from 'ol';
import { OSM, Vector as VectorSource } from 'ol/source.js';
import Point from 'ol/geom/Point.js';
import Feature from 'ol/Feature';
import { transform } from 'ol/proj.js';
import { Icon, Style } from 'ol/style.js';
import { Vector as VectorLayer } from 'ol/layer.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
@ViewChild('map') map;
constructor(platform: Platform, public renderer: Renderer) {
platform.ready().then(() => {
console.log("Platform is ready");
setTimeout(() => {
this.loadMap();
}, 1000);
})
}
// I tried to load the map with this function first, but it was not loaded.
//ionViewDidLoad() {
// this.loadMap();
//}
loadMap() {
console.log('Hello');
var map = new Map({
layers: [
new TileLayer({
source: new OSM()
})],
target: document.getElementById('map'),
view: new View({
center: [0, 0],
zoom: 3
})
});
map.updateSize(); //Tried to apply the same function used in web
}
}
It seems to be a device problem. If I try to open an OL online example like this in the mobile, emulator or physical device, the same problem occurs.