Map has no maxZoom specified

[bpatrik]

This is just an FYI issue, if anyone else runs into this:

markercluster throws error Map has no maxZoom specified if max zoom is not specified. A solution can be specifying max zoom, but than that would override the tile's max zoom (leading to too little, or too much zoom)

Relevant code part that cause the issue:

    <div
      leaflet
      [leafletOptions]="mapOptions"
      (leafletMapReady)="onMapReady($event)">
    </div>   

mapOptions: MapOptions = {
    zoom: 2,
    center: latLng(0, 0),
    layers: [markerClusterGroup()]
  };

Possible workaround:

1) setting dummy max zoom by default:

mapOptions: MapOptions = {
    zoom: 2,
    // setting max zoom is needed to MarkerCluster https://github.com/Leaflet/Leaflet.markercluster/issues/611
    maxZoom: 2,
    center: latLng(0, 0),
    layers: [markerClusterGroup()]
  };

2) Then removing it once the map loaded, so it can fallback to the tile's max zoom:

onMapReady(map: Map): void {
    this.leafletMap = map;
    this.leafletMap.setMaxZoom(undefined);
  }

Related issue at leaflet: https://github.com/Leaflet/Leaflet.markercluster/issues/611

[bpatrik]

The solution in Leaflet/Leaflet.markercluster#611 is not working for ngx-leaflet-markercluster as the layers added to the map earlier than onMapReady is called.