Add popups to buildings on realty scene

build/documentalist.js

@@ -8,12 +8,12 @@ mkdirSync('dist', {
 const excludePaths = [
     'src/control/',
     'src/external/',
+    'src/realtyScene/',
     'src/utils/',
     'src/defaultOptions.ts',
     'src/eventSource.ts',
     'src/loader.ts',
     'src/poiGroups.ts',
-    'src/realtyScene.ts',
 ];
 
 new Documentalist()

demo/realtySceneData.ts

@@ -15,6 +15,11 @@ export const realtyScene: BuildingOptions[] = [
             zoom: 19,
             rotation: -41.4,
         },
+        popupOptions: {
+            coordinates: [47.24511721603574, 56.13451456056651],
+            title: 'Корпус 1. 11 этажей',
+            description: 'Срок сдачи: IV кв. 2024 г. <br />15 мин. пешком до ст. м. Московская',
+        },
         floors: [
             {
                 id: '235034',
@@ -148,6 +153,11 @@ export const realtyScene: BuildingOptions[] = [
             zoom: 18.7,
             rotation: -129,
         },
+        popupOptions: {
+            coordinates: [47.24448882381944, 56.13468481517748],
+            title: 'Корпус 1. 16 этажей',
+            description: 'Срок сдачи: IV кв. 2024 г. <br /> 15 мин. пешком до ст. м. Московская',
+        },
         floors: [
             {
                 id: 'aaa777',

src/plugin.ts

@@ -5,7 +5,7 @@ import { Evented } from './external/evented';
 import { EventSource } from './eventSource';
 import { Loader } from './loader';
 import { PoiGroups } from './poiGroups';
-import { RealtyScene } from './realtyScene';
+import { RealtyScene } from './realtyScene/realtyScene';
 import { defaultOptions } from './defaultOptions';
 
 import type {

src/realtyScene/realtyScene.module.css

@@ -0,0 +1,22 @@
+body {
+    font-family: sans-serif;
+}
+
+.popup {
+    position: relative;
+    background: white;
+    padding: 4px 24px;
+    border-radius: 12px;
+    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 10px;
+    max-width: 300px;
+}
+
+.popup h2 {
+    font-size: 18px;
+    padding-right: 16px;
+}
+
+.popup p {
+    font-size: 12px;
+    line-height: 18px;
+}

src/realtyScene.ts → src/realtyScene/realtyScene.ts

@@ -1,16 +1,22 @@
 import * as THREE from 'three';
-import type { Map as MapGL, AnimationOptions } from '@2gis/mapgl/types';
-
-import { EventSource } from './eventSource';
-import { GltfPlugin } from './plugin';
-import { defaultOptions } from './defaultOptions';
-import { GltfFloorControl } from './control';
-import { clone, createCompoundId } from './utils/common';
-
-import type { Id, BuildingState, ModelOptions } from './types/plugin';
-import type { BuildingOptions, MapOptions, BuildingFloorOptions } from './types/realtyScene';
-import type { ControlShowOptions, FloorLevel, FloorChangeEvent } from './control/types';
-import type { PoiGeoJsonProperties } from './types/events';
+import type { Map as MapGL, AnimationOptions, HtmlMarker } from '@2gis/mapgl/types';
+
+import { EventSource } from '../eventSource';
+import { GltfPlugin } from '../plugin';
+import { defaultOptions } from '../defaultOptions';
+import { GltfFloorControl } from '../control';
+import { clone, createCompoundId } from '../utils/common';
+import classes from './realtyScene.module.css';
+
+import type { Id, BuildingState, ModelOptions } from '../types/plugin';
+import type {
+    BuildingOptions,
+    MapOptions,
+    BuildingFloorOptions,
+    PopupOptions,
+} from '../types/realtyScene';
+import type { ControlShowOptions, FloorLevel, FloorChangeEvent } from '../control/types';
+import type { PoiGeoJsonProperties } from '../types/events';
 
 export class RealtyScene {
     private activeBuilding?: BuildingOptions;
@@ -22,6 +28,8 @@ export class RealtyScene {
     // this field is needed when the highlighted
     // model is placed under the floors' control
     private prevHoveredModelId: Id | null = null;
+    private popup: HtmlMarker | null = null;
+    private scene: BuildingOptions[] | null = null;
 
     constructor(
         private plugin: GltfPlugin,
@@ -57,6 +65,7 @@ export class RealtyScene {
         // initialize initial scene
         const models: ModelOptions[] = [];
         const modelIds: Id[] = [];
+        this.scene = scene;
         scene.forEach((scenePart) => {
             this.buildingFacadeIds.push(scenePart.modelId);
 
@@ -176,6 +185,10 @@ export class RealtyScene {
                 if (this.isFacadeBuilding(id)) {
                     this.container.style.cursor = 'pointer';
                     this.toggleHighlightModel(id);
+                    let popupOptions = this.getPopupOptions(id);
+                    if (popupOptions) {
+                        this.showPopup(popupOptions);
+                    }
                 }
             }
         });
@@ -185,6 +198,7 @@ export class RealtyScene {
                 const id = ev.target.modelId;
                 if (this.isFacadeBuilding(id)) {
                     this.container.style.cursor = '';
+                    this.hidePopup();
                     if (this.prevHoveredModelId !== null) {
                         this.toggleHighlightModel(id);
                     }
@@ -257,6 +271,17 @@ export class RealtyScene {
         return this.buildingFacadeIds.includes(modelId);
     }
 
+    private getPopupOptions(modelId: Id): PopupOptions | undefined {
+        if (this.scene === null) {
+            return;
+        }
+        let building = this.scene.find((building) => building.modelId === modelId);
+        if (building === undefined) {
+            return;
+        }
+        return building.popupOptions;
+    }
+
     private poiClickHandler(data: PoiGeoJsonProperties) {
         const url: string | undefined = data.userData.url;
         if (url !== undefined) {
@@ -270,6 +295,10 @@ export class RealtyScene {
     private floorChangeHandler(ev: FloorChangeEvent) {
         const model = this.activeBuilding;
         if (model !== undefined && model.floors !== undefined) {
+            if (this.popup !== null) {
+                this.popup.destroy();
+            }
+
             // click to the building button
             if (ev.floorId === undefined) {
                 if (this.prevHoveredModelId !== null) {
@@ -329,6 +358,10 @@ export class RealtyScene {
         // started to interact with the building
         this.container.style.cursor = '';
 
+        if (this.popup !== null) {
+            this.popup.destroy();
+        }
+
         // if there is a visible floor plan, then show the external
         // facade of the active building before focusing on the new building
         if (
@@ -465,4 +498,31 @@ export class RealtyScene {
         this.prevHoveredModelId = shouldUnsetFlag ? null : modelId;
         this.map.triggerRerender();
     }
+
+    private showPopup(options: PopupOptions) {
+        this.popup = new mapgl.HtmlMarker(this.map, {
+            coordinates: options.coordinates,
+            html: this.getPopupHtml(options),
+        });
+    }
+
+    private hidePopup() {
+        if (this.popup !== null) {
+            this.popup.destroy();
+            this.popup = null;
+        }
+    }
+
+    private getPopupHtml(data: PopupOptions) {
+        if (data.description === undefined) {
+            return `<div class="${classes.popup}">
+                <h2>${data.title}</h2>
+            </div>`;
+        }
+
+        return `<div class="${classes.popup}">
+            <h2>${data.title}</h2>
+            <p>${data.description}</p>
+        </div>`;
+    }
 }

src/types/realtyScene.ts

@@ -52,6 +52,18 @@ export interface BuildingFloorOptions {
     mapOptions?: MapOptions;
 }
 
+export interface PopupOptions {
+    coordinates: number[];
+    /**
+     * Title of popup that appears on hover
+     */
+    title: string;
+    /**
+     * Description of popup that appears on hover
+     */
+    description?: string;
+}
+
 /**
  * Options for a building on the realty scene
  */
@@ -64,4 +76,8 @@ export interface BuildingOptions extends ModelOptions {
      * List of the floors' plans connected with the particular building
      */
     floors?: BuildingFloorOptions[];
+    /**
+     * Popup options
+     */
+    popupOptions?: PopupOptions;
 }