I have installed mapbox in my application using npm. I use ionic serve to test my code on a browser and also on iPhone 7 and Samsung G9. Map that I am creating doesn’t show on the screen.
Although I included the CSS link in my html as instructed, I am getting a message in the console saying:
This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described in https://www.mapbox.com/mapbox-gl-js/api/.
I import my token from an external file and when I console.log it, I confirm it is correct.
Here is my home.ts code:
import { maptoken } from './../../../www/assets/maptoken';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as mapboxgl from 'mapbox-gl';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
map: mapboxgl.Map;
style = 'mapbox://styles/mapbox/outdoors-v9';
lat = 37.75;
lng = -122.41;
constructor(public navCtrl: NavController) {
mapboxgl.accessToken = maptoken.mapbox.accessToken;
}
ionViewDidLoad(){
this.buildMap();
console.log(mapboxgl.accessToken);
}
buildMap() {
this.map = new mapboxgl.Map({
container: 'map',
style: this.style,
zoom: 13,
center: [this.lng, this.lat]
});
console.log(this.map);
}
}
Here is my home.html:
<html>
<head>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<ion-content>
<div id="map"></div>
</ion-content>
</body></html>
I am not sure where I am making a mistake. When I console.log the map object, I see the object with the specifications that I declared. Thus, the map object is being created (see below).
But I cannot see the map on the screen, when I build the app. Can it be caused that Ionic does not see the css link included in HTML? Or some other problem?
Thanks