Leaflet Geodesic with Angular, I cannot use the geodesic in production - Stack Overflow

admin2025-04-19 1

I deployed an angular app, and there I have a map with Leaflet. Well in my map service I have some methods of adding polylines, and I was using geodesic, in development on my local machine was working, but after I deployed it I get this error:

Error fetching timeline: TypeError: L.Geodesic is not a constructor at _MapService.addClickableObject (map.service.ts:227:24) at postsponent.ts:141:25         at Array.forEach (<anonymous>)  at _PostsComponent.addToMap (postsponent.ts:114:12) at _PostsComponent.<anonymous> (postsponent.ts:80:10)         at Generator.next (<anonymous>)  at fulfilled (chunk-IIGRIO22.js:73:24)         at _ZoneDelegate.invoke (zone.js:369:28) at Object.onInvoke (core.mjs:6525:25)         at _ZoneDelegate.invoke (zone.js:368:34)

Now in my index.html, I have all these scripts:

  <script src=".js"></script>     
<link rel="stylesheet" href=".css" />     
<script src=";></script>     
<script src=";></script>     
<script src=".geodesic"></script>

everything else but the geodesic is working. I was trying to put the js script inside my assets, didn't load it, checks after checks, nothing was clear. in my map service where I am using this I have declared: declare let L: any; and I am creating the polyline like this:

    const polyline = new L.Geodesic(options.path, 
    {color: options.color || '#160BB9',
     weight: 3,
    opacity: 1.0,}
).addTo(this.mapInstance);

as its written in the Docs. I don't know why is giving me this, if you guys have any ideas? Before all these scripts and imports and node modules were in angular.json under "scripts", and I was using import 'leaflet-geodesic' for example, but once I deployed it, the angular didn't recognize them so I used the CDN approach, all works but the geodesic. I even have a leaflet.d.ts which looks like this:

 `import * as L from 'leaflet';

declare module 'leaflet-polylinedecorator';

declare module 'leaflet' {
  interface Map {
    editTools?: L.Editable;
  }

  namespace Symbol {
    function arrowHead(options?: any): any;
  }

  interface Polyline {
    enableEdit(map: L.Map): void;
    disableEdit(): void;
    editor: {
      deleteShape(): void;
      commitDrawing(): void;
    };
  }

  class Editable {
    constructor(map: L.Map, options?: any);
    createPolyline(latlngs: L.LatLngExpression[], options?: L.PolylineOptions): L.Polyline;
    createMarker(latlng: L.LatLngExpression, options?: L.MarkerOptions): L.Marker;
    enable(): void;
  }

  function polylineDecorator(
    polyline: L.Polyline,
    options?: any
  ): L.Layer;

  declare namespace L {
    class Geodesic extends L.Polyline {
      constructor(latlngs?: L.LatLngExpression[] | L.LatLngExpression[][], options?: any);
      setLatLngs(latlngs: L.LatLngExpression[] | L.LatLngExpression[][]): this;
    }
  }

}`

If you guys can help me out, I would appreciate it, thank you!

Error fetching timeline: TypeError: L.Geodesic is not a constructor at _MapService.addClickableObject (map.service.ts:227:24) at postsponent.ts:141:25         at Array.forEach (<anonymous>)  at _PostsComponent.addToMap (postsponent.ts:114:12) at _PostsComponent.<anonymous> (postsponent.ts:80:10)         at Generator.next (<anonymous>)  at fulfilled (chunk-IIGRIO22.js:73:24)         at _ZoneDelegate.invoke (zone.js:369:28) at Object.onInvoke (core.mjs:6525:25)         at _ZoneDelegate.invoke (zone.js:368:34)

Now in my index.html, I have all these scripts:

  <script src="https://unpkg/leaflet/dist/leaflet.js"></script>     
<link rel="stylesheet" href="https://unpkg/leaflet/dist/leaflet.css" />     
<script src="https://unpkg/leaflet-editable"></script>     
<script src="https://unpkg/leaflet-polylinedecorator"></script>     
<script src="https://cdn.jsdelivr/npm/leaflet.geodesic"></script>

    const polyline = new L.Geodesic(options.path, 
    {color: options.color || '#160BB9',
     weight: 3,
    opacity: 1.0,}
).addTo(this.mapInstance);

 `import * as L from 'leaflet';

declare module 'leaflet-polylinedecorator';

declare module 'leaflet' {
  interface Map {
    editTools?: L.Editable;
  }

  namespace Symbol {
    function arrowHead(options?: any): any;
  }

  interface Polyline {
    enableEdit(map: L.Map): void;
    disableEdit(): void;
    editor: {
      deleteShape(): void;
      commitDrawing(): void;
    };
  }

  class Editable {
    constructor(map: L.Map, options?: any);
    createPolyline(latlngs: L.LatLngExpression[], options?: L.PolylineOptions): L.Polyline;
    createMarker(latlng: L.LatLngExpression, options?: L.MarkerOptions): L.Marker;
    enable(): void;
  }

  function polylineDecorator(
    polyline: L.Polyline,
    options?: any
  ): L.Layer;

  declare namespace L {
    class Geodesic extends L.Polyline {
      constructor(latlngs?: L.LatLngExpression[] | L.LatLngExpression[][], options?: any);
      setLatLngs(latlngs: L.LatLngExpression[] | L.LatLngExpression[][]): this;
    }
  }

}`

If you guys can help me out, I would appreciate it, thank you!

Share Improve this question asked Mar 5 at 23:28 Calin Onaca 358 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 1

Ok so apparently the scripts in angular.json were in conflict with the scripts in the index.html, so, overall these are the modifications

angular.json

"scripts": [],
index.html: kept the scripts with the CDNs
tsconfig.json: updated the right path for the type "d.ts"
leaflet.d.ts: introduced the class Geodesic instead of namespace.
Cleared package.json of any leaflet packages

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745002576a279319.html

Leaflet Geodesic with Angular

I cannot use the geodesic in productionStack Overflow

最新回复(0)