Geomap Clustering

[mbedsun]

Hello Zabbix community,

I am using Zabbix Geomap widget to plot all of my business locations, but when I am at zoom level 5 to have a nice view of the entire U.S a lot of my pins are being clustered together. Is there a way to modify the Geomap clustering?

For example in the map below I have a site in NSH, Tennessee but its being clustered with Kentucky sites.

[mbedsun]

I fixed my issue.

On your Zabbix server look for this file /usr/share/zabbix/widgets/geomap/assets/js/class.widget.js.

using sudo vi you can the search for the starting code "/_createClusterLayer()"

example code that you should see.
_createClusterLayer() {
const clusters = L.markerClusterGroup({
showCoverageOnHover: false,
zoomToBoundsOnClick: false,
removeOutsideVisibleBounds: true,
spiderfyOnMaxZoom: false,
iconCreateFunction: (cluster) => {
const max_severity = Math.max(...cluster.getAllChildMarkers().map(p => p.feature.properties.severity));
const color = this._severity_levels.get(max_severity).color;

return new L.DivIcon({
html: `
<div class="cluster-outer-shape">
<div style="background-color: ${color};">
<span>${cluster.getChildCount()}</span>
</div>
</div>`,
className: 'marker-cluster',
iconSize: new L.Point(50, 50)
});
}
});

return clusters;
}

Modified the code by adding the two settings below highlighted in BOLD font.

_createClusterLayer() {
const clusters = L.markerClusterGroup({
showCoverageOnHover: false,
zoomToBoundsOnClick: false,
removeOutsideVisibleBounds: true,
spiderfyOnMaxZoom: false,
maxClusterRadius: 40, // Reduced from default 80 to 40 to prevent excessive clustering
disableClusteringAtZoom: 7, // Clusters break apart sooner

iconCreateFunction: (cluster) => {
const max_severity = Math.max(...cluster.getAllChildMarkers().map(p => p.feature.properties.severity));
const color = this._severity_levels.get(max_severity).color;

return new L.DivIcon({
html: `
<div class="cluster-outer-shape">
<div style="background-color: ${color};">
<span>${cluster.getChildCount()}</span>
</div>
</div>`,
className: 'marker-cluster',
iconSize: new L.Point(50, 50)
});
}
});

return clusters;
}

Save this and restart your web service (Apache2 or Ngnix) and then reload your dashboard page with your geomap widget.

AFTER

[cyber]

I don't think that source has any knowledg of borders etc.. it just gives tiles at specific zoom levels and that is how big picture is put together... Code just groups pins that are close enough... It would do it also if there is a cat picture under it...

[mbedsun]

I don't need the source to know about borders just at zoom level 5 I would like the clustering of the pins to be reduced. Is there a way to modify the clustering setting for the Geomap widget?

[mbedsun]

I fixed my issue.

On your Zabbix server look for this file /usr/share/zabbix/widgets/geomap/assets/js/class.widget.js.

using sudo vi you can the search for the starting code "/_createClusterLayer()"

example code that you should see.
_createClusterLayer() {
const clusters = L.markerClusterGroup({
showCoverageOnHover: false,
zoomToBoundsOnClick: false,
removeOutsideVisibleBounds: true,
spiderfyOnMaxZoom: false,
iconCreateFunction: (cluster) => {
const max_severity = Math.max(...cluster.getAllChildMarkers().map(p => p.feature.properties.severity));
const color = this._severity_levels.get(max_severity).color;

return new L.DivIcon({
html: `
<div class="cluster-outer-shape">
<div style="background-color: ${color};">
<span>${cluster.getChildCount()}</span>
</div>
</div>`,
className: 'marker-cluster',
iconSize: new L.Point(50, 50)
});
}
});

return clusters;
}

Modified the code by adding the two settings below highlighted in BOLD font.

_createClusterLayer() {
const clusters = L.markerClusterGroup({
showCoverageOnHover: false,
zoomToBoundsOnClick: false,
removeOutsideVisibleBounds: true,
spiderfyOnMaxZoom: false,
maxClusterRadius: 40, // Reduced from default 80 to 40 to prevent excessive clustering
disableClusteringAtZoom: 7, // Clusters break apart sooner

iconCreateFunction: (cluster) => {
const max_severity = Math.max(...cluster.getAllChildMarkers().map(p => p.feature.properties.severity));
const color = this._severity_levels.get(max_severity).color;

return new L.DivIcon({
html: `
<div class="cluster-outer-shape">
<div style="background-color: ${color};">
<span>${cluster.getChildCount()}</span>
</div>
</div>`,
className: 'marker-cluster',
iconSize: new L.Point(50, 50)
});
}
});

return clusters;
}

Save this and restart your web service (Apache2 or Ngnix) and then reload your dashboard page with your geomap widget.

AFTER

[cyber]

I don't need the source to know about borders just at zoom level 5 I would like the clustering of the pins to be reduced. Is there a way to modify the clustering setting for the Geomap widget?

I just assumed as you said " have a site in NSH, Tennessee but its being clustered with Kentucky sites."

But good that you got your issue resovled... This might even be something configurable in widget...

[mbedsun]

It is not configurable in the Geomap widget or in the global settings of the geomap. It should be though.