Unable to Display Elevation Chart in Angular Project with leaflet-elevation

[Pritam Das]

Subject of the issue

Unable to display elevation chart using leaflet-elevation in Angular project

Your environment

• leaflet-elevation version: ^2.5.1
• leaflet version: ^1.9.3
• browser: Chrome
• operating system: Microsoft Windows 10 Pro, version 10.0.19045 Build 19045
• Angular version: ^15.1.0

Steps to reproduce

1. Copy the leaflet elevation code from the leaflet elevation repository and paste it into the TypeScript file.
2. Define a div element with a map in the HTML file.
3. After installing the package managers, execute the following steps:
   • Step 1: Copy the provided leaflet elevation code into a TypeScript file.
   • Step 2: Define a div element with a map in the HTML file.
4. The map is displayed successfully, but the elevation chart is missing.
5. Attempted to import the elevation file in different ways, but it's not getting configured.
6. Console errors are attached in the screenshot. Although I was able to reproduce the same through CDN in Angular version 17.

Expected behaviour

An elevation chart should appear on the map.

Actual behaviour

I can see the map layer, but the elevation chart is missing. The following error is observed in the console:
[webpack-dev-server] WARNING in ./node_modules/@raruto/leaflet-elevation/dist/leaflet-elevation.min.js 469:24-60
Critical dependency: the request of a dependency is an expression
these are the image of my angular.json, component.ts

[Raruto]

Please check FAQ section and old issues:

• How can I import this library as ES module?
• https://github.com/Raruto/leaflet-elevation/issues?q=angular

Critical dependency: the request of a dependency is an expression

Ref: #280 (comment)

👋 Raruto

[Pritam Das]

Thanks for the solution, I tried above hack it worked.

Solution:

1. copy the lefllet elvation module to assets in angular.

2. import the src folder and the elevation code as shown in the demo of github.

import { SessionService }                                            from '@/controller/session.service';
import { UserRoles }                                                 from '@/interfaces/users';
import { HttpClient, HttpHeaders, HttpErrorResponse }                from '@angular/common/http';
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { MatDialog }                                                 from '@angular/material/dialog';
import { ToastrService }                                             from 'ngx-toastr';
import { environment }                                               from '../../../environments/environment';
import { RawImageComponent }                                         from './raw-image/raw-image.component';
import { HttpService }                                               from './services-map/http.service';

// @ts-ignore
import * as L from 'leaflet';
import '@/../assets/leaflet-elevation/src/index.js'; 

// provide the assets folder path
var elevation_options = {
          theme: "green-theme",  
          detached: true,
          elevationDiv: "#elevation-div",
          autohide: false,
          collapsed: false,
          position: "topright",
          closeBtn: true,
          followMarker: true,
          autofitBounds: true,
          imperial: false,
          reverseCoords: false,
          acceleration: false,
          slope: true,
          speed: false,
          altitude: true,
          time: true,
          distance: true,
          summary: 'multiline',
          downloadLink: false,
          ruler: true,
          legend: true,
          almostOver: true,
          distanceMarkers: false,
          edgeScale: false,
          hotline: true,
          timestamps: false,
          waypoints: true,
          wptIcons: {
              '': L.divIcon({
                  className: 'elevation-waypoint-marker',
                  html: '<i class="elevation-waypoint-icon"></i>',
                  iconSize: [30, 30],
                  iconAnchor: [8, 30],
              }),
          },
          wptLabels: true,
          preferCanvas: true,
          srcFolder: 'http://localhost:4200/assets/leaflet-elevation/src/',
          clear:true,
    }

[Pritam Das]

@Raruto

To facilitate the dynamic switching of graphs among multiple JSON datasets, the ability to update and replace the current graph with a new dataset is essential.

However, it has been observed that the controlElevation.clear() function is not functioning as expected, yielding an "undefined" result.

On console logging I find the following functions are exported as attached in the image.

Clear is never exported.

Please tell any solution that works with angular.

[Raruto]

the controlElevation.clear() function is not functioning as expected, yielding an "undefined" result.

Without a public working demo (from your code) no one can verify this statement.

🤷 Raruto

[Pritam Das]

@Raruto
Here is the link to my project you can check.
https://stackblitz.com/~/github.com/pritam-das-26/map

[Pritam Das]

@Raruto
The problem got resolved.This issue can be closed.