Geek Answers Handbook

How to enable leaf routing in angular 2 typescript webpack application

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

I am new to most of the tools and technologies used (Angular 2, Typescript, Webpack). Although I understand this more and more, it seems that I still have not understood how third-party non-print JS libraries are included:

I would like to include sheetlet-routing-machine.js in my project. As far as I know, while there are type designations for leaflets, there is no typographic designation for a leaflet machine.

I installed the package via npm install and added the necessary quick start code to display the route.

map.service.ts

 /// <reference path="../../typings/leaflet/leaflet.d.ts"/> import {Injectable} from 'angular2/core'; import {Map} from 'leaflet'; Injectable() export class MapService { map: Map; // holds reference to the normal leaflet map object showRoute(){ L.Routing.control({ waypoints: [ L.latLng(47.569198, 7.5874886), L.latLng(47.5685418, 7.5886755) ] }).addTo(this.map); } }

The error I get on npm start :

 ERROR in ./app/services/map.service.ts (56,11): error TS2339: Property 'Routing' does not exist on type 'typeof L'.

As I understand it, I should not include the JS file in index.html, as this should be done automatically by webpack. Next to the fact that I'm not at all sure how to include third-party libraries without typing (answers like this did not help), it seems that my business is a little different, the L object is a standard sheet and does not know the Routing property. That I somehow understand, since I do not see how the routing library extends the library of leaflets.

Any suggestions?

+5
source share
2 answers

I have not worked with either Angular 2 or TypeScript, but I suspect TypeScript doesn't like the fact that LRM joins the L object / namespace.

Note that LRM also exports itself as a regular 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({ ... });
+1
source

It was something that I struggled with for a while, but finally got his job. Here's 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 configure routing in a component, make sure that you add 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 information for this on this issue: How to import a module that extends it in the same namespace

0
source

More articles:


All Articles