[feature] Added indoor maps #662

[dee077]

Checklist

• I have read the OpenWISP Contributing Guidelines.
• I have manually tested the changes proposed in this pull request.
• I have written new test cases for new code and/or updated existing tests for changes to existing code.
• I have updated the documentation.

Reference to Existing Issue

Closes #662.

Description of Changes

• Improved the ui accoding to the figma design
• Added filter based on device name, mac address, and monitoring health status.

Screenshot

Pending things:

• Two overlaying map coordinate systems overlapping bug.
  [bug] Overlaying Indoor Map with L.CRS.Simple Overrides Geo Map Interaction and CRS Settings netjsongraph.js#397
• Figure out a way to switch floors in full-screen mode.
• Waiting for the decision to be made on how to integrate pop-up in the library or directly adding HTML mentioned in the comment
  [feature] Add popup on click of a node configurable from config netjsongraph.js#402

Explored solution for coordinate conversion

• Define a linear transform using image width/height and bounding box.
• Convert pixel [x,y] to lat/lng so nodes render at the same visual positions with some mathematical formula that can work.

[Copilot]

Pull Request Overview

This PR improves the device popup UI in the device map according to a Figma design and adds filtering functionality based on device name, MAC address, and monitoring health status. It also introduces a new floorplan view feature.

• Redesigned the device popup UI with improved styling and interactive elements
• Added search and filter functionality for devices by name, MAC address, and health status
• Implemented a new floorplan visualization feature with floor navigation

Reviewed Changes

Copilot reviewed 11 out of 14 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
device_map.html	Added indoor coordinates URL configuration
floorplan.js	New file implementing floorplan visualization and navigation logic
device-map.js	Enhanced popup with search, filtering, and floorplan integration
netjsongraph.css	Updated popup styling to full width
floorplan.css	New CSS styles for floorplan modal and navigation
device-map.css	Updated styling for improved popup UI and health status indicators
apps.py	Added floorplan assets and indoor coordinates URL configuration
views.py	Added new indoor coordinates API view with test pagination
urls.py	Added new API endpoint for indoor coordinates
serializers.py	Added monitoring indoor coordinates serializer
filters.py	Added filtering logic for device search and status filtering

[pandafy]

Good work @dee077!

I reviewed device-map.js and selenium tests thoroughly. We need to add some more selenium tests.

[pandafy]

Why do we require this? We already have a setting for this which we discussed on our 1-on-1.

[dee077]

This way we can check the custom label as well
let me know if it is not required

[dee077]

Updated to custom label names.

[pandafy]

The zooming in issue after exiting the fullscreen still exists.

device-map-2025-07-28_22.13.14.mp4

@dee077 can we hide the controls of the geographic map when floorplan is shown.

[pandafy]

device-map-2025-08-11_21.29.10.mp4

@dee077 the fullscreen zoom-in and zoom-out works perfectly for the first 4 image which are square-ish

It is not handling the last image properly. I am using the below floorplan.

[dee077]

Pending things:

• Two overlaying map coordinate systems overlapping bug.
  [bug] Overlaying Indoor Map with L.CRS.Simple Overrides Geo Map Interaction and CRS Settings netjsongraph.js#397
• Figure out a way to switch floors in full-screen mode.
• Waiting for the decision to be made on how to integrate pop-up in the library or directly adding HTML mentioned in the comment
  [feature] Add popup on click of a node configurable from config netjsongraph.js#402

[pandafy]

@nemesifier @dee077 and I discussed the following changes to the UI today

• Device popup heading margin should be set to 0
• Heading and close button should be at the same level
• Device table height is 180px (max height)
  • If there's only one device, than it shall adapt accordingly
  • If there are more than 3 devices, then show a scroll bar. Otherwise, just show the three devices.
• Make the filters highlighted when they are selected.
  • The default opacity should be 0.8
  • After clicking, the filter the opacity should be 1 (.health-status.active {opacity: 1})
• Reduce the opacity of the disabled navigation arrow to 0.3
  • Set {cursor: default} on the disabled navigation arrow
