Lo pude resolver, se debe hacer tal cual el link que publique ANTERIORMENTE y cambiar el codigo:
import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import leaflet from 'leaflet';
import 'leaflet-routing-machine';
@Component({
selector: 'page-mapas',
templateUrl: 'mapas.html'
})
export class MapasPage {
@ViewChild('map') mapContainer: ElementRef;
map: any;
constructor(public navCtrl: NavController) {
}
ionViewDidEnter() {
this.loadmap();
}
loadmap() {
this.map = leaflet.map("map").fitWorld();
leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
// attributions: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18
}).addTo(this.map);
this.map.locate({
setView: true,
maxZoom: 10,
timeout: 30000
}).on('locationfound', (e) => {
console.log(e.latitude,e.longitude)
leaflet.Routing.control({
waypoints: [
leaflet.latLng(e.latitude, e.longitude),
leaflet.latLng(-16.4854728,-68.1983184)
], routeWhileDragging:true
}).addTo(this.map)
}).on('locationerror', (err) => {
alert(err.message);
})
}
}
Y en el index html colocar este codigo de css:
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@lates/dist/leaflet-routing-machine.css" />
SALUDOS ESPERO LE SIRVA A OTRA GENTE