Calling controleElevetion.clear() twice cause Uncaught ReferenceError: controlElevation is not defined

[Foetus6907]

Subject of the issue

Hi,

I have an existing elevation graph and i want to clear it all, so i call the function .clear() but i got in browers console this error message, and the graph is not clear.

control.js:73 Uncaught ReferenceError: controlElevation is not defined at control.js:73

_clearChart: function() {
        if (this._events && this._events.elechart_updated) {
            this._events.elechart_updated.forEach(e => controlElevation.off('elechart_updated', e.fn, e.ctx));  Here !!!
        }
        if (this._chart && this._chart._container) {
            this._chart._container.selectAll('g.point .point').remove();
            this._chart.clear();
        }
    },

Your environment

• leaflet-elevation: version
• leaflet: 1.7.1
• browser: Chrome
• operating system: Mac Os Monterey 12.0.1
• link to your project:

Steps to reproduce

Tell us how to reproduce this issue. Please provide a working demo, you can use this template as a base, otherwise, you can edit the following in order to show us some of your code snippets:

import DrawElevation from "./DrawElevation";
import {ElevationOption} from "../Types";
import * as L from "leaflet";
import {GeoJsonObject} from "geojson";
import leafletElevationCss from "@raruto/leaflet-elevation/dist/leaflet-elevation.min.css";
import '@raruto/leaflet-elevation'

export default class RarutoDrawElevation implements DrawElevation {
    private readonly control: any
    private readonly styleTagLeafletElevation: HTMLStyleElement;
    constructor(option: ElevationOption, map: L.DrawMap, shadowRoot: ShadowRoot) {
        /* Add Leaflet Elevation css style sheet to shadow dom */
        this.styleTagLeafletElevation = document.createElement('style');
        this.styleTagLeafletElevation.innerHTML = leafletElevationCss;
        shadowRoot.appendChild(this.styleTagLeafletElevation);
        // @ts-ignore
        this.control = L.control.elevation(option).addTo(map);
    }
    loadDrawElevation() {
        return this.control;
    }

    clearElevation(): void {
        this.control.clear();
    }

    drawElevationGraph(geoJson: GeoJsonObject): void {
        this.control.loadGeoJSON(geoJson);
    }
}

export default class JakeMap extends HTMLElement {
    private drawnElevation: DrawElevation | undefined;
    constructor() {
         this.drawnElevation = new RarutoDrawElevation(rarutoDrawElevationOptions, this.myMap, this._shadowRoot);
      }

    private clearElevationChart() {
            if (this.drawnElevation) {
                this.drawnElevation.clearElevation();
            }
        }
}

Expected behaviour

Chart should be clear in order to redraw a new one

Actual behaviour

Nothing happen

I got this error since i update to version 1.7.3, if i down grade to version 1.7.0 i don't have the error.

[Raruto]

Hi moamhed, it looks like a typo in the code, have you tried replacing controlElevation with this ?

https://github.com/Raruto/leaflet-elevation/blob/fd739db55b147b864b79c41428757373551f59b7/src/control.js#L73

if so can you make a fix pull request?

Raruto

[Raruto]

It should be fixed in version 1.7.4

https://github.com/Raruto/leaflet-elevation/commit/5b86a80ae7ee94c4988f601b0cca93588f470a9b