Leaflet plugin imports

Framework Knowledge
1

I am using a modified version of Mikhails leaflet code in a custom element I created. (article) https://mikhail.io/2016/03/aurelia-map-component-with-leaflet/
Works a treat for just map and markers.

I needed to add in a heatmap using heatmap.js along with leaflet-heatmap.js plugins for leaflet.
I am running into problems trying to figure out how to import these as their dependencies require the previous code to be loaded in the global namespace.

So heatmap.js is looking for L (from leaflet, and leaflet-heatmap.js is looking for HeatmapOverlay (from heatmap)

I have a version of the heatmap feature working here, but I had to just add the files to the index.html header to load the scripts and I would like to see if I can’t isolate that so that the custom element I am using does those imports.

For the basic leaflet functionality in the custom element the following import works find using:

import * as L from 'leaflet';

What is the proper way to import and setup the heatmap and leaflet-heatmap dependencies?

I am hoping someone can direct me to an article or show me how to do this import correctly.
Thanks!

1 Like
2

Apparently a well placed breakpoint helps to troubleshoot.
While you have to npm install heatmap.js you don’t need to import it directly.
Second issue is getting the correct path to the module.

imports ended up being so index.html is now clean again.

import * as L from "leaflet";
import * as HeatmapOverlay from 'heatmap.js/plugins/leaflet-heatmap/leaflet-heatmap';
2 Likes