TypeError: L._ is not a function

[Cloudio69]

Hi,

I was loading a map with leaflet elevation, the problem happens to be a TypeError. When debugging on XAMPP it works normally (must be Elementor or Wordpress?)

Here's my code

var elevation_options = {

            // Default chart colors: theme lime-theme, magenta-theme, ...
            theme: "lightblue-theme",

            // Chart container outside/inside map container
            detached: true,

            // if (detached), the elevation chart container
            elevationDiv: "#elevation-div",

            // if (!detached) autohide chart profile on chart mouseleave
            autohide: false,

            // if (!detached) initial state of chart profile control
            collapsed: false,

            // if (!detached) control position on one of map corners
            position: "bottom",

            // Autoupdate map center on chart mouseover.
            followMarker: true,

            // Autoupdate map bounds on chart update.
            autofitBounds: true,

            // Chart distance/elevation units.
            imperial: false,

            // [Lat, Long] vs [Long, Lat] points. (leaflet default: [Lat, Long])
            reverseCoords: false,

            // Acceleration chart profile: true || "summary" || "disabled" || false
            acceleration: false,

            // Slope chart profile: true || "summary" || "disabled" || false
            slope: false,

            // Speed chart profile: true || "summary" || "disabled" || false
            speed: false,

            // Display time info: true || "summary" || false
            time: false,

            // Display distance info: true || "summary"
            distance: true,

            // Display altitude info: true || "summary"
            altitude: true,

            // Summary track info style: "line" || "multiline" || false
            summary: 'multiline',

            // Toggle chart ruler filter.
            ruler: true,

            // Toggle chart legend filter.
            legend: true,

            // Toggle "leaflet-almostover" integration
            almostOver: false,

            // Toggle "leaflet-distance-markers" integration
            distanceMarkers: true,

            // Render chart profiles as Canvas or SVG Paths
            preferCanvas: true

        };

        // Instantiate map (leaflet-ui).
        var tourReligioso = new L.Map('mapreligioso', { mapTypeId: 'terrain', center: [41.4583, 12.7059], zoom: 10 });

        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
                'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1
        }).addTo(tourReligioso);

        $(".leaflet-control-layers, .leaflet-control-minimap").css("visibility", "hidden");
        // Instantiate elevation control.
        debugger;
        var controlElevation = L.control.elevation(elevation_options).addTo(tourReligioso);

        // Load track from url (allowed data types: "*.geojson", "*.gpx", "*.tcx")
        controlElevation.load("/mapgpx/itinerario-della-religiosita-popolare.gpx"); </script>

And here's the error:

components.js:198 Uncaught TypeError: L._ is not a function
    at components.js:198
    at Pn.call (d3.min.js:2)
    at i._updateLegend (chart.js:593)
    at i.update (chart.js:88)
    at i._updateChart (control.js:894)
    at i._resizeChart (control.js:821)
    at i.fire (leaflet.js:formatted:284)
    at invalidateSize (leaflet.js:formatted:1594)
    at i.<anonymous> (leaflet.js:formatted:1901)

[Raruto]

Hi Claudio, you are missing the following plugin: yohanboniface/Leaflet.i18n

For overall simplicity most of the examples here make use of the Raruto/leaflet-ui library which already includes it.

As usual, resolutive pull requests are welcome.

Have a nice Day, Raruto

[Cloudio69]

Hi Claudio, you are missing the following plugin: yohanboniface/Leaflet.i18n

For overall simplicity most of the examples here make use of the Raruto/leaflet-ui library which already includes it.

As usual, resolutive pull requests are welcome.

Have a nice Day, Raruto

Thank you Raruto,

Though i'm having the same problem, i did add locales as in this example, should i download the repo and add it as a script?

Also i'm having this problem too:

Uncaught (in promise) TypeError: Cannot read property '_d3LazyLoader' of undefined
    at l (utils.js:140)
    at i.loadGeoJSON (control.js:233)
    at control.js:263

it happens when loading the GPX file

P.S it's the second time i'm using Github, so i'm sorry if i'm doing something wrong with pulling requests, thank you again Raruto!

EDIT: resolved downloading the repo, but it looks very bad now, the map is missing tiles for no reason when i go fullscreen and exit again it fixes itself.. Here's where i'm adding the map

EDIT 2: fixed the buggy map by setting

tourReligioso.invalidateSize();

sometimes the solution is under our eyes.. thank you