mappable-world · matthew44-mappable · May 14, 2024 · Mar 19, 2024 · Mar 19, 2024 · Mar 19, 2024
diff --git a/example/default-popups/common.css b/example/default-popups/common.css
@@ -0,0 +1,18 @@
+.custom-popup {
+    display: grid;
+    max-width: inherit;
+    grid-template-columns: 120px 64px;
+    grid-template-rows: repeat(2, 1fr);
+    gap: 10px;
+
+    & .title {
+        font-weight: bold;
+        font-size: 18px;
+    }
+
+    & .content {
+        width: 100%;
+        font-size: 16px;
+        grid-column: 1 / 3;
+    }
+}
diff --git a/example/default-popups/common.ts b/example/default-popups/common.ts
@@ -0,0 +1,7 @@
+import type {LngLat, MMapLocationRequest} from '@mappable-world/mappable-types';
+
+const CENTER: LngLat = [55.442795, 25.24107];
+export const LOCATION: MMapLocationRequest = {center: CENTER, zoom: 14};
+
+export const CUSTOM_POPUP_COORDS: LngLat = [CENTER[0] - 0.02, CENTER[1]];
+export const DEFAULT_POPUP_COORDS: LngLat = [CENTER[0] + 0.02, CENTER[1]];
diff --git a/example/default-popups/react/index.html b/example/default-popups/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/default-popups/react/index.tsx b/example/default-popups/react/index.tsx
@@ -0,0 +1,70 @@
+import {CUSTOM_POPUP_COORDS, DEFAULT_POPUP_COORDS, 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 {MMapPopupMarker, MMapDefaultPopupMarker} = 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 [showDefaultPopup, setShowDefaultPopup] = useState(true);
+        const [showCustomPopup, setShowCustomPopup] = useState(true);
+
+        const toggleDefaultPopup = useCallback(() => setShowDefaultPopup((prev) => !prev), [showDefaultPopup]);
+        const toggleCustomPopup = useCallback(() => setShowCustomPopup((prev) => !prev), [showCustomPopup]);
+        const actionCallback = useCallback(() => alert('Click on action button!'), []);
+        const contentCallback = useCallback(
+            () => (
+                <div className="custom-popup">
+                    <div className="title">Title</div>
+                    <button onClick={onCloseCustomPopup}>close</button>
+                    <div className="content">Custom popup content</div>
+                </div>
+            ),
+            []
+        );
+        const onCloseCustomPopup = useCallback(() => setShowCustomPopup(false), [showCustomPopup]);
+        const onCloseDefaultPopup = useCallback(() => setShowDefaultPopup(false), [showDefaultPopup]);
+
+        return (
+            <MMap location={location} ref={(x) => (map = x)}>
+                <MMapDefaultSchemeLayer />
+                <MMapDefaultFeaturesLayer />
+                <MMapControls position="top right">
+                    <MMapControlButton text="Toggle custom popup" onClick={toggleCustomPopup} />
+                    <MMapControlButton text="Toggle default popup" onClick={toggleDefaultPopup} />
+                </MMapControls>
+
+                <MMapPopupMarker show={showCustomPopup} coordinates={CUSTOM_POPUP_COORDS} content={contentCallback} />
+
+                <MMapDefaultPopupMarker
+                    show={showDefaultPopup}
+                    coordinates={DEFAULT_POPUP_COORDS}
+                    title="Default popup marker"
+                    description="Description for default popup"
+                    action="Make an action"
+                    onAction={actionCallback}
+                    onClose={onCloseDefaultPopup}
+                />
+            </MMap>
+        );
+    }
+}
diff --git a/example/default-popups/vanilla/index.html b/example/default-popups/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/default-popups/vanilla/index.ts b/example/default-popups/vanilla/index.ts
@@ -0,0 +1,65 @@
+import {CUSTOM_POPUP_COORDS, DEFAULT_POPUP_COORDS, LOCATION} from '../common';
+window.map = null;
+
+main();
+async function main() {
+    await mappable.ready;
+    const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls, MMapControlButton} = mappable;
+
+    const {MMapPopupMarker, MMapDefaultPopupMarker} = 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({}));
+
+    map.addChild(
+        new MMapControls({position: 'top right'}, [
+            new MMapControlButton({
+                text: 'Toggle custom popup',
+                onClick: () => customPopup.update({show: !customPopup.isOpen})
+            }),
+            new MMapControlButton({
+                text: 'Toggle default popup',
+                onClick: () => defaultPopup.update({show: !defaultPopup.isOpen})
+            })
+        ])
+    );
+
+    const customPopup = new MMapPopupMarker({
+        coordinates: CUSTOM_POPUP_COORDS,
+        content: () => {
+            const popupElement = document.createElement('div');
+            popupElement.classList.add('custom-popup');
+
+            const titleElement = document.createElement('div');
+            titleElement.classList.add('title');
+            titleElement.textContent = 'Title';
+            popupElement.appendChild(titleElement);
+
+            const closeButton = document.createElement('button');
+            closeButton.textContent = 'close';
+            closeButton.addEventListener('click', () => customPopup.update({show: false}));
+            popupElement.appendChild(closeButton);
+
+            const contentElement = document.createElement('div');
+            contentElement.classList.add('content');
+            contentElement.textContent = 'Custom popup content';
+            popupElement.appendChild(contentElement);
+
+            return popupElement;
+        }
+    });
+    map.addChild(customPopup);
+
+    const defaultPopup = new MMapDefaultPopupMarker({
+        coordinates: DEFAULT_POPUP_COORDS,
+        title: 'Default popup marker',
+        description: 'Description for default popup',
+        action: 'Make an action',
+        onAction: () => alert('Click on action button!')
+    });
+    map.addChild(defaultPopup);
+}
diff --git a/example/default-popups/vue/index.html b/example/default-popups/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/default-popups/vue/index.ts b/example/default-popups/vue/index.ts
@@ -0,0 +1,84 @@
+import {CUSTOM_POPUP_COORDS, DEFAULT_POPUP_COORDS, 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 {MMapPopupMarker, MMapDefaultPopupMarker} = vuefy.module(
+        await mappable.import('@mappable-world/mappable-default-ui-theme')
+    );
+
+    const app = Vue.createApp({
+        components: {
+            MMap,
+            MMapDefaultSchemeLayer,
+            MMapDefaultFeaturesLayer,
+            MMapControls,
+            MMapControlButton,
+            MMapPopupMarker,
+            MMapDefaultPopupMarker
+        },
+        setup() {
+            const location = Vue.ref(LOCATION);
+            const showDefaultPopup = Vue.ref(true);
+            const showCustomPopup = Vue.ref(true);
+            const refMap = (ref: any) => {
+                window.map = ref?.entity;
+            };
+
+            const toggleDefaultPopup = () => (showDefaultPopup.value = !showDefaultPopup.value);
+            const toggleCustomPopup = () => (showCustomPopup.value = !showCustomPopup.value);
+            const actionCallback = () => alert('Click on action button!');
+            const onCloseCustomPopup = () => (showCustomPopup.value = false);
+            const onCloseDefaultPopup = () => (showDefaultPopup.value = false);
+
+            return {
+                location,
+                refMap,
+                toggleCustomPopup,
+                toggleDefaultPopup,
+                onCloseCustomPopup,
+                onCloseDefaultPopup,
+                actionCallback,
+                showCustomPopup,
+                showDefaultPopup,
+                CUSTOM_POPUP_COORDS,
+                DEFAULT_POPUP_COORDS
+            };
+        },
+        template: `
+            <MMap :location="location" :ref="refMap">
+                <MMapDefaultSchemeLayer />
+                <MMapDefaultFeaturesLayer />
+                <MMapControls position="top right">
+                    <MMapControlButton text="Toggle custom popup" :onClick="toggleCustomPopup" />
+                    <MMapControlButton text="Toggle default popup" :onClick="toggleDefaultPopup" />
+                </MMapControls>
+                <MMapPopupMarker :show="showCustomPopup" :coordinates="CUSTOM_POPUP_COORDS">
+                    <template #content>
+                        <div class="custom-popup">
+                            <div class="title">Title</div>
+                            <button :onClick="onCloseCustomPopup">close</button>
+                            <div class="content">Custom popup content</div>
+                        </div>
+                    </template>
+                </MMapPopupMarker>
+                <MMapDefaultPopupMarker
+                    :show="showDefaultPopup"
+                    :coordinates="DEFAULT_POPUP_COORDS"
+                    title="Default popup marker"
+                    description="Description for default popup"
+                    action="Make an action"
+                    :onAction="actionCallback"
+                    :onClose="onCloseDefaultPopup"
+                />
+            </MMap>`
+    });
+    app.mount('#app');
+}
diff --git a/example/default-tooltip/common.ts b/example/default-tooltip/common.ts
@@ -0,0 +1,5 @@
+import type {MMapLocationRequest, LngLat} from '@mappable-world/mappable-types';
+
+export const CENTER: LngLat = [55.442795, 25.24107];
+export const LOCATION: MMapLocationRequest = {center: CENTER, zoom: 14};
+export const TOOLTIP_TEXT = 'Default tooltip';