add popup in default marker

mappable-world · Apr 27, 2024 · c96c272 · c96c272
1 parent e1a9bed
commit c96c272
Show file tree

Hide file tree

Showing 10 changed files with 318 additions and 6 deletions.
diff --git a/example/marker-popup/common.css b/example/marker-popup/common.css
diff --git a/example/marker-popup/common.ts b/example/marker-popup/common.ts
@@ -0,0 +1,5 @@
+import type {LngLat, MMapLocationRequest} from '@mappable-world/mappable-types';
+
+export const CENTER: LngLat = [55.442795, 25.24107];
+
+export const LOCATION: MMapLocationRequest = {center: CENTER, zoom: 9};
diff --git a/example/marker-popup/react/index.html b/example/marker-popup/react/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+    <head>
+        <title>React example mappable-default-ui-theme</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+        <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
+        <script crossorigin src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
+        <script src="https://js.api.mappable.world/3.0/?apikey=%APIKEY%&lang=en_US"></script>
+
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="react, typescript"
+            type="text/babel"
+            src="../../index.ts"
+        ></script>
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="react, typescript"
+            type="text/babel"
+            src="../common.ts"
+        ></script>
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="react, typescript"
+            type="text/babel"
+            src="./index.tsx"
+        ></script>
+
+        <link rel="stylesheet" href="../../index.css" />
+        <link rel="stylesheet" href="../common.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+</html>
diff --git a/example/marker-popup/react/index.tsx b/example/marker-popup/react/index.tsx
@@ -0,0 +1,49 @@
+import {MarkerPopupProps, MarkerSizeProps} from '../../src';
+import {CENTER, LOCATION} from '../common';
+
+window.map = null;
+
+main();
+async function main() {
+    const [mappableReact] = await Promise.all([mappable.import('@mappable-world/mappable-reactify'), mappable.ready]);
+    const reactify = mappableReact.reactify.bindTo(React, ReactDOM);
+
+    const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls, MMapControlButton} =
+        reactify.module(mappable);
+
+    const {useState, useCallback} = React;
+
+    const {MMapDefaultMarker} = reactify.module(await mappable.import('@mappable-world/mappable-default-ui-theme'));
+
+    ReactDOM.render(
+        <React.StrictMode>
+            <App />
+        </React.StrictMode>,
+        document.getElementById('app')
+    );
+
+    function App() {
+        const [location] = useState(LOCATION);
+        const [size, setSize] = useState<MarkerSizeProps>('normal');
+        const [popup] = useState<MarkerPopupProps>({
+            title: 'Popup',
+            description: 'Description for this marker',
+            action: 'Action'
+        });
+
+        return (
+            <MMap location={location} ref={(x) => (map = x)}>
+                <MMapDefaultSchemeLayer />
+                <MMapDefaultFeaturesLayer />
+
+                <MMapDefaultMarker coordinates={CENTER} iconName="fallback" size={size} popup={popup} />
+
+                <MMapControls position="top left">
+                    <MMapControlButton text="Normal" onClick={useCallback(() => setSize('normal'), [])} />
+                    <MMapControlButton text="Small" onClick={useCallback(() => setSize('small'), [])} />
+                    <MMapControlButton text="Micro" onClick={useCallback(() => setSize('micro'), [])} />
+                </MMapControls>
+            </MMap>
+        );
+    }
+}
diff --git a/example/marker-popup/vanilla/index.html b/example/marker-popup/vanilla/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Vanilla example mappable-default-ui-theme</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+        <script crossorigin src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
+        <script src="https://js.api.mappable.world/3.0/?apikey=%APIKEY%&lang=en_US"></script>
+
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="react, typescript"
+            type="text/babel"
+            src="../../index.ts"
+        ></script>
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="typescript"
+            type="text/babel"
+            src="../common.ts"
+        ></script>
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="typescript"
+            type="text/babel"
+            src="./index.ts"
+        ></script>
+
+        <link rel="stylesheet" href="../../index.css" />
+        <link rel="stylesheet" href="../common.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+</html>
diff --git a/example/marker-popup/vanilla/index.ts b/example/marker-popup/vanilla/index.ts
@@ -0,0 +1,36 @@
+import {CENTER, LOCATION} from '../common';
+window.map = null;
+
+main();
+async function main() {
+    await mappable.ready;
+    const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls, MMapControlButton} = mappable;
+
+    const {MMapDefaultMarker} = await mappable.import('@mappable-world/mappable-default-ui-theme');
+
+    map = new MMap(document.getElementById('app'), {location: LOCATION});
+
+    map.addChild(new MMapDefaultSchemeLayer({}));
+    map.addChild(new MMapDefaultFeaturesLayer({}));
+
+    const marker = new MMapDefaultMarker({
+        coordinates: CENTER,
+        iconName: 'fallback',
+        size: 'normal',
+        popup: {
+            title: 'Popup',
+            description: 'Description for this marker',
+            action: 'Action'
+        }
+    });
+
+    map.addChild(marker);
+
+    map.addChild(
+        new MMapControls({position: 'top left'}, [
+            new MMapControlButton({text: 'Normal', onClick: () => marker.update({size: 'normal'})}),
+            new MMapControlButton({text: 'Small', onClick: () => marker.update({size: 'small'})}),
+            new MMapControlButton({text: 'Micro', onClick: () => marker.update({size: 'micro'})})
+        ])
+    );
+}
diff --git a/example/marker-popup/vue/index.html b/example/marker-popup/vue/index.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Vue example mappable-default-ui-theme</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+        <script crossorigin src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+        <script crossorigin src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
+        <script src="https://js.api.mappable.world/3.0/?apikey=%APIKEY%&lang=en_US"></script>
+
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="react, typescript"
+            type="text/babel"
+            src="../../index.ts"
+        ></script>
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="typescript"
+            type="text/babel"
+            src="../common.ts"
+        ></script>
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="typescript"
+            type="text/babel"
+            src="./index.ts"
+        ></script>
+
+        <link rel="stylesheet" href="../../index.css" />
+        <link rel="stylesheet" href="../common.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+</html>
diff --git a/example/marker-popup/vue/index.ts b/example/marker-popup/vue/index.ts
@@ -0,0 +1,54 @@
+import {MarkerPopupProps, MarkerSizeProps} from '../../src';
+import {CENTER, LOCATION} from '../common';
+
+window.map = null;
+
+main();
+async function main() {
+    const [mappableVue] = await Promise.all([mappable.import('@mappable-world/mappable-vuefy'), mappable.ready]);
+    const vuefy = mappableVue.vuefy.bindTo(Vue);
+
+    const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls, MMapControlButton} =
+        vuefy.module(mappable);
+
+    const {MMapDefaultMarker} = vuefy.module(await mappable.import('@mappable-world/mappable-default-ui-theme'));
+
+    const app = Vue.createApp({
+        components: {
+            MMap,
+            MMapDefaultSchemeLayer,
+            MMapDefaultFeaturesLayer,
+            MMapControls,
+            MMapControlButton,
+            MMapDefaultMarker
+        },
+        setup() {
+            const size = Vue.ref<MarkerSizeProps>('normal');
+            const popup = Vue.ref<MarkerPopupProps>({
+                title: 'Popup',
+                description: 'Description for this marker',
+                action: 'Action'
+            });
+            const refMap = (ref: any) => {
+                window.map = ref?.entity;
+            };
+            const setNormalSize = () => (size.value = 'normal');
+            const setSmallSize = () => (size.value = 'small');
+            const setMicroSize = () => (size.value = 'micro');
+
+            return {LOCATION, CENTER, size, popup, refMap, setNormalSize, setSmallSize, setMicroSize};
+        },
+        template: `
+            <MMap :location="LOCATION" :ref="refMap">
+                <MMapDefaultSchemeLayer />
+                <MMapDefaultFeaturesLayer />
+                <MMapDefaultMarker :coordinates="CENTER" iconName="fallback" :size="size" :popup="popup" />
+                <MMapControls position="top left">
+                    <MMapControlButton text="Normal" :onClick="setNormalSize" />
+                    <MMapControlButton text="Small" :onClick="setSmallSize" />
+                    <MMapControlButton text="Micro" :onClick="setMicroSize" />
+                </MMapControls>
+            </MMap>`
+    });
+    app.mount('#app');
+}
diff --git a/src/markers/MMapDefaultMarker/index.ts b/src/markers/MMapDefaultMarker/index.ts
@@ -1,6 +1,7 @@
 import {MMapMarker, MMapMarkerProps} from '@mappable-world/mappable-types';
 import {IconColor, IconName, iconColors, icons} from '../../icons';
 import {MMapDefaultMarkerVuefyOptions} from './vue';
