Currently, I'm in the process of incorporating a straightforward leaflet directive into my angular project. The entire code can be found at https://github.com/pluess/woodstore.
class MapDirective {
constructor() {
this.resctrict = 'E';
this.controller = MapController;
}
link(scope, element) {
let map = L.map(element[0]).setView([30.70, -81.47], 12);
esri.tiledMapLayer({
url: "https://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer"
}).addTo(map);
}
/**
* @returns {MapDirective}
*/
static directiveFactory() {
return new MapDirective();
}
}
Upon opening the application in the browser, an error message is displayed:
angular.js:13708TypeError: Cannot read property 'getPane' of undefined
at NewClass.getPane (http://localhost:8080/bundle.js:60907:20)
at NewClass._initContainer (http://localhost:8080/bundle.js:61482:9)
at NewClass.onAdd (http://localhost:8080/bundle.js:61282:9)
at NewClass.onAdd (http://localhost:8080/bundle.js:55550:35)
at NewClass._layerAdd (http://localhost:8080/bundle.js:46600:10)
at NewClass.addLayer (http://localhost:8080/bundle.js:46058:10)
at NewClass.addTo (http://localhost:8080/bundle.js:60885:8)
at MapDirective.link (http://localhost:8080/bundle.js:44340:17)
at http://localhost:8080/bundle.js:14058:19
at invokeLinkFn (http://localhost:8080/bundle.js:22632:10) <map class="leaflet-container leaflet-fade-anim" tabindex="0" style="position: relative;">
Does anyone have any insights as to what might be causing this issue?