diff --git a/content/blog/gsoc-25-indoor-mobile-map.rst b/content/blog/gsoc-25-indoor-mobile-map.rst new file mode 100644 index 0000000..a090de0 --- /dev/null +++ b/content/blog/gsoc-25-indoor-mobile-map.rst @@ -0,0 +1,201 @@ +GSoC 2025: Better Map UX: Indoor, Mobile, Linkable URLs +======================================================= + +:date: 2025-09-14 +:author: Deepanshu Sahu +:tags: gsoc, netjsongraph.js, monitoring, new-feature +:category: gsoc +:lang: en +:image_url: https://openwisp.org/images/blog/gsoc25/map-improvements-indoor-mobile/gsoc-25-indoor-maps.png +:image_width: 782 +:image_height: 765 + +.. image:: {static}/images/blog/gsoc25/map-improvements-indoor-mobile/gsoc-25-indoor-maps.png + :alt: Google Summer of Code, Better Map UX: Indoor, Mobile, Linkable URLs + :align: center + +Participating in Google Summer of Code has been a transformative +experience. Over the past three months, I worked on my Google Summer of +Code project with OpenWISP, where I had the opportunity to enhance the +platform by improving its general map functionalities. With the constant +guidance, encouragement, and expertise of my mentors `Federico Capoano +(nemesifier) `_ and `Gagan Deep (pandafy) +`_. I was able to explore new technologies, +tackle complex problems, and deliver features that significantly improve +usability, navigation, and accessibility in network visualization tools. +Their insightful feedback, patience, and supportive mentorship played a +crucial role in helping me grow as a developer and a contributor to +open-source projects. + +About the Project +----------------- + +The project aimed to enhance the OpenWISP general map with features that +improve accessibility, navigation, and monitoring for network +administrators. Key additions include indoor floor plan integration, +linkable map URLs, and real-time mobile device tracking. These +improvements help users manage complex networks more effectively and +troubleshoot issues with ease. + +The experience presented significant technical challenges that deepened my +understanding of mapping libraries like `Leaflet.js +`_ and `netjsongraph.js +`_, while also offering +opportunities to collaborate with the open-source community and contribute +to a project with global impact. + +Building the General Map Enhancements +------------------------------------- + +My contributions focused on making the map interface more intuitive and +interactive. I added features like device search, status-based filtering, +and seamless access to indoor maps from the general map view. Users can +now view specific devices within floor plans, switch between floors, and +open maps in fullscreen mode for better visualization. Additionally, users +can share URLs that link directly to specific nodes, graph states, or zoom +levels, making navigation and collaboration much easier. + +.. image:: {static}/images/blog/gsoc25/map-improvements-indoor-mobile/before-after-ui-view.png + :alt: Improved Dashboard Map UI before and after in OpenWISP + +Features Implemented +-------------------- + +UI improvements on Location Pop-up +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +.. image:: {static}/images/blog/gsoc25/map-improvements-indoor-mobile/improved-popup-ui-feature.gif + :alt: Improved Dashboard Map UI Location Pop-up in OpenWISP + +The location pop-up in the dashboard map has been enhanced to improve +usability and navigation. Users can now search for devices by name and +filter them by labels directly within the map interface through a popup +above the map. After filtering, users can quickly navigate to the detailed +page of the selected device. Additionally, devices associated with floor +plans include a button that opens the corresponding floor layout overlay +for better visualization. + +To optimize performance, infinite scroll has been implemented in the +device list table to load data efficiently as users scroll. A debounce +mechanism is also applied to the search input, ensuring that unnecessary +queries are minimized and the interface remains responsive. + +Indoor Map View +~~~~~~~~~~~~~~~ + +.. image:: {static}/images/blog/gsoc25/map-improvements-indoor-mobile/indoor-map-view.gif + :alt: Indoor Map view in OpenWISP + +If a device has an associated floor plan, a button is displayed that opens +the floor plan overlay, allowing users to switch between floors and toggle +fullscreen mode for a better visualization experience. Additionally, users +can click on a node in the indoor map to open a popup from which they can +navigate directly to the device’s detail page, making it easier to access +relevant information from within the map. + +To optimize performance, separate instances of `netjsongraph.js +`_ are used in dedicated +elements, enabling the map to be shown or hidden efficiently without +unnecessary reloads. + +Shareable URLs +~~~~~~~~~~~~~~ + +.. image:: {static}/images/blog/gsoc25/map-improvements-indoor-mobile/shareable-urls.gif + :alt: Shareable URLs Feature in OpenWISP + +Support for shareable URLs has been added to the map interface. Whenever +users click on a node or link, the URL is dynamically updated with +parameters such as the graph ID, node ID, and zoom level to reflect the +current view. This allows users to bookmark or share direct links to +specific views within both geographic and indoor maps, simplifying +navigation and collaboration. The implementation is designed to be +standardized and extendable, enabling it to support multiple maps on a +single page when needed. + +Real Time Device Location +~~~~~~~~~~~~~~~~~~~~~~~~~ + +The real-time mobile device tracking feature is still under development +and will be implemented in the future. It aims to provide dynamic updates +to device locations, ensuring that network administrators can monitor +moving devices in real time and respond to changes instantly. + +Current state +------------- + +We are maintaining the ``gsoc25-map`` branch as parent branch for all the +General map features. Once all the PRs are merged and features are tested +and validated, we can proceed with releasing these along with OpenWISP 26. + +You can follow the development process and explore the implementation +details in the following pull requests: + +- `Indoor Coordinates Endpoint + `_ +- `Indoor Floor Plan Integration + `_ +- `Linkable Map URLs in Monitoring + `_ +- `Linkable Map URLs in Netjsongraph.js + `_ +- `Real-Time Mobile Device Tracking + `_ + +My Experience +------------- + +My GSoC journey with OpenWISP has been a highly rewarding experience. With +the mentorship of `Federico Capoano (nemesifier) +`_ and `Gagan Deep (pandafy) +`_, I was able to grow both technically and +personally. Their guidance, patience, and feedback helped me navigate +challenges while ensuring my contributions aligned with OpenWISP’s +architecture and community standards. + +During the program, I focused on enhancing the map UI by implementing +features such as indoor map views, device search, and improved navigation. +This gave me the opportunity to deepen my understanding of front-end +optimization, API design, scalable components, and efficient data flow +management using tools like `netjsongraph.js +`_. + +Some of the toughest challenges I encountered included handling conflicts +between overlapping Coordinate Reference Systems (CRS) and designing the +bookmarkable URL feature. These challenges pushed me to explore libraries +like `Leaflet.js `_ and +`netjsongraph.js `_ more +thoroughly, broadening my knowledge of mapping tools and data handling +techniques. + +Beyond coding, engaging with the OpenWISP community through discussions +and reviews was a valuable learning experience. The push we needed toward +the end of the program was especially helpful—it provided the motivation +and structure to stay focused, prioritize tasks, and deliver as much as +possible within the timeline. These final weeks taught me the importance +of discipline, time management, and perseverance when contributing to +open-source projects. I’m grateful for the support I received, which +strengthened my skills, confidence, and commitment to open-source +development. + +What's Next? +------------ + +As my GSoC journey comes to an end, I am excited to continue contributing +to OpenWISP. In the near term, I will focus on refining the shareable URLs +feature to ensure that it performs reliably across different maps and user +interactions. I also plan to complete the real-time mobile device tracking +functionality by implementing efficient data handling and synchronization +methods. + +Looking ahead, I hope to further improve the map UI, explore additional +optimizations, and expand the set of features that make network monitoring +easier and more intuitive. User feedback will be essential in identifying +areas that need enhancement, and I plan to actively engage with the +community to gather insights and iterate on solutions. + +I am committed to maintaining and supporting the features I’ve developed, +addressing bugs, and helping other contributors onboard smoothly. +Open-source development has been a transformative experience for me, and I +look forward to being an active member of the OpenWISP community, learning +continuously, and contributing to projects that have real-world impact. diff --git a/content/images/blog/gsoc25/map-improvements-indoor-mobile/before-after-ui-view.png b/content/images/blog/gsoc25/map-improvements-indoor-mobile/before-after-ui-view.png new file mode 100644 index 0000000..69acfad Binary files /dev/null and b/content/images/blog/gsoc25/map-improvements-indoor-mobile/before-after-ui-view.png differ diff --git a/content/images/blog/gsoc25/map-improvements-indoor-mobile/gsoc-25-improve-openwisp-general-map-indoor-mobile-linkable-urls.png b/content/images/blog/gsoc25/map-improvements-indoor-mobile/gsoc-25-improve-openwisp-general-map-indoor-mobile-linkable-urls.png new file mode 100644 index 0000000..9b4755c Binary files /dev/null and b/content/images/blog/gsoc25/map-improvements-indoor-mobile/gsoc-25-improve-openwisp-general-map-indoor-mobile-linkable-urls.png differ diff --git a/content/images/blog/gsoc25/map-improvements-indoor-mobile/gsoc-25-indoor-maps.png b/content/images/blog/gsoc25/map-improvements-indoor-mobile/gsoc-25-indoor-maps.png new file mode 100644 index 0000000..59755fe Binary files /dev/null and b/content/images/blog/gsoc25/map-improvements-indoor-mobile/gsoc-25-indoor-maps.png differ diff --git a/content/images/blog/gsoc25/map-improvements-indoor-mobile/improved-popup-ui-feature.gif b/content/images/blog/gsoc25/map-improvements-indoor-mobile/improved-popup-ui-feature.gif new file mode 100644 index 0000000..cd2732f Binary files /dev/null and b/content/images/blog/gsoc25/map-improvements-indoor-mobile/improved-popup-ui-feature.gif differ diff --git a/content/images/blog/gsoc25/map-improvements-indoor-mobile/indoor-map-view.gif b/content/images/blog/gsoc25/map-improvements-indoor-mobile/indoor-map-view.gif new file mode 100644 index 0000000..d023d98 Binary files /dev/null and b/content/images/blog/gsoc25/map-improvements-indoor-mobile/indoor-map-view.gif differ diff --git a/content/images/blog/gsoc25/map-improvements-indoor-mobile/shareable-urls.gif b/content/images/blog/gsoc25/map-improvements-indoor-mobile/shareable-urls.gif new file mode 100644 index 0000000..c83d0a8 Binary files /dev/null and b/content/images/blog/gsoc25/map-improvements-indoor-mobile/shareable-urls.gif differ