feat(conference-map): 2026 floor plans with tappable per-floor cards

src/app/floor-plan-modal/floor-plan-modal.component.html

@@ -0,0 +1,26 @@
+<ion-header class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="close()" aria-label="Close floor plan">
+        <ion-icon slot="icon-only" name="close-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>{{ title }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content fullscreen="true" class="floor-plan-modal-content">
+  <pinch-zoom
+    class="floor-plan-zoom"
+    [autoZoomOut]="false"
+    [doubleTap]="true"
+    [wheel]="true"
+    [draggableImage]="false"
+    [limitZoom]="'original image size'"
+    backgroundColor="#ffffff">
+    <img
+      [src]="imageSrc"
+      [alt]="altText || title"
+      decoding="async" />
+  </pinch-zoom>
+</ion-content>

src/app/floor-plan-modal/floor-plan-modal.component.scss

@@ -0,0 +1,17 @@
+.floor-plan-modal-content {
+  --background: #ffffff;
+}
+
+.floor-plan-zoom {
+  width: 100%;
+  height: 100%;
+  background: #ffffff;
+}
+
+.floor-plan-zoom img {
+  width: 100%;
+  height: auto;
+  display: block;
+  -webkit-user-drag: none;
+  user-select: none;
+}

src/app/floor-plan-modal/floor-plan-modal.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-floor-plan-modal',
+  templateUrl: './floor-plan-modal.component.html',
+  styleUrls: ['./floor-plan-modal.component.scss'],
+})
+export class FloorPlanModalComponent {
+  @Input() title!: string;
+  @Input() imageSrc!: string;
+  @Input() altText?: string;
+
+  constructor(private modalCtrl: ModalController) {}
+
+  close() {
+    this.modalCtrl.dismiss();
+  }
+}

src/app/pages/conference-map/conference-map.module.ts

@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
 import { PinchZoomModule } from '@ciag/ngx-pinch-zoom';
 
 import { ExpoHallMapModule } from '../../expo-hall-map/expo-hall-map.module';
+import { FloorPlanModalComponent } from '../../floor-plan-modal/floor-plan-modal.component';
 
 import { ConferenceMapPageRoutingModule } from './conference-map-routing.module';
 
@@ -21,6 +22,6 @@ import { ConferenceMapPage } from './conference-map.page';
     ExpoHallMapModule,
     ConferenceMapPageRoutingModule
   ],
-  declarations: [ConferenceMapPage]
+  declarations: [ConferenceMapPage, FloorPlanModalComponent]
 })
 export class ConferenceMapPageModule {}

src/app/pages/conference-map/conference-map.page.html

@@ -25,16 +25,28 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content fullscreen="true" [scrollX]="mapView === 'floor-plans'" [scrollY]="mapView === 'floor-plans'" scrollEvents="true">
+<ion-content fullscreen="true" [scrollY]="mapView === 'floor-plans'" scrollEvents="true">
 
   <ng-container *ngIf="mapView === 'floor-plans'">
-    <pinch-zoom>
-      <div>
-        <ion-img class="floor-img" src="assets/img/floor-two.png"></ion-img>
-        <ion-img class="floor-img" src="assets/img/floor-three.png"></ion-img>
-        <ion-img class="floor-img" src="assets/img/floor-four.png"></ion-img>
-      </div>
-    </pinch-zoom>
+    <div class="floor-plan-list">
+      <button
+        type="button"
+        class="floor-plan-card"
+        *ngFor="let plan of floorPlans"
+        (click)="openFloorPlan(plan)"
+        [attr.aria-label]="'Open ' + plan.title + ' floor plan'">
+        <div class="floor-plan-thumb-wrap">
+          <ion-img class="floor-plan-thumb" [src]="plan.thumb" [alt]="plan.title + ' thumbnail'"></ion-img>
+          <div class="floor-plan-zoom-hint" aria-hidden="true">
+            <ion-icon name="expand-outline"></ion-icon>
+          </div>
+        </div>
+        <div class="floor-plan-meta">
+          <div class="floor-plan-title">{{ plan.title }}</div>
+          <div class="floor-plan-subtitle" *ngIf="plan.subtitle">{{ plan.subtitle }}</div>
+        </div>
+      </button>
+    </div>
   </ng-container>
 
   <iframe