• Set {cursor: default} to active floor button floor-btn.active.selected
• Change the color of active arrow to #737985
• Changes to the floorplan overlay
  • Remove padding on floorplan heading
  • Add margin-bottom: 10px to the heading
  • Update the position of the close button

      #floorplan-heading {
          margin-bottom: 10px; 
          // remove padding 
      }
      #floorplan-close-btn {
          top: 8px; 
          right: 8px;
      }

• Add hover effect on the close icons (set color: black on hover)
• Floorplan navigation widget - if there are more floors available, and the selected floor is in the middle, then clicking on the navigation button should add new floors to the navigation widget instead of moving the selected floor.
• Increase the margin of the floorplan navigation arrow (@dee077 I missed to write down the value of the margin, I guess it was 8px)

[pandafy]

In our debugging session today, we found that the fullscreen can only be toggled by user gesture (not by JS from an async function).

Problem: Fullscreen mode can only be triggered by user gesture

Possible solution for the fullscreen navigation:

1. Don't show the floorplan navigation in the fullscreen mode

   (Quick fix until we find a way to solve it properly)

2. Show the floorplan navigation in fullscreen, but clicking on the floor will exit the fullscreen
   and then the floor will be changed. The user will see the changed floor in non fullscreen window

   (Almost implemented, con: clunky experience for the user)

3. (Uncertain) Redo the implementation, use only one NetJSONGraph instance to render the
   data. When the user clicks on a floor, the background will be changed and the data will be
   rendered again.

   (I think this may not worth the effort right now. We can come back to this later if required)

[nemesifier]

I think we need to go with 2. Not allowing to navigate floors is not acceptable. In the meantime we need to investigate option 3.

Please @pandafy @dee077 think on whether we could add logic in netjsongraph.js to facilitate option 3 and if it's technically feasible we can create a follow up issue to work on it in the coming months.

[nemesifier]

This needs to be added to the docs.

[nemesifier]

This is still pending. Let's not wait for this as it can be addressed very quickly and I am worried if we delay this we may forget.

[nemesifier]

Flag as translatable.

[nemesifier]

CSS adjustments

I tried re-adjusting sizes and move things around (180edaf), but this requires changing also a few details in openwisp-utils hence I opened openwisp/openwisp-utils#509 and made this PR depend on that branch, the result looks as follows:

The pop up autopan is not always working

Try this:

This happens because at the moment of opening the pop up, the rows are not rendered yet.

@dee077 can we fix this? For example, can we render the rows before opening the pop up? Or any other solution that ensures the pop up is fully visible after clicked in every situation.

Opening a map popup does not give "loading" visual feedback

Try opening a map point with throttling enabled in the browser console: there's no visual feedback about the loading operation.

It seems this problem is pre-existing, so I propose to create a new follow-up issue for this to be worked on later, unless you have a quick solution for this.

Lots of strings not flagged as translatable

Please flag all user facing strings as translatable.

Docs missing

We need to update the docs, but it seems counter productive to work on this now while we still have adjustments to make, I see we have a dedicated issue for that (#660) so let's work on that once we are done with the main changes.

[pandafy]

Opening a map popup does not give "loading" visual feedback

Try opening a map point with throttling enabled in the browser console: there's no visual feedback about the loading operation.

It seems this problem is pre-existing, so I propose to create a new follow-up issue for this to be worked on later, unless you have a quick solution for this.

Opened #704

[dee077]

Updates:

• Fixed auto-panning issue.
• Fixed unintended width of floorplan map popup as we are setting min-height to global CSS .leaflet-popup-content.
• Flagged strings for translation when necessary.
• Fixed pypi version change

Screencast.from.2025-09-11.19-06-47.webm

wating for openwisp/openwisp-utils#509

[pandafy]

I accidentally added this in my previous commit

[pandafy]

Blocker openwisp/openwisp-utils#509

[nemesifier]

I pushed a minor adjustment for narrow screens 6556f36.

There's only one comment pending, then we can merge.

[nemesifier]

This is still pending. Let's not wait for this as it can be addressed very quickly and I am worried if we delay this we may forget.