search

jwasilgeo / Leaflet.Canvas-Flowmap-Layer

A LeafletJS custom map layer for mapping the flow of objects, ideas, people, etc. with Bezier curves rendered on the HTML canvas.
https://jwasilgeo.github.io/Leaflet.Canvas-Flowmap-Layer/docs/comparison
MIT License
171 stars 42 forks source link

Any tips on how to add the cdn to an angular 6 app which has leaflet and esri-leaflet installed and working via npm ? #16

Closed vishalseshagiri closed 5 years ago

vishalseshagiri commented 5 years ago
vishalseshagiri commented 5 years ago

I figured it out, here's what I am doing, just in case someone stumbles on this in the future:

Install leaflet and esri-leaflet via npm.

npm i leaflet
npm i esri-leaflet

Add Tween.min.js to index.html <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>

Import Leaflet and Esri-leaflet to your component as such : 

import * as L from 'leaflet';
import * as esri from 'esri-leaflet';
import { } from 'leaflet-routing-machine';

Import CanvasFlowmapLayer.js using cdn as such : 

ngOnInit() {
   get('https://jwasilgeo.github.io/Leaflet.Canvas-Flowmap-Layer/src/CanvasFlowmapLayer.js', () => {
       // All your logic goes here
   }
}

This way the CanvasFlowmapLayer loads after window.L has been initialized.

Also you should get a types error in angular 6, you can fix it by adding the following types declaration to the @types/leaflet/index.d.ts file : export function canvasFlowmapLayer(originAndDestinationGeoJsonPoints: any, opts?: any): any;

vishalseshagiri commented 5 years ago

posse

vishalseshagiri commented 5 years ago

please find types fix here https://github.com/DefinitelyTyped/DefinitelyTyped/pull/30614

alejo90 commented 5 years ago

I do not believe that github.io site's script is meant to be used the way you are intending to. Since this library doesn't seem to be hosted as an npm package, the preferred approach would be to download the javascript file and include it into your project. You can then import it normally and angular will include it in the resulting bundle.

jwasilgeo commented 5 years ago

@vishalseshagiri thanks so much for the kind words and I'm glad you want to use this plugin!

@alejo90, thanks also for joining the discussion and providing some more advice and input. I agree that the github.io approach isn't necessarily intended to be used as a CDN for long-term and production situations.

One day I would definitely like to publish this as an npm package to make it easier for everyone to access and consume. I welcome contributions for that if anyone wants to beat me to it and do it first! 😄