src/app/pages/conference-map/conference-map.page.scss

@@ -1,3 +1,69 @@
-.floor-img {
-  width: 100vw;
+.floor-plan-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+}
+
+.floor-plan-card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: var(--ion-card-background, var(--ion-item-background, #fff));
+  border: 1px solid var(--ion-color-step-150, rgba(0, 0, 0, 0.08));
+  border-radius: 14px;
+  overflow: hidden;
+  padding: 0;
+  text-align: left;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  transition: transform 80ms ease, box-shadow 80ms ease;
+}
+
+.floor-plan-card:active {
+  transform: scale(0.99);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);
+}
+
+.floor-plan-thumb-wrap {
+  position: relative;
+  width: 100%;
+  background: #ffffff;
+}
+
+.floor-plan-thumb {
+  width: 100%;
+  display: block;
+}
+
+.floor-plan-zoom-hint {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  pointer-events: none;
+}
+
+.floor-plan-meta {
+  padding: 10px 14px 12px;
+}
+
+.floor-plan-title {
+  font-weight: 600;
+  font-size: 15px;
+  color: var(--ion-text-color);
+}
+
+.floor-plan-subtitle {
+  margin-top: 2px;
+  font-size: 13px;
+  color: var(--ion-color-medium);
 }

src/app/pages/conference-map/conference-map.page.ts

@@ -1,10 +1,20 @@
 import { Component, ViewChild } from '@angular/core';
+import { ModalController } from '@ionic/angular';
 
 import { ExpoHallMapComponent } from '../../expo-hall-map/expo-hall-map.component';
+import { FloorPlanModalComponent } from '../../floor-plan-modal/floor-plan-modal.component';
 import { LiveUpdateService } from '../../providers/live-update.service';
 
 type MapView = 'floor-plans' | '3d-tour' | 'expo-hall';
 
+interface FloorPlan {
+  id: string;
+  title: string;
+  subtitle?: string;
+  thumb: string;
+  full: string;
+}
+
 @Component({
   selector: 'app-conference-map',
   templateUrl: './conference-map.page.html',
@@ -15,11 +25,55 @@ export class ConferenceMapPage {
 
   mapView: MapView = 'floor-plans';
 
+  floorPlans: FloorPlan[] = [
+    {
+      id: 'concourse',
+      title: 'Concourse Level',
+      subtitle: 'Tutorials, Talk Track, Registration, Expo entry',
+      thumb: 'assets/img/floor-plans/floor-plan-1-thumb.jpg',
+      full: 'assets/img/floor-plans/floor-plan-1.jpg',
+    },
+    {
+      id: 'upper',
+      title: 'Upper Level',
+      subtitle: 'Talk Track, Sponsor Presentations, Speaker Ready, Summits',
+      thumb: 'assets/img/floor-plans/floor-plan-2-thumb.jpg',
+      full: 'assets/img/floor-plans/floor-plan-2.jpg',
+    },
+    {
+      id: 'arena',
+      title: 'Arena & Exhibit Halls',
+      subtitle: 'Keynotes, Lightning Talks, Expo Hall, Job Fair',
+      thumb: 'assets/img/floor-plans/floor-plan-3-thumb.jpg',
+      full: 'assets/img/floor-plans/floor-plan-3.jpg',
+    },
+    {
+      id: 'seaside',
+      title: 'Seaside Meeting Rooms',
+      subtitle: 'Sprints, Open Spaces, PyLadies Auction, Web Assembly Summit',
+      thumb: 'assets/img/floor-plans/floor-plan-4-thumb.jpg',
+      full: 'assets/img/floor-plans/floor-plan-4.jpg',
+    },
+  ];
+
   constructor(
     public liveUpdateService: LiveUpdateService,
+    private modalCtrl: ModalController,
   ) { }
 
   toggleExpoSearch() {
     this.expoMap?.toggleSearch();
   }
+
+  async openFloorPlan(plan: FloorPlan) {
+    const modal = await this.modalCtrl.create({
+      component: FloorPlanModalComponent,
+      componentProps: {
+        title: plan.title,
+        imageSrc: plan.full,
+        altText: `${plan.title} floor plan`,
+      },
+    });
+    await modal.present();
+  }
 }