Why is leaflet L not defined inside leaflet.cluster marker group iconCreateFunction when using leaflet as an injectable service?

[robomike]

During runtime I get the following error:

"TypeError: Cannot read properties of undefined (reading 'L')"

The line of code it points to is:

return this.mapService.L.divIcon({ html: '

' +' Coffee: '+ markers + '

', className: c, iconSize: this.mapService.L.Point(40, 40) });
Here is the structure of the code:

MapService.ts

import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable()
export class MapService {

public L = null;
public geocoder = null;
public draw = null;
public AwesomeMarkers = null;
public markerClusterGroup = null;

constructor(@Inject(PLATFORM_ID) private platformId: Object) {
if (isPlatformBrowser(platformId)) {
this.L = require('leaflet');
this.geocoder = require('leaflet-control-geocoder');
this.draw = require('leaflet-draw');
this.AwesomeMarkers = require('leaflet.awesome-markers');
this.markerClusterGroup = require('leaflet.markercluster');

}

}

}
NgModule

@NgModule({
declarations: [
AppComponent,
...COMPONENTS,
...SHARED_COMPONENTS,
...PIPES,
DeviceDetailsComponent,
DeviceListComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'}),
HttpModule,
HttpClientModule,
NgxSpinnerModule,
BrowserAnimationsModule,
NgbModule
],
providers: [
MapService,
{provide: HTTP_INTERCEPTORS, useClass: ApiInterceptor, multi: true},
SHARED_GUARDS,
SHARED_SERVICES,

],
bootstrap: [AppComponent],
})
deviceFile

constructor(
private deviceService: DeviceService,
private loadingService: NgxSpinnerService,
private usersService: UsersService,
private authService: AuthService,
private mapService: MapService
) {}

ngOnInit() {
  this.currentUser = this.authService.getCurrentUser();
  const self = this;
  var map = new this.mapService.L.Map('map').setView([39.82, -98.58], 5);


  mapArray.push(map);
    /*this.mapService.L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);*/
this.mapService.L.tileLayer(
    "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    {
      attribution: '© <a href="http://www.esri.com/">Esri</a> contributors',
      maxZoom: 21,
      maxNativeZoom: 20,
    }
  ).addTo(map);
  this.initLocations(map);

// this.loadGeoFences(map);

// this.loadUsers();

// secondsCounter.subscribe(n => this.ngUpdate());

}
and the function where the error is which is the last part of this code

initLocations(map) {
console.log("initLocations");
let numdevices = 0;
let numcoffee = 0;
let numbattery = 0;
let numO2 = 0;
let numCapt = 0;
let numPOB = 0;
var init_popup_text = "";
var coffee_markers = new this.mapService.L.markerClusterGroup( {
iconCreateFunction: function(cluster){
var markers = cluster.getChildCount();
var c = 'coffee-marker-cluster';
return this.mapService.L.divIcon({ html: '

' +' Coffee: '+ markers + '

', className: c, iconSize: this.mapService.L.Point(40, 40) });
}} );
There is no leaflet.js inside the HTML file. The leaflet plugin is injected into Angular, Marker Cluster Groups work fine without the iconCreate function. This issue only occurs within the scope of iconCreate.

I could really use your help with a fix or work around.

using the latest stable versions from npm for leaflet and related plugins.

as seen on stackoverflow

Thank you,

Mike

[IvanSanchez]

Hi, and thanks for taking the time to open a bug report in Leaflet.

However, in this repository we only handle bugs in "vanilla" Leaflet. This means that we do not handle bugs which are specific to frameworks such as:

• React
• Ractive
• AngularJS
• Bootstrap
• Leaflet for R
• Joomla
• Wordpress
• Ionic
• Cordova
• Vue
• Electron
• Polymer
• TypeScript
• D3
• Folium
• NativeScript
• ...etc

Please understand that we only have the time and energy to test Leaflet in plain web browsers.

Please try to either reproduce the bug without using any frameworks, or submit a bug to the appropriate repo.