openwisp · cestercian · Mar 1, 2025 · Mar 5, 2025 · Mar 12, 2025 · Mar 12, 2025
diff --git a/examples/netjson-cluster-overlap.html b/examples/netjson-cluster-overlap.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>NetJSON Cluster Overlap Example</title>
+    <meta name="description" content="NetJSON Cluster Overlap Example" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="../src/css/netjsongraph.css" />
+    <link rel="stylesheet" href="../src/css/netjsongraph-theme.css" />
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #legend {
+        position: fixed;
+        top: 10px;
+        right: 10px;
+        background: rgba(255, 255, 255, 0.8);
+        padding: 10px;
+        border-radius: 4px;
+      }
+      .status-ok, .status-problem, .status-critical {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        margin-right: 5px;
+        border-radius: 50%;
+      }
+      .status-ok {
+        background-color: #1ba619;
+      }
+      .status-problem {
+        background-color: #ffa500;
+      }
+      .status-critical {
+        background-color: #c92517;
+      }
+    </style>
+  </head>
+  <body>
+    <script src="../dist/netjsongraph.min.js"></script>
+    <script type="text/javascript">
+      // Create test data with overlapping nodes of different statuses
+      const testData = {
+        type: "NetworkGraph",
+        label: "Cluster Overlap Test",
+        nodes: [
+          // Group 1 - Overlapping nodes with different statuses
+          {
+            id: "1",
+            name: "Node 1",
+            location: { lat: 45.4642, lng: 9.1900 },
+            properties: { status: "ok" }
+          },
+          {
+            id: "2",
+            name: "Node 2", 
+            location: { lat: 45.4641, lng: 9.1901 },
+            properties: { status: "problem" }
+          },
+          {
+            id: "3",
+            name: "Node 3",
+            location: { lat: 45.4643, lng: 9.1902 },
+            properties: { status: "critical" }
+          },
+          // Group 2 - Another set of overlapping nodes
+          {
+            id: "4",
+            name: "Node 4",
+            location: { lat: 45.4742, lng: 9.1800 },
+            properties: { status: "ok" }
+          },
+          {
+            id: "5",
+            name: "Node 5",
+            location: { lat: 45.4741, lng: 9.1801 },
+            properties: { status: "problem" }
+          },
+          {
+            id: "6",
+            name: "Node 6",
+            location: { lat: 45.4743, lng: 9.1802 },
+            properties: { status: "critical" }
+          }
+        ],
+        links: []
+      };
+
+      const map = new NetJSONGraph(testData, {
+        render: "map",
+        clustering: true,
+        clusteringThreshold: 2,
+        clusterRadius: 40,
+        clusteringAttribute: "status",
+        // Set map initial state
+        mapOptions: {
+          center: [45.4642, 9.1900],
+          zoom: 15,
+          nodeConfig: {
+            label: {
+              offset: [0, -10],
+            },
+          }
+        },
+        nodeCategories: [
+          {
+            name: "ok",
+            nodeStyle: {
+              color: "#1ba619"
+            }
+          },
+          {
+            name: "problem",
+            nodeStyle: {
+              color: "#ffa500"
+            }
+          },
+          {
+            name: "critical",
+            nodeStyle: {
+              color: "#c92517"
+            }
+          }
+        ],
+        // Convert to internal json format
+        prepareData: (data) => {
+          data.nodes.forEach((node) => {
+            node.label = node.name;
+            node.properties = {
+              ...node.properties,
+              location: node.location
+            };
+          });
+        }
+      });
+
+      // Create legend
+      const legend = document.createElement("div");
+      legend.id = "legend";
+      legend.innerHTML = `
+        <h4>Node Status</h4>
+        <p><span class="status-ok"></span> OK</p>
+        <p><span class="status-problem"></span> Problem</p>
+        <p><span class="status-critical"></span> Critical</p>
+      `;
+      document.body.appendChild(legend);
+
+      map.render();
+    </script>
+  </body>
+</html> 
diff --git a/index.html b/index.html
@@ -132,7 +132,7 @@
   </head>
   <body>
     <button class="theme-toggle" aria-label="Toggle Dark Mode">
-      🌓 Toggle Theme
+      Toggle Theme
     </button>
 
     <header>
@@ -236,6 +236,11 @@ <h1>NetJSONGraph.js Example Demos</h1>
           >Clustering</a
         >
       </div>
+      <div class="cards">
+        <a href="./examples/netjson-cluster-overlap.html" target="_blank">
+          Cluster Overlap Example
+        </a>
+      </div>
     </main>
 
     <script>