+import {MMapDefaultPopupMarker} from '../';
 
 import microPoiStrokeSVG from './backgrounds/micro-poi-stroke.svg';
 import microPoiSVG from './backgrounds/micro-poi.svg';
@@ -30,9 +31,21 @@ const HINT_SUBTITLE_CLASS = 'mappable--hint-subtitle';
 const HINT_STABLE = 'mappable--hint__stable';
 const HINT_HOVERED = 'mappable--hint__hovered';
 
+const DISTANCE_BETWEEN_POPUP_AND_MARKER = 8;
+
 export type ThemesColor = {day: string; night: string};
 export type MarkerColorProps = IconColor | ThemesColor;
 export type MarkerSizeProps = 'normal' | 'small' | 'micro';
+export type MarkerPopupProps = {
+    /** Displayed title in popup header */
+    title?: string;
+    /** Displayed description */
+    description?: string;
+    /** The inscription on the action button */
+    action?: string;
+    /** Callback of click the action button */
+    onAction?: () => void;
+};
 
 export type MMapDefaultMarkerProps = MMapMarkerProps & {
     iconName?: IconName;
@@ -41,6 +54,7 @@ export type MMapDefaultMarkerProps = MMapMarkerProps & {
     title?: string;
     subtitle?: string;
     staticHint?: boolean;
+    popup?: MarkerPopupProps;
 };
 
 const defaultProps = Object.freeze({color: 'darkgray', size: 'small', staticHint: true});
@@ -64,6 +78,8 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMar
     private _titleHint: HTMLElement;
     private _subtitleHint: HTMLElement;
 
+    private _popup: MMapDefaultPopupMarker;
+
     constructor(props: MMapDefaultMarkerProps) {
         super(props);
     }
@@ -115,9 +131,24 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMar
             this._markerElement.appendChild(this._hintContainer);
         }
 
