Recently, I set up a basic Ionic 2 project that integrates leaflet with the help of this repository: https://github.com/SBejga/ionic2-map-leaflet. Following that, I ran the command:
sudo npm install --save leaflet-routing-machine
to add leaflet routing machine to my project. Subsequently, in my map.ts file, I included the following code:
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import "leaflet";
import "leaflet-routing-machine"
declare var L: any;
/*
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 {
map: L.Map;
center: L.PointTuple;
constructor(public navCtrl: NavController, public navParams: NavParams) {}
ionViewDidLoad() {
console.log('ionViewDidLoad MapPage');
//set map center
//this.center = [48.137154, 11.576124]; //Munich
this.center = [48.775556, 9.182778]; //Stuttgart
//setup leaflet map
this.initMap();
L.Routing.control({
waypoints: [
L.latLng(48.776, 9.183),
L.latLng(48.786, 9.193)
]
}).addTo(this.map);
}
initMap() {
this.map = L.map('map', {
center: this.center,
zoom: 13
});
//Add OSM Layer
L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
.addTo(this.map);
}
}
The map loads correctly but the routing feature is not working as expected. Upon checking the console, I noticed the error message:
router.project-osrm.org/route/v1/driving/9.183,48.776;9.193,48.786?overview=false&alternatives=true&steps=true&hints=; Failed to load resource: the server responded with a status of 503 (Service Unavailable: Back-end server is at capacity) localhost/:1 Failed to load ;: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 503. leaflet-routing-machine.js:10477 Routing error: Object
Do you have any idea why the routing isn't functioning properly?