MapBox in Ionic 3 - Map doesn't show

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

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';

  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;


  buildMap() { = new mapboxgl.Map({
      container: 'map',
      zoom: 13,
      center: [this.lng,]


Here is my home.html:

    <link href='' rel='stylesheet' />
        <div id="map"></div> 


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?


Alright, I got to show the map. The only thing I needed was to add width and height to the map object as following:

<div id='map' style='width: 400px; height: 300px;'></div>

I don’t know why it needs it, but the default sizes may be zero!

I am still getting the same error message in the console about CSS not working though.

i have the same issue
are you find any solution ??

I haven’t. The app functions well both on iOS and Android though. I will ignore the error message for now.