-        this._marker = new mappable.MMapMarker(this._props, this._markerElement);
+        this._marker = new mappable.MMapMarker(
+            {
+                ...this._props,
+                onClick: this._onMarkerClick
+            },
+            this._markerElement
+        );
         this.addChild(this._marker);
 
+        this._popup = new MMapDefaultPopupMarker({
+            ...this._props,
+            ...this._props.popup,
+            show: false,
+            zIndex: 1000
+        });
+        this._updatePopupOffset();
+        this.addChild(this._popup);
+
         this._watchContext(mappable.ThemeContext, () => this._updateTheme(), {
             immediate: true
         });
@@ -132,6 +163,11 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMar
         if (propsDiff.size !== undefined) {
             this._updateMarkerSize();
             this._updateSVG();
+            this._updatePopupOffset();
+        }
+
+        if (propsDiff.popup !== undefined) {
+            this._popup.update(this._props.popup);
         }
 
         this._titleHint.textContent = title ?? '';
@@ -148,7 +184,7 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMar
             this._hintContainer.classList.toggle(HINT_HOVERED, !this._props.staticHint);
         }
 
-        this._marker.update(this._props);
+        this._marker.update({...this._props, onClick: this._onMarkerClick});
     }
 
     private _createHintContainer(): HTMLElement {
@@ -170,6 +206,11 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMar
         return hintContainer;
     }
 
+    private _onMarkerClick = (event: MouseEvent) => {
+        this._popup.update({show: !this._popup.isOpen});
+        this._props.onClick?.(event);
+    };
+
     private _updateTheme() {
         const themeCtx = this._consumeContext(mappable.ThemeContext);
         const theme = themeCtx.theme;
@@ -222,6 +263,23 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMar
         }
     }
 
+    private _updatePopupOffset() {
+        const {size} = this._props;
+        let offset: number;
+        switch (size) {
+            case 'normal':
+                offset = 59 + DISTANCE_BETWEEN_POPUP_AND_MARKER;
+                break;
+            case 'small':
+                offset = 24 / 2 + DISTANCE_BETWEEN_POPUP_AND_MARKER;
+                break;
+            case 'micro':
+                offset = 14 / 2 + DISTANCE_BETWEEN_POPUP_AND_MARKER;
+                break;
+        }
+        this._popup.update({offset});
+    }
+
     private _getIcon(): string {
         const {size} = this._props;
         if (size === 'micro' || this._props.iconName === undefined) {