@@ -252,7 +257,7 @@ <h1>NetJSONGraph.js Example Demos</h1>
 
       themeToggle.addEventListener('click', () => {
         htmlElement.classList.toggle('dark-mode');
-        
+
         // Save theme preference
         const currentTheme = htmlElement.classList.contains('dark-mode') ? 'dark' : 'light';
         localStorage.setItem('theme', currentTheme);

diff --git a/public/example_templates/netjson-cluster-overlap.html b/public/example_templates/netjson-cluster-overlap.html
@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NetJSON Cluster Overlap Example</title>
+    <link rel="stylesheet" href="../../src/css/netjsongraph.css" />
+    <link rel="stylesheet" href="../../src/css/netjsongraph-theme.css" />
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+        #legend {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            background: rgba(255, 255, 255, 0.8);
+            padding: 10px;
+            border-radius: 4px;
+        }
+        .status-ok, .status-problem, .status-critical {
+            display: inline-block;
+            width: 15px;
+            height: 15px;
+            margin-right: 5px;
+            border-radius: 50%;
+        }
+        .status-ok {
+            background-color: #1ba619;
+        }
+        .status-problem {
+            background-color: #ffa500;
+        }
+        .status-critical {
+            background-color: #c92517;
+        }
+    </style>
+</head>
+<body>
+    <script src="../../dist/netjsongraph.min.js"></script>
+    <script type="text/javascript">
+        // Create test data with overlapping nodes of different statuses
+        const testData = {
+            type: "NetworkGraph",
+            label: "Cluster Overlap Test",
+            nodes: [
+                // Group 1 - Overlapping nodes with different statuses
+                {
+                    id: "1",
+                    name: "Node 1",
+                    location: { lat: 45.4642, lng: 9.1900 },
+                    properties: { status: "ok" }
+                },
+                {
+                    id: "2",
+                    name: "Node 2",
+                    location: { lat: 45.4641, lng: 9.1901 },
+                    properties: { status: "problem" }
+                },
+                {
+                    id: "3",
+                    name: "Node 3",
+                    location: { lat: 45.4643, lng: 9.1902 },
+                    properties: { status: "critical" }
+                },
+                // Group 2 - Another set of overlapping nodes
+                {
+                    id: "4",
+                    name: "Node 4",
+                    location: { lat: 45.4742, lng: 9.1800 },
+                    properties: { status: "ok" }
+                },
+                {
+                    id: "5",
+                    name: "Node 5",
+                    location: { lat: 45.4741, lng: 9.1801 },
+                    properties: { status: "problem" }
+                },
+                {
+                    id: "6",
+                    name: "Node 6",
+                    location: { lat: 45.4743, lng: 9.1802 },
+                    properties: { status: "critical" }
+                }
+            ],
+            links: []
+        };
+
+        // Custom function to prevent cluster overlap by category
+        function preventClusterOverlap(map) {
+            // Store clusters by location
+            const clustersByLocation = {};
+
+            // Get all cluster markers
+            const clusterMarkers = document.querySelectorAll('.leaflet-marker-icon.marker-cluster');
+
+            clusterMarkers.forEach((marker, index) => {
+                // Get marker position
+                const left = parseInt(marker.style.left.replace('px', ''));
+                const top = parseInt(marker.style.top.replace('px', ''));
+                const key = `${left},${top}`;
+
+                // Initialize array for this location if it doesn't exist
+                if (!clustersByLocation[key]) {
+                    clustersByLocation[key] = [];
+                }
+
+                // Add marker to the location array
+                clustersByLocation[key].push(marker);
+            });
+
+            // Offset overlapping clusters
+            Object.values(clustersByLocation).forEach(markers => {
+                if (markers.length > 1) {
+                    // Calculate offset radius based on marker size
+                    const radius = 30;
+
+                    // Position markers in a circle around the original position
+                    markers.forEach((marker, i) => {
+                        const angle = (2 * Math.PI * i) / markers.length;
+                        const offsetX = radius * Math.cos(angle);
+                        const offsetY = radius * Math.sin(angle);
+
+                        // Apply offset
+                        const originalLeft = parseInt(marker.style.left.replace('px', ''));
+                        const originalTop = parseInt(marker.style.top.replace('px', ''));
+
+                        marker.style.left = `${originalLeft + offsetX}px`;
+                        marker.style.top = `${originalTop + offsetY}px`;
+                    });
+                }
+            });
+        }
+
+        const map = new NetJSONGraph(testData, {
+            render: "map",
+            clustering: true,
+            clusteringThreshold: 2,
+            clusterRadius: 40,
+            clusteringAttribute: "status",
+            // Set map initial state
+            mapOptions: {
+                center: [45.4642, 9.1900],
+                zoom: 15,
+                nodeConfig: {
+                    label: {
+                        offset: [0, -10],
+                    },
+                }
+            },
+            nodeCategories: [
+                {
+                    name: "ok",
+                    nodeStyle: {
+                        color: "#1ba619"
+                    }
+                },
+                {
+                    name: "problem",
+                    nodeStyle: {
+                        color: "#ffa500"
+                    }
+                },
+                {
+                    name: "critical",
+                    nodeStyle: {
+                        color: "#c92517"
+                    }
+                }
+            ],
+            // Convert to internal json format
+            prepareData: (data) => {
+                data.nodes.forEach((node) => {
+                    node.label = node.name;
+                    node.properties = {
+                        ...node.properties,
+                        location: node.location
+                    };
+                });
+            }
+        });
+
+        // Create legend
+        const legend = document.createElement("div");
+        legend.id = "legend";
+        legend.innerHTML = `
+            <h4>Node Status</h4>
+            <p><span class="status-ok"></span> OK</p>
+            <p><span class="status-problem"></span> Problem</p>
+            <p><span class="status-critical"></span> Critical</p>
+        `;
+        document.body.appendChild(legend);
+
+        map.render();
+
+        // Add event listener to apply our custom function after the map is fully rendered
+        map.echarts.on('rendered', function() {
+            setTimeout(() => {
+                preventClusterOverlap(map);
+            }, 500);
+        });
+
+        // Also apply when zooming or panning
+        map.echarts._api.getZr().on('mousemove', function() {
+            setTimeout(() => {
+                preventClusterOverlap(map);
+            }, 100);
+        });
+    </script>
+</body>
+</html>