Hotspot Diagram Modular Application
Custom Nyla app replacing static diagrams with a fully modular, responsive hotspot system for KAV, featuring dynamic lines, per-instance control, and mobile-specific behavior.
Task
Develop a two-part custom application in Nyla that allows KAV to create interactive diagrams directly in-platform. The system needed to dynamically position hotspots and labels, draw responsive connecting lines, support toggleable states, and adapt seamlessly between desktop and mobile layouts.
Background
Replace static, uneditable diagrams with a fully modular, responsive, and client-editable hotspot system that adapts to any screen size while keeping perfect alignment and offering per-instance customization.
Before this application, KAV’s diagrams were flat image files. While functional, they didn’t scale well across devices—text and markers shrank or overlapped on smaller viewports—and any edit required re-rendering and re-uploading the entire image. There was no way to simply move a label or adjust a line without replacing the whole asset.
We solved this by building a two-part modular system:
Parent Controller – Defines the diagram bounds, scans the page for hotspots, gathers their configuration data, organizes it, and applies placement and styling.
Child Hotspot Declarations – Independent instances containing their own style, position, reference links, and behavior settings.
When the page loads, the parent identifies each hotspot, requests its data, and integrates it into a master array. The hotspots are then positioned and styled dynamically. The connecting lines between a hotspot and its label are drawn live in the DOM, recalculating in real time as the viewport changes to ensure the cleanest path between points.
A key technical improvement was multi-instance communication. The first prototype hardcoded all hotspots into one script, making it impossible to add or change a single hotspot without redeclaring them all. The final system allows the parent to talk to each hotspot individually—so adding, removing, or modifying one does not affect the others.
The app separates hotspot positioning from tag positioning:
Hotspots stay tied to the image container, scaling proportionally with the image.
Tags stay tied to the larger section container, keeping their place in the overall layout.
Each hotspot can be customized to:
Toggle on click or remain always visible
Change line direction and connection point (image or tag)
Include or omit images in tags
Pull pre-optimized Nyla assets directly into the tag by pasting the asset’s element ID
This integration with Nyla’s asset system ensures images remain optimized for speed and quality.
We also implemented mobile-specific behavior by allowing alternate toggle states and hotspot arrangements. On mobile, hotspots can be set to display one label at a time, with tag positions optimized for a vertical image layout. This creates a cleaner and more focused UI/UX on smaller screens.
Conclusion & Reflection
This project started as a single-script proof of concept with fixed hotspots and no scalability. Through iterative development, it evolved into a scalable, platform-ready feature that any Nyla client can use to build fully responsive diagrams.
It was a deep exploration into multi-instance communication, responsive DOM mapping, and modular architecture—balancing flexibility, performance, and usability. The result is an interactive diagram system that’s not only technically robust but also easy for clients to maintain and repurpose across multiple use cases.