Adding plugin (Leaflet.Arc)

[tobiasgruber-at]

Hello!

I already asked on StackOverflow, but here I can explain my issue in more detail. As the title already says, I only want to extend my ngx-leaflet app with the Leaflet.Arc plugin. To do it, I've already done some research, but I just couldn't manage to make it work.

.

.

I've tried two ways to include it, but let's start with the npm one:

1. Installed the npm-module npm install --save leaflet-arc

2. Tried to add the type to TypeScript (I'm not perfectly sure how to do this), so I wrote followed line in the typings.d.ts file:

    import * as L from 'leaflet';
    declare module 'leaflet' {
      var Arc: any;
    }

3. Included it in the app.component.ts file import 'leaflet-arc';

4. Tried following function:

   L.Polyline.Arc(
        [ 48.2082, 16.3738 ],
        [ 52.5200, 13.4050 ]
    )

But in the end it didn't work at all - only received this error: Error: Property 'Arc' does not exist on type 'typeof Polyline'.

.

.

The other time I tried it, I manually added it in the assets folder:

1. Added the js file to my assets folder assets/js/leaflet-arc.js

2. Gave it an .ts extension, otherwise app.module.ts won't recognize it assets/js/leaflet-arc.ts

3. Then I imported Leaflet on top of my leaflet-arc.ts file, elsewise it doesn't know the variable L import * as L from 'leaflet';

4. Also tried to add it to TypeScript, still not sure about it

    import * as L from 'leaflet';
    declare module 'leaflet' {
      var Arc: any;
    }

5. Added it to the .angular-cli.json scripts array

    "scripts": [
        "assets/js/leaflet-arc.ts"
     ]

6. Included it in the app.component.ts file import '../assets/js/leaflet-arc';

7. Tried following function:

   L.Polyline.Arc(
        [ 48.2082, 16.3738 ],
        [ 52.5200, 13.4050 ]
    )

Also didn't work.. same error as above: Error: Property 'Arc' does not exist on type 'typeof Polyline'.

.

.

Sorry, but I'm not experienced enough to include it in Angular, so I would really appreciate any support! If you could tell me what I'm doing wrong, you would help me a lot!

Have a great day!

[tobiasgruber-at]

Found the solution :)

[tuckergordon]

What was the solution?

[infrarosso78]

...that's funny. Would you like to share it with the rest of the community?

[ashishdhyani]

@TobiasGruberAT, what was the solution?

[namailli]

Hello,

I had the same issue with another plugin : leaflet-curve.

The function 'L.curve(...)' was never recognized during a production compilation but works in the development environment. Error message: Property 'curve' does not exist on type ...

I found a solution that can be helpful. But certainly it's not the best way to resolve this issue. My solution was to add a new definition for the curve function in the leaflet/index.d.ts file .

File : node_modules/@types/leaflet/index.d.ts new definition: export function curve (path:Array<any>, options:any);

After this change, I can build a production release. But if you would like to launch an update of the Leaflet dependency, you will probably loose this correction.

If you have a better way, I'm more than interested!

[baarbaracrr]

What was the solution???