Installing routing leaflet on an ionic2 project

Question

I have installed a very basic ionic2 project that supports leaflet (https://github.com/SBejga/ionic2-map-leaflet). Then I executed

sudo npm install --save leaflet-routing-machine

in order to install leaflet routing machine. On map.ts I then had 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 seems to load properly but I don't get any routting. In console, I receive the 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 https://router.project-osrm.org/route/v1/driving/9.183,48.776;9.193,48.786?overview=false&alternatives=true&steps=true&hints=;: 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

Am I doing something wrong?

Might be related, OSRM is unresponsive sometimes these days. You can see an error message as well (do not remember if it is similar) on Leaflet Routing Machine demo page when it occurs. — ghybs

notnotundefined notnotundefined · Accepted Answer · 2017-10-27T07:19:29

0

votes

For running on chrome, install the chrome plugin Allow Control allow origin and enable it.

Installing routing leaflet on an ionic2 project

1 Answers