Missing properties error when using Leaflet in Angular

Question

I am trying to use Leaflet and Leaflet Routing Machine. I used following commands to install leaflet and leaflet routing machine,

npm i leaflet
npm i --save-dev @types/leaflet

npm i leaflet-routing-machine
npm i --save-dev @types/leaflet-routing-machine

Importing leaflet and using it is fine but when I am trying to use leaflet routing machine it it giving me errors.

Following is my code,

L.Routing.control({
    waypoints: [
      L.latLng(latitude, longitude),
      L.latLng(latitude, longitude),
    ],
    show: false,
    lineOptions: {styles: [{color: randomColor, opacity: 1, weight: 5}],},
    createMarker: function () {
      return null;
    },
    }).addTo(this.map);

I am using webstorm as IDE I get 2 errors for both lineOptions and createMarker. I have the same code in plain JavaScript and it is working fine but for Angular it is giving me this errors.

For lineOptions it says following and when I added those missing params, the error was gone but I don't want to put those params.

TS2739: Type '{ styles: { color: string; opacity: number; weight: number; }[]; }' is missing the following properties from type 'LineOptions': extendToWaypoints, missingRouteTolerance

And for createMarker it says following,

TS2345: Argument of type '{ router: MapBox; waypoints: LatLng[]; show: false; createMarker: () => null; }' is not assignable to parameter of type 'RoutingControlOptions'. Object literal may only specify known properties, and 'createMarker' does not exist in type 'RoutingControlOptions'.

Since it is working in JavaScript why it is not working in Angular?

j1mbl3s · Accepted Answer · 2021-06-19T07:01:52.593

1

createMarker does not exist on RoutingControlOptions. Remove it from the object.

There is, however, a plan: Plan member, of which can be passed a PlanOptions to the constructor that does contain createMarker.

LineOptions must define extendToWaypoints and missingRouteTolerance. If you "don't want" them, set them to values that make sense - something like false for extendToWaypoints and 0 for missingRouteTolerance.

The JavaScript implementation likely ignores unknown and has sane defaults for undefined key-values in the options objects that you pass. However, the TypeScript definitions are more strict. There is also the chance that it is not definitely correctly typed.

edited Jun 19 '21 at 07:01

answered Jun 19 '21 at 00:07

j1mbl3s

994
3
16

Thank you for the answer. But actually there is createMarker and when I am using it, it does not create the default marker. Got answer from [here](https://stackoverflow.com/a/41301216/8440358) – H Athukorala Jun 19 '21 at 06:38
@HAthukorala Maybe I'm missing something, but I don't see `createMarker` as a member of `RoutingControlOptions` or the superinterface `ItineraryOptions`. I did, however, add to my answer a method to set the `Plan`, which takes a `PlanOptions` that does have the `createMarker` member. – j1mbl3s Jun 19 '21 at 07:01
Yes the plan option worked. Thank you very much for your reply and detailed explanation. And also thank you for putting your time to answer this question. – H Athukorala Jun 19 '21 at 08:08

Missing properties error when using Leaflet in Angular

1 Answers1