🏠 back to Observable

Extending Leaflet with plugins

I am working on a notebook to demonstrate mapping an ArcGIS REST service with Leaflet and some Leaflet plugins. I admit, I am not up to speed with the require() and more used to loading libraries via script tags but found this notebook’s Leaflet loading code. I think it makes a bit of sense and appears to work well for that particular notebook.

However, I seem to be running into a situation where the plugins, even if I get a response when I require them, don’t end up extending the Leaflet object. All of the plugins I’m attempting to use (esri-leaflet, leaflet-heat, and esri-leaflet-heatmap) have failed, though the Esri ones seem to do so most consistently. In other words, after creating my Leaflet object, L, if I check L.esri in the next cell, it returns undefined.

Does anyone have any recommendations on how I might better structure my notebook to be able to extend Leaflet with plugins?

Here’s a suggestion to merge:

There were two problems here.

The first is that two of the plugins (esri-leaflet and esir-leaflet-heatmap) support AMD, so they basically work out of the box, but if you want to assign the plugins into the L object, you have to do that manually. The leaflet.heat plugin uses globals, so it assigns to the global L directly, but you must require.catch since it doesn’t support AMD.

The second is a versioning problem. You pinned leaflet at version 1.4.0, but the AMD plugins you’re loading (the esri- ones) have their own version ranges specified in their package.json, so they were loading a different copy of Leaflet at a later version. You have to fix that by using require.alias to tell the plugins to use your copy of Leaflet.


Thank so much for the suggested fix and the thorough explanation. What you’re saying about the AMD plugins makes sense and it seems like I need to be a bit more careful about what versions of libraries I specify. Looks like I need to spend some more time learning about these more modern methods of loading libraries, but I appreciate you getting me steered in the right direction.

1 Like