How to include leaflet-routing-machine into angular 2 typescript webpack application

Question

I used this seed to get started with Angular 2 Typescript and Webpack: https://github.com/haoliangyu/angular2-leaflet-starter.

I\'m new to most of the used tools an

Answer 1

I haven't worked with either Angular 2, nor TypeScript, but I suspect that TypeScript doesn't like that LRM attaches itself to the L object/namespace.

Note that LRM also exports itself as a normal CommonJS module, so you can do something like this instead of using L.Routing.Control:

var L = require('leaflet');
var Routing = require('leaflet-routing-machine');

var map = L.map(...);
var routingControl = Routing.control({ ... });

Answer 2

This has been something that I struggled with for a while but finally got it working. This is how you import it:

import * as L from 'leaflet'; import 'leaflet-routing-machine';

And in your systemjs.config

   map: {
    'leaflet': 'npm:leaflet/dist/leaflet.js',
}
     packages: {
           leaflet: {
              defaultExtension: 'js'
              }
            }

To set up the routing in the component, make sure you are adding the routing to the map instead of the tile layer.

    ngAfterViewInit() {

     var map = new L.Map("map")

    let openmap = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> ',
       }).addTo(map);

    let route = L.Routing.control({
        waypoints: [
          L.latLng(40.5663651,-75.6032277),
          L.latLng(40.00195, -76.073299),
          L.latLng(42.3673945,-83.0750408)
        ]
      }).addTo(map);}

I got a lot of the information for this on this question: How to import a module that extends another on the same namespace