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:
I really need help how i can perfectly display a view…