renderMarkers(points, customMarker, isCluster = true) {
try {
this.removeMarker();
this.removeOverlay();
this.map.addSource("camera", {
type: "geojson",
data: getFeature(points, customMarker),
cluster: isCluster,
clusterMaxZoom: 15,
clusterRadius: 50,
});
this.map.addLayer({
id: "clusters",
type: "symbol",
source: "camera",
filter: ["has", "point_count"],
metadata: {group: null},
layout: {
"icon-image": "map-cluster",
},
});
this.map.addLayer({
id: "cluster-count",
type: "symbol",
source: "camera",
filter: ["has", "point_count"],
metadata: {group: null},
layout: {
"icon-image": "map-cluster",
"text-field": "{point_count_abbreviated}",
"text-size": 12,
"icon-size": 0.6,
"text-offset": [0, -0.2],
},
paint: {
"text-color": "#ffffff",
},
});
this.map.addLayer({
id: "unclustered-point",
type: "symbol",
metadata: {group: null},
source: "camera",
filter: ["!has", "point_count"],
layout: {
"icon-image": ["coalesce", ["get", "iconImage"]],
},
});
} catch (e) {
console.log(e);
}
}