I'm attempting to replicate the basic example of loading a map with Leaflet in TypeScript, following the guidance on the Leaflet website. I am not utilizing any frameworks like Angular or React. I have installed Leaflet and types through npm. To adhere to our guidelines, the HTML is constructed at runtime by adding divs as needed, especially for the map which is created within the constructor of a class:
this.MapFrame = document.createElement('div');
this.MapFrame.style.height = "416px";
this.MapFrame.style.width = "616px";
this._mapArea = document.createElement('div');
this._mapArea.style.height = "400px";
this._mapArea.style.width = "600px";
this._mapArea.id = "mapid";
this.MapFrame.appendChild(this._mapArea);
... and MapFrame is then added to the document.
Within a method of a class:
this.mymap = L.map("mapid").setView([51.505, -0.09], 13);
This line results in an 'container already initialized' error even though no Leaflet code has been executed prior. When I replace the div containing the map with a new one that will be filled with a map without any call, it loads without issues. If I attempt:
this.mymap = L.map(this._mapArea).setView([51.505, -0.09], 13);
I can successfully load the map, but when trying to drag it, I encounter an Uncaught TypeError: t.classList.contains is not a function.
However, zooming is achievable using buttons or the mouse wheel.
The base HTML includes scripts and CSS, with the resulting HTML attached.
Could someone assist me in comprehending what is happening behind the scenes? Specifically, why the map is loaded without being called beforehand, and why dragging it is causing issues?