1

I have an angular project (Angular 13) where I use leaflet. In the package.json file, I have:

"leaflet": "^1.7.1",
"leaflet-draw": "^1.0.4",
"leaflet.heat": "^0.2.0",

In my component, I import leaflet via

import * as L from 'leaflet';

Everything works fine and L includes the classes/methods from leaflet-draw and leaflet.heat as well. However, I could not understand how they are imported to the project when I only import 'leaflet'. I know that leaflet plugins do not export anything and they only add their stuff to L namescape of leaflet.

I just want to learn how Leaflet plugins become available even if I only import leaflet.

dogukan
  • 393
  • 1
  • 4
  • 9

1 Answers1

1

I guess those plugins are listed as dependencies in your package.json, so npm install will load them as they are (supposed to be) required for your application to work.

Then the plugins may not export anything, but they do extend Leaflet classes. For example the draw plugin extends Control class as follows:

Code
(https://github.com/Leaflet/Leaflet.draw/blob/develop/src/Control.Draw.js)

...
line 5: L.Control.Draw = L.Control.extend({
...

Therefore you can use the functionality without explicitly importing anything. This is the way Leaflet recommends to implement plugins. In their documentation they mention Class.extend but this now seem to work for L.Control as well (also for Handler and Layer).

References
https://leafletjs.com/examples/extending/extending-1-classes.html
https://angular.io/guide/npm-packages#dependencies

evilmandarine
  • 4,241
  • 4
  • 17
  • 40