How to use MapBox using Leaflet.js with Ionic2

Ionic Framework ionic-v3
1

Hi everyone!! I was looking for a good solution over the net but i didn’t find.
Just to give you a litle overview of what i have done in my project.

map.ts

import { Component } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;
import {Geolocation} from ‘ionic-native’;
import Leaflet from ‘leaflet’;

/*
Generated class for the Map page.

See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
selector: ‘page-map’,
templateUrl: ‘map.html’
})
export class MapPage {
myColor: string = “purple”;
public coords: any = {};

constructor(public navCtrl: NavController, public navParams: NavParams) {
this.getCurrentPosition();

}

ionViewDidLoad() {
this.drawMap();
}

getCurrentPosition(){
Geolocation.getCurrentPosition().then(pos => {

	this.coords.lat = pos.coords.latitude;
	this.coords.long = pos.coords.longitude;
});
console.log('lat: ' + this.coords.lat + ', lon: ' + this.coords.long);
return this.coords;

}

drawMap(){
let map = Leaflet.map(‘map’);
Leaflet.tileLayer(‘https://api.mapbox.com/styles/v1/zulbil/cizm21oo8002z2ro1q205clzh/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoienVsYmlsIiwiYSI6ImNpemlxemF0dTAyc2ozM25ubmwxMHA4cmYifQ.5FDc0z4ihM8pMTAkGH3qMw’, {
attribution: ‘Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox’,
maxZoom: 18
}).addTo(map);

//web location
map.locate({ setView: true, maxZoom: 16});

//when we have a location draw a marker and accuracy circle
function onLocationFound(e) {
  var radius = e.accuracy / 2;

  Leaflet.marker(e.latlng).addTo(map)
      .bindPopup("You are within " + radius + " meters from this point").openPopup();

  Leaflet.circle(e.latlng, radius).addTo(map);
}
map.on('locationfound', onLocationFound);
//alert on location error
function onLocationError(e) {
  alert(e.message);
}

map.on('locationerror', onLocationError);

}

}

map.html

<ion-navbar [color]=“myColor”>
Map

<ion-content [attr.noScroll]=“shouldScroll”>


map.scss

page-map {
[noScroll] {
overflow: hidden;
}

ion-content {
padding: 0;
margin: 0;
}
#map {
height: 550px;
width: 400px;
position:absolute;
top:0;
bottom:0;
}

}

But when i run the project the map wasn’t displayed correctly in the view. So what i did, i copy all the class in leaflet.css and i paste it in app.scss. And the result was like shown below:

image
map.JPG324×558 23.1 KB

I really need help how i can perfectly display a view…