openwisp · nemesifier · May 20, 2026 · May 13, 2026 · May 15, 2026 · May 18, 2026
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,5 +1,10 @@
 module.exports = {
   extends: ["airbnb", "prettier"],
+  parserOptions: {
+    // Override airbnb-config's ecmaVersion: 2018 so optional chaining
+    // (used by gui.js / util.js) parses without errors.
+    ecmaVersion: 2020,
+  },
   rules: {
     "no-param-reassign": "off",
     "class-methods-use-this": "off",

diff --git a/README.md b/README.md
@@ -433,6 +433,14 @@ NetJSON format used internally is based on [networkgraph](http://netjson.org/rfc
         clusterConfig:{
           // The configuration for the clusters
         },
+        nodePopup:{
+            show: boolean,
+            content: function|HTMLElement|string|null,
+            config:{
+                // Leaflet popup options
+            },
+            onOpen: function,
+        },
         baseOptions:{
             // The global configuration for Echarts specifically for the map.
         }
@@ -455,6 +463,20 @@ NetJSON format used internally is based on [networkgraph](http://netjson.org/rfc
 
   The `linkStyle` property is used to customize the style of the links. The list of all available style properties can be found in the [Echarts documentation](https://echarts.apache.org/en/option.html#series-lines.lineStyle).
 
+  `nodePopup` displays a Leaflet popup when a map node is clicked.
+  Set `show` to `true` to enable it. If `content` is `null`, the popup shows the default node details.
+  If you need custom content, set `content` to a function that receives the clicked node and returns a DOM element or a string.
+  Use `config` to pass Leaflet popup options. Use `onOpen` if you need to run code after the popup opens.
+
+  **Note:** `content` can also return a promise.
+  If the user clicks multiple nodes quickly, only the latest popup result is shown.
+  Older requests may still finish in the background, but their result is ignored.
+  Avoid putting important side effects in `content`, because they may still run after a newer click.
+
+  **Security:** when `content` returns a string, Leaflet treats it as HTML.
+  If the string includes node data from a remote API or user input, escape it first.
+  The safer option is to return a DOM element and set text with `textContent`, like the built-in popup does.
+
 - `mapTileConfig`
 
   The configuration for the map tiles. You can use multiple tiles by passing an array of tile configurations.

diff --git a/public/example_templates/netjsonmap-indoormap-overlay.html b/public/example_templates/netjsonmap-indoormap-overlay.html
@@ -73,6 +73,30 @@
       #indoormap-container .njg-container .hidden .sideBarHandle {
         left: 35px;
       }
+      .njg-container .njg-sideBar {
+        display: none;
+      }
+      .njg-container .leaflet-popup-tip-container {
+        bottom: -3.5%;
+      }
+      .njg-container .leaflet-popup-tip {
+        box-shadow: none;
+      }
+      .njg-container .default-popup .njg-popup-button-container {
+        text-align: center;
+      }
+      .njg-container .default-popup .njg-popup-button {
+        padding: 6px 12px;
+        border: none;
+        border-radius: 5px;
+        background-color: black;
+        color: white;
+        cursor: pointer;
+        margin-top: 5px;
+      }
+      .njg-container .default-popup .njg-popup-button:hover {
+        background-color: rgb(85, 85, 85);
+      }
     </style>
   </head>
   <body>
@@ -81,6 +105,17 @@
     </div>
 
     <script>
+      // This example uses popups instead of the default sidebar.
+      const disableDefaultSidebar = () => {};
+      // Shared between the outer geo map and the indoor map; the only thing
+      // that differs between the two popups is `content` (custom button for
+      // the geo map, default for the indoor map).
+      const SHARED_POPUP_CONFIG = {
+        closeOnClick: false,
+        autoPan: true,
+        autoPanPadding: [25, 25],
+        offset: [-8, -8],
+      };
       const netjsonmap = new NetJSONGraph("../assets/data/netjsonmap.json", {
         el: "#map-content",
         render: "map",
@@ -95,6 +130,11 @@
             },
           },
           baseOptions: {media: [{option: {tooltip: {show: true}}}]},
+          nodePopup: {
+            show: true,
+            content: createCustomPopup,
+            config: SHARED_POPUP_CONFIG,
+          },
         },
         bookmarkableActions: {
           enabled: true,
@@ -113,11 +153,7 @@
           });
           return data;
         },
-        onClickElement(type, data) {
-          if (type === "node") {
-            openIndoorMap();
-          }
-        },
+        onClickElement: disableDefaultSidebar,
       });
       netjsonmap.setUtils({
         // Added to open popup for a specific location Id in selenium tests
@@ -154,6 +190,60 @@
       // needed for selenium tests
       window._geoMap = netjsonmap;
 
+      function getIndoorMapFragment() {
+        let decodedHash = "";
+        try {
+          decodedHash = decodeURIComponent(
+            window.location.hash.replace(/^#/, ""),
+          );
+        } catch (err) {
+          return null;
+        }
+        const fragments = decodedHash.split(";").filter(Boolean);
+
+        return fragments.find((fragment) => {
+          const params = new URLSearchParams(fragment);
+          return params.get("id") === "indoorMap";
+        });
+      }
+      if (getIndoorMapFragment()) {
+        openIndoorMap();
+      }
+
+      // Registered once at page load so back/forward navigation keeps working
+      // across repeated open/close cycles. A handler installed inside
+      // openIndoorMap that removes itself on close cannot react to a later
+      // forward-nav that should reopen the indoor map.
+      window.addEventListener("popstate", () => {
+        if (getIndoorMapFragment()) {
+          if (!document.getElementById("indoormap-container")) {
+            openIndoorMap();
+          }
+        } else {
+          const container = document.getElementById("indoormap-container");
+          if (container) {
+            container.remove();
+          }
+          window._indoorMap = null;
+        }
+      });
+
+      // Called with `this` = the netjsongraph instance (see README docs for
+      // mapOptions.nodePopup.content). We reuse the library's default popup
+      // builder and just append the "Open Floorplan" action.
+      function createCustomPopup(node) {
+        const popupContent = this.gui.createDefaultPopupContent(node);
+        const buttonContainer = document.createElement("div");
+        buttonContainer.classList.add("njg-popup-button-container");
+        const button = document.createElement("button");
+        button.classList.add("njg-popup-button");
+        button.textContent = "Open Floorplan";
+        button.addEventListener("click", () => openIndoorMap());
+        buttonContainer.appendChild(button);
+        popupContent.appendChild(buttonContainer);
+        return popupContent;
+      }
+
       function createIndoorMapContainer() {
         const container = document.createElement("div");
         container.id = "indoormap-container";
@@ -180,10 +270,13 @@
             onClose();
           }
           container.remove();
+          window._indoorMap = null;
         });
       }
