Disable built-in lazy loader (dynamic imports) and load all dependencies statically about leaflet-elevation

[Raruto]

Hi @Tomek-Z,

please also search among closed issues.. 👉 #229

Within README there is also a section dedicated to js bundlers:

leaflet-elevation/README.md

Lines 265 to 290 in bd9316b

	<details> <summary>3. How can I import this library as ES module?</summary>
	Usually, when working with a js bundler like [Vite](https://vitest.dev/) or [Webpack](https://webpack.js.org/), you need to provide to this library the full path to some dynamically imported files from the [`srcFolder`](./src/):
	```js
	import './your-custom-style.css';
	import 'leaflet/dist/leaflet.css';
	import L from 'leaflet';
	import '@raruto/leaflet-elevation/src/index.js';
	import '@raruto/leaflet-elevation/src/index.css';
	const map = L.map('map', {
	center: [41.4583, 12.7059]
	zoom: 5,
	});
	const controlElevation = L.control.elevation({
	// CHANGE ME: with your own http server folder (eg. "http://custom-server/public/path/to/leaflet-elevation/src/")
	srcFolder: 'http://unpkg.com/@raruto/leaflet-elevation/src/'
	}).addTo(map);
	// Load track from url (allowed data types: "*.geojson", "*.gpx", "*.tcx")
	controlElevation.load("https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx");
	```
	</details>

BTW, I couldn't tell you about the missing file from unpkg.com.

👋 Raruto

[Tomek-Z]

Hi,

Thanks for your answer. I found out that version 1.9.6 works for me. However I think that newer versions also introduce some attractive features I want to use hence I have a question.

Is there a possibility to disable dynamic imports in leaflet-elevation and loads everything statically like it was loaded before 2.0.0?

I've been looking on it since a few days and still have no idea how to merge dynamic imports with Angular and finally make it works..

[Raruto]

Hi @Tomek-Z,

in order to disable built-in lazy loader you should just statically import the dependencies of this library and expose them globally (ie. onto the window or globalThis object).

leaflet-elevation/src/control.js

Lines 213 to 230 in bd9316b

	/**
	* Javascript scripts downloader (lazy loader)
	*/
	import(src, condition) {
	if (Array.isArray(src)) {
	return Promise.all(src.map(m => this.import(m)));
	}
	switch(src) {
	case this.__D3: condition = typeof d3 !== 'object'; break;
	case this.__TOGEOJSON: condition = typeof toGeoJSON !== 'object'; break;
	case this.__LGEOMUTIL: condition = typeof L.GeometryUtil !== 'object'; break;
	case this.__LALMOSTOVER: condition = typeof L.Handler.AlmostOver !== 'function'; break;
	case this.__LDISTANCEM: condition = typeof L.DistanceMarkers !== 'function'; break;
	case this.__LEDGESCALE: condition = typeof L.Control.EdgeScale !== 'function'; break;
	case this.__LHOTLINE: condition = typeof L.Hotline !== 'function'; break;
	}
	return condition !== false ? import(_.resolveURL(src, this.options.srcFolder)) : Promise.resolve();
	},

leaflet-elevation/src/control.js

Lines 747 to 764 in bd9316b

	/**
	* Dynamically import only required javascript modules (code splitting)
	*/
	_loadModules(handlers) {
	// First map known classnames (eg. "Altitude" --> L.Control.Elevation.Altitude)
	handlers = handlers.map((h) => typeof h === 'string' && typeof Elevation[h] !== "undefined" ? Elevation[h] : h);
	// Then load optional classes and custom imports (eg. "Cadence" --> import('../src/handlers/cadence.js'))
	let modules = handlers.map(file => (typeof file === 'string' && this.import(this.__modulesFolder + file.toLowerCase() + '.js')) || (file instanceof Promise && file) || Promise.resolve());
	return Promise.all(modules).then((m) => {
	_.each(m, (exported, i) => {
	let fn = exported && Object.keys(exported)[0];
	if (fn) {
	handlers[i] = Elevation[fn] = (Elevation[fn] ?? exported[fn]);
	}
	});
	_.each(handlers, h => ["function", "object"].includes(typeof h) && this._registerHandler(h));
	});
	},

So to be clear, something like the following:

// external dependencies

import { d3 }        from "src/assets/d3.js";
import { togeojson } from "src/assets/togeojson.js";

globalThis.d3        = d3;
globalThis.togeojson = togeojson;

// chart handlers

import { Distance } from "src/handlers/distance.js";
import { Altitude } from "src/handlers/altitude.js";

globalThis.L.Control.Elevation.Distance = Distance;
globalThis.L.Control.Elevation.Altitude = Altitude;

// or even just like that:
// const controlElevation = L.control.elevation({
//  handlers: [
//    Distance,
//    Altitude,
//  ],
//  ...
// }).addTo(map);

If needed, take a look at this too: #266

👋 Raruto

[Tomek-Z]

Thanks a lot @Raruto! Code from #266 works for me. Tomorrow I will explore all the features of leaflet-elevation with the newest version! : )

One thing left - I don't know if it's a problem, during compilation I see this, but everything seem to work fine:

./node_modules/@raruto/leaflet-elevation/dist/leaflet-elevation.js:629:35-82 - Warning: Critical dependency: the request of a dependency is an expression

[Raruto]

@Tomek-Z please also attach your final code to help others who come after you.

Warning: Critical dependency: the request of a dependency is an expression

It's a bundler related issue, search on the net for more info about it.

👋 Raruto

[Tomek-Z]

// @ts-nocheck
import { AfterViewInit, Component } from "@angular/core";

import * as L from "leaflet";
import * as d3 from "d3";

globalThis.d3 = d3;
import * as toGeoJSON from "@tmcw/togeojson";

globalThis.toGeoJSON = toGeoJSON;
import "leaflet-geometryutil";
import "leaflet-almostover";
import "@raruto/leaflet-gesture-handling/dist/leaflet-gesture-handling";
import "@raruto/leaflet-elevation/libs/leaflet-edgescale.min.js";
import * as _ from "@raruto/leaflet-elevation/src/utils";
import "@raruto/leaflet-elevation/dist/leaflet-elevation";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements AfterViewInit {

  ngAfterViewInit(): void {
    let map = L.map("map", {
      center: [41.4583, 12.7059],
      zoom: 5,
    });

    L.tileLayer("https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png", {
      maxZoom: 18,
      attribution: "Data &copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap contributors</a>"
    }).addTo(map);

// Monkey patch the import function -> https://leafletjs.com/examples/extending/extending-1-classes.html#lclassinclude
    L.Control.Elevation.include({

      import: function (src, condition) {
        if (Array.isArray(src)) {
          return Promise.all(src.map(m => this.import(m)));
        }
        switch (src) {
          case this.__D3:
            condition = typeof d3 !== "object";
            break;
          case this.__TOGEOJSON:
            condition = typeof toGeoJSON !== "object";
            break;
          case this.__LGEOMUTIL:
            condition = typeof L.GeometryUtil !== "object";
            break;
          case this.__LALMOSTOVER:
            condition = typeof L.Handler.AlmostOver !== "function";
            break;
          case this.__LDISTANCEM:
            condition = typeof L.DistanceMarkers !== "function";
            break;
          case this.__LEDGESCALE:
            condition = typeof L.Control.EdgeScale !== "function";
            break;
          case this.__LHOTLINE:
            condition = typeof L.Hotline !== "function";
            break;
        }

        // Add the ignore comment for webpack
        return condition !== false ? import(/* webpackIgnore: true */ _.resolveURL(src, this.options.srcFolder)) : Promise.resolve();
      }
    });

    const controlElevation = L.control.elevation({srcFolder: "http://localhost/src"}).addTo(map);
    controlElevation.load("https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx");
  }
}

[Tomek-Z]

Hi,

I hope you're doing well.

One thing still not-working for me.

When I'm following the route on the map I can't see a tooltip in the bottom chart. No error nor warning happened.
Do you have any idea what I have to check or where to start investigation?

Tooltip exists in all your examples and I didn't find any option to enable/disable it, hence I think it is basic always enabled thing, see below - your example:

Kind regards

[Tomek-Z]

After long debugging I found out that leaflet tooltip is conflicting with bootstrap tooltip.

In file node_modules/bootstrap/scss/bootstrap.scss I commented line:

// @import "tooltip";

and leaflet tooltip works.

@Raruto Consider changing class naming.. I don't know : )

With this I close this thread.
All the best.