Support dynamic imports in UMD wrapper

[nrenner]

Loading leaflet-maplibre-gl.js with Dynamic Imports raises an error:

TypeError: root is undefined in leaflet-maplibre-gl.js:10

See minimal example to reproduce (output in console log), basically this line:

import('https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.0.16/leaflet-maplibre-gl.js')
  .then(() => console.log('L.maplibreGL: ', L.maplibreGL))

The error occurs because this is undefined, as the import() call loads as module in strict mode (but can be called from a regular script).

Importing maplibre-gl.js works, the UMD wrapper there is generated by Rollup.

Detecting self (and/or globalThis) in addition to this helps, examples:

• rollup umd.ts, example output:
  • (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.thisIsA, global.thisIsB));
• umdjs/umd returnExports.js:
  • }(typeof self !== 'undefined' ? self : this, function (b) {

I propose to use Rollup-style global detection, to be compatible with Maplibre. Rollup is licensed under MIT, which is supposed to be functionally equivalent to ISC.

• fixed minimal example
• lazy loading demo
  (filter devtools Network tab by .js and observe when activating the Hillshading overlay)
  • the use case is to only load Maplibre when the layer is actually added to the map

The second commit changes uses of window to root.

[wipfli]

Thanks for sharing this fix. @webberig what do you think?