-
       function openIndoorMap() {
+        if (window._indoorMap) {
+          return window._indoorMap;
+        }
         let indoorMapContainer = document.getElementById("indoormap-container");
         if (!indoorMapContainer) {
           indoorMapContainer = createIndoorMapContainer();
@@ -211,6 +304,11 @@
                 animation: false,
               },
               baseOptions: {media: [{option: {tooltip: {show: true}}}]},
+              nodePopup: {
+                show: true,
+                content: null,
+                config: SHARED_POPUP_CONFIG,
+              },
             },
             bookmarkableActions: {
               enabled: true,
@@ -254,13 +352,24 @@
 
               const mapOptions = this.echarts.getOption();
               // Refer netjsonmap-indoormap.html for full explanation of this workaround
+              // Build an id -> node map so we don't assume the echarts series
+              // data and this.data.nodes share array indices (clustering or
+              // filtering can break that assumption).
+              const nodesById = new Map(this.data.nodes.map((n) => [n.id, n]));
               mapOptions.series[0].data.forEach((data) => {
                 const node = data.node;
                 const px = Number(node.location.lng);
                 const py = -Number(node.location.lat);
                 const nodeProjected = L.point(topLeft.x + px, topLeft.y + py);
                 const nodeLatLng = map.unproject(nodeProjected, zoom);
+                const dataNode = nodesById.get(node.id);
+                if (dataNode) {
+                  dataNode.location = nodeLatLng;
+                  dataNode.properties = dataNode.properties || {};
+                  dataNode.properties.location = nodeLatLng;
+                }
                 node.location = nodeLatLng;
+                node.properties = node.properties || {};
                 node.properties.location = nodeLatLng;
                 data.value = [nodeLatLng.lng, nodeLatLng.lat];
               });
@@ -302,6 +411,7 @@
               map.setMaxBounds(bnds);
               map.invalidateSize();
             },
+            onClickElement: disableDefaultSidebar,
           },
         );
         indoor.setUtils({
@@ -334,20 +444,9 @@
             indoor.echarts.trigger("click", params);
           },
         });
-        const popstateHandler = () => {
-          const fragments = indoor.utils.parseUrlFragments();
-          const id = indoor.config.bookmarkableActions.id;
-          if (!fragments[id]) {
-            indoorMapContainer.remove();
-            window.removeEventListener("popstate", popstateHandler);
-          }
-        };
-        window.addEventListener("popstate", popstateHandler);
         indoor.render();
         window._indoorMap = indoor;
-        closeButtonHandler(indoorMapContainer, indoor, () => {
-          window.removeEventListener("popstate", popstateHandler);
-        });
+        closeButtonHandler(indoorMapContainer, indoor);
       }
     </script>
   </body>

diff --git a/src/css/netjsongraph.css b/src/css/netjsongraph.css
@@ -319,6 +319,10 @@
   user-select: text !important;
 }
 
+.njg-container.njg-hide-tooltip .njg-tooltip {
+  display: none !important;
+}
+
 .njg-container .njg-tooltip .njg-closeButton {
   display: none;
 }
@@ -362,6 +366,34 @@
   font-size: 18px;
 }
 
+.njg-container .default-popup {
+  padding: 18px;
+}
+.njg-container .default-popup .njg-tooltip-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+
+.njg-container .default-popup .njg-tooltip-item:last-child {
+  margin-bottom: 0;
+}
+
+.njg-container .default-popup .njg-tooltip-key {
+  flex-basis: 45%;
+  font-weight: 600;
+  text-transform: capitalize;
+  color: black;
+}
+
+.njg-container .default-popup .njg-tooltip-value {
+  flex: 1;
+  overflow-wrap: anywhere;
+  word-break: normal;
+  color: black;
+}
+
 @media only screen and (max-width: 850px) {
   .njg-container .njg-sideBar {
     top: 0;

diff --git a/src/js/netjsongraph.config.js b/src/js/netjsongraph.config.js
@@ -245,6 +245,16 @@ const NetJSONGraphDefaultConfig = {
         },
       ],
     },
+    nodePopup: {
+      show: false,
+      content: null,
+      // `offset` is intentionally not set — Leaflet picks an offset that
+      // accounts for its own anchor; we only override autoPan defaults here.
+      config: {
+        autoPan: true,
+        autoPanPadding: [25, 25],
+      },
+    },
   },
   mapTileConfig: [
     {