Update public/heatmap.html

public/heatmap.html

@@ -17,7 +17,7 @@
   </header>
 
   <div class="page-container heatmap">
-    <!-- Floor selector -->
+    <!-- Optional floor selector -->
     <div class="floor-selector">
       <label><input type="radio" name="floor" value="1" checked> Floor 1</label>
       <label><input type="radio" name="floor" value="2"> Floor 2</label>
@@ -25,13 +25,17 @@
       <label><input type="radio" name="floor" value="4"> Floor 4</label>
     </div>
 
-    <!-- Scroll & zoom container -->
+    <!-- Scroll + zoom wrapper -->
     <div id="heatmap-container">
-      <div class="map-svg-container" id="mapSvgContainer">
+      <!-- the mapSvgContainer is where heatmap.js should append your SVG -->
-        <!-- heatmap.js will insert an <svg> here with:
+      <div id="mapSvgContainer" class="map-svg-container">
-             - <rect class="dock-door" ...> for each dock door
+        <!-- e.g. heatmap.js should do:
-             - <rect class="area-rect" ...> for each area
+             const svg = d3.select('#mapSvgContainer')
-             - <text> labels inside these rectangles -->
+                           .append('svg')
+                           .attr('width', fullWidth)
+                           .attr('height', fullHeight);
+             svg.selectAll('rect.dock-door')... etc.
+        -->
       </div>
     </div>
   </div>