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);
    }
}