🏠 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.

3 Likes

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