Using leaflet.markercluster.freezable

[xigolle]

Hi,

I want to make use of the package leaflet.markercluster.freezable but when I try to enable/disable clustering it doesn't seem to do anything.

I use it as follows:
`onMapReady(map: Map) {
this.map = map;

map.on('moveend', function() {
  const visibleMarkerCount = this.calculateVisibleMarkers(map);
  if (visibleMarkerCount  >= 50) {
    this.markerClusterGroup.enableClustering();
    if (map.hasLayer(this.arrowHeadLayerGroup)) {
        map.removeLayer(this.arrowHeadLayerGroup);
    }
    if (map.hasLayer(this.arrowLayerGroup)) {
      map.removeLayer(this.arrowLayerGroup);
    }
}
if (visibleMarkerCount < 50) {
    this.markerclusterGroup.disableClustering();
    if (!map.hasLayer(this.arrowHeadLayerGroup)) {
      map.addLayer(this.arrowHeadLayerGroup);
    }
    if (!map.hasLayer(this.arrowLayerGroup)) {
      map.addLayer(this.arrowLayerGroup);
    }
}
}.bind(this));

}`

I also import the package like follows:
import 'leaflet.markercluster.freezable';

And it is added in my angular.json as follows:
"scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/signalr/jquery.signalR.js", "./node_modules/leaflet/dist/leaflet.js", "./node_modules/leaflet.markercluster.freezable/dist/leaflet.markercluster.freezable.js" ]

I am wondering if there is something Angular specific why this isn't working ?
Or am I still doing something wrong.

Hope you can help me out because not sure where the problem could be.

Thanks very much in advance!

[xigolle]

Dear,

I have tried to make this work but don't seem to make it work with this component but no method I tried seem to work.

The following solved my issue.
I removed the directives from the div like so:
<div class="map" leaflet [leafletOptions]="options" (leafletMapReady)="onMapReady($event)" >

Then everytime I do a "refresh" of the clustering I add the clusteringgroup manual to the map like so:
this.markerClusterGroup = clusterGroup; if (this.map != null) { if (this.map.hasLayer(this.markerClusterGroup)) { this.map.removeLayer(this.markerClusterGroup); } this.map.addLayer(this.markerClusterGroup); }

I think this is not the way it should work with this package but could not find any other way to make this work.

Any idea why this is not working or are there things I am doing wrong ?

From the plugin that I am trying to use (leaflet.markercluster.freezable) I saw this code:
`_initiateFreeze: function () {
var map = this._map;

	// Start freezing
	this._frozen = true;

	if (map) {
		// Change behaviour on zoomEnd and moveEnd.
		map.off('zoomend', this._zoomEnd, this);
		map.off('moveend', this._moveEnd, this);

		map.on('zoomend moveend', this._viewChangeEndNotClustering, this);
	}
},

_unfreeze: function () {
	var map = this._map;

	this._frozen = false;

	if (map) {
		// Restore original behaviour on zoomEnd.
		map.off('zoomend moveend', this._viewChangeEndNotClustering, this);

		map.on('zoomend', this._zoomEnd, this);
		map.on('moveend', this._moveEnd, this);

		// Animate.
		this._executeAfterUnspiderfy(function () {
			this._zoomEnd(); // Will set this._zoom at the end.
		}, this);
	}
},

`

I might think that this._map is in another scope or not the right map that I might suspect?

Hope you could help me out with finding a solution to this for a "nice" way to solve this.

Thanks in advance!