Add tooltip and popup markers (#5)

* Added getting information about icons from Figma * Added getting links to icons * restructuring inside the tools folder * Fetching components only with export settings * load icon in local folder * uploading icons from Figma to a local folder * export only svg files * refactor * optimize svg and filter fallback icons * generate types for icons * generate icons list in md file * filter fill-opacity icons * default marker * add nanospinner in cli tool * path as common constants, nanospinner error in catch * show pin with icon * fetch colors from Figma * color props * optional props * custom color * add fallback icon * size props in marker * Downscale if no small icon * upgrade markers * download icons * fix * took chunk function from lodash * rename generated files * add tooltip marker * tooltip combined positions, tooltip offset * support dark theme * separated tooltip and balloon * add default popup * remove close callback from popup content * remove mock MMapPopupMarker * add overrides * popups examples * add unit-tests * add prefix in css * add open animations * remove __impl * add popup in default marker * fix popup in marker * Rename ballon to popup * Rename tooltip to text-popup * fix issues * remove text popup and default popup * fix
mappable-world · May 14, 2024 · 047437d · 047437d
1 parent 908fc46
commit 047437d
Show file tree

Hide file tree

Showing 29 changed files with 1,611 additions and 12 deletions.
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,36 @@
+<!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" />
+    </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,45 @@
+import {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, useMemo} = 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 = useMemo(() => ({content: () => <span>Marker popup</span>}), []);
+
+        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,34 @@
+<!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" />
+    </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,38 @@
+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: {
+            content: () => {
+                const popup = document.createElement('span');
+                popup.textContent = 'Marker popup';
+                return popup;
+            }
+        }
+    });
+
+    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,35 @@
+<!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" />
+    </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,53 @@
+import {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 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, refMap, setNormalSize, setSmallSize, setMicroSize};
+        },
+        template: `
+            <MMap :location="LOCATION" :ref="refMap">
+                <MMapDefaultSchemeLayer />
+                <MMapDefaultFeaturesLayer />
+                <MMapDefaultMarker :coordinates="CENTER" iconName="fallback" :size="size">
+                    <template #popupContent>
+                        <span>Marker popup</span>
+                    </template>
+                </MMapDefaultMarker>
+                <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/example/popups-on-map/close.svg b/example/popups-on-map/close.svg
diff --git a/example/popups-on-map/common.css b/example/popups-on-map/common.css
@@ -0,0 +1,81 @@
+.popup {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+}
+
+.header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 8px;
+    padding-right: 20px;
+
+    .header_title {
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 22px;
+        color: #050d33;
+    }
+    .header_close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 32px;
+        height: 32px;
+        border: none;
+        background: none;
+        color: #c8c9cc;
+        cursor: pointer;
+        background-image: url('./close.svg?inline');
+        background-position: center;
+        background-repeat: no-repeat;
+    }
+}
+
+.description {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    color: #7b7d85;
+}
+
+.action {
+    width: max-content;
+    padding: 12px 16px;
+    border-radius: 8px;
+    border: none;
+    background-color: #eefd7d;
+    transition: background-color 0.1s ease-out;
+    color: #050d33;
+    text-align: center;
+    cursor: pointer;
+    white-space: normal;
+
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+}
+
+.action:hover {
+    background-color: #e5fd30;
+}
+
+._dark {
+    .header_title {
+        color: #f2f5fa;
+    }
+    .header_close {
+        color: #46464d;
+    }
+    .description {
+        color: #7b7d85;
+    }
+    .action {
+        background-color: #d6fd63;
+    }
+}
diff --git a/example/popups-on-map/common.ts b/example/popups-on-map/common.ts
@@ -0,0 +1,12 @@
+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 POPUP_TEXT = 'Default text popup';
+export const CUSTOM_POPUP_COORDS: LngLat = [CENTER[0] - 0.02, CENTER[1]];
+export const TEXT_POPUP_COORDS: LngLat = [CENTER[0] + 0.02, CENTER[1]];
+
+export const TITLE = 'Default popup marker';
+export const DESCRIPTION = 'Description for default popup';
+export const ACTION = 'Make an action';
diff --git a/example/popups-on-map/react/index.html b/example/popups-on-map/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>