refactor

angular.json

             ],
             "scripts": [],
             "allowedCommonJsDependencies": [
-              "leaflet"
+              "leaflet",
+              "leaflet.markercluster"
             ]
           },
           "configurations": {

package.json

     "express": "^4.19.2",
     "express-ws": "^5.0.2",
     "leaflet": "^1.9.4",
+    "leaflet.markercluster": "^1.5.3",
     "ngx-toastr": "^17.0.2",
     "rtsp-relay": "^1.8.0",
     "rxjs": "~7.8.0",

src/app/modules/overview/map/map.component.ts

 
 
 const alarmDemo =  {
-  title: ' Alarm System demo',  // Thêm mới warning
+  title: ' Demo Alarm System',  // Thêm mới warning
   detail: {
     position: 'Vinhomes Quận 9',
     coordinates: {
   }
 
   onMessage(message: any) {
-    if (message.id === '0' && message.type === 'get') {
+    if (message.id == '0' && message.type === 'get') {
       this.state1 = message.state1 === '0';//  1 OFF // alarm 12h
       this.state2 = message.state2 === '0'; // 1 OFF // alarm 1h
-      this.state5 = message.state5 === '1';// alarm 9h && 6h // 1 ON, 0 OFF
+      this.state5 = message.state5 === '1';// 1 ON, 0 OFF
       this.isReady = message.ready === '1';
       this.updateIcons();
     }
         .bindPopup(this.popupDetail(item))
         .addTo(this.markers);
     });
-
     const iconDemo = this.getIcon(this.state5, this.isReady, this.state1, this.state2);
     L.marker([this.alarmDemo.detail.coordinates.lat,this.alarmDemo.detail.coordinates.lng], { icon: iconDemo })
       .bindPopup(this.popupDetail(this.alarmDemo))