2

How do I use the leaflet-arc plugin in Angular? What I've tried so far:

  1. npm install --save leaflet-arc
  2. Add "scripts": ["node_modules/leaflet-arc/src/leaflet-arc.js"] to angular.json.
  3. Add import '../../../node_modules/leaflet-arc/src/leaflet-arc.js'; to my-component.component.ts.

However when I do the following inside my-component.component.ts, it still gives me an error that Property 'Arc' does not exist on type 'typeof Polyline'.:

L.Polyline.Arc(...)

When I do ng serve this actually works, but it still gives the error when compiling.

Any ideas?

tgordon18
  • 1,562
  • 1
  • 19
  • 31

1 Answers1

2

To make it work you need to follow these steps:

  1. npm i leaflet --save
  2. npm install --save leaflet-arc

Go to angular.json an add the two libraries as follows: 

 "styles": [
      "node_modules/leaflet/dist/leaflet.css",
      "src/styles.css"
  ],
  "scripts": [
      "node_modules/leaflet/dist/leaflet.js",
      "node_modules/leaflet-arc/src/leaflet-arc.js"
  ]

In app.component.ts you need to import the two libraries as follows:

import { Component, OnInit } from '@angular/core';
import 'leaflet';
import 'leaflet-arc'; // import leaflet-arc here

declare let L;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
    ngOnInit() {
        const map = L.map('map').setView([60, 100], 3);
        // create an arc here
        L.Polyline.Arc([59.56667, 150.80000], [67.50000, 64.03333], {
            color: 'red',
            vertices: 200
        }).addTo(map);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
    }
}

template:

<div id="map"></div>

style:

#map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

Demo

kboul
  • 13,836
  • 5
  • 42
  • 53
  • Awesome, that worked! Looks like the issue was fixed by that `declare let L`. Nice fix! – tgordon18 Aug 01 '18 at 14:07
  • Thanks. Yes,indeed, make sure to import both leaflet & leaflet-arc in your template and then use `declare let L`. – kboul Aug 01 '18 at 14:14
  • Actually noticing that I'm getting an error giving an unexpected identifier from the line `import arc from 'arc';`. It runs correctly, but would like to fix that error – tgordon18 Aug 01 '18 at 14:19
  • I guess not with the code I provided cause I did not use that line. In my local copy where I tested it I was not getting any errors – kboul Aug 01 '18 at 14:37