Add control of rotation and tilt to the map (#1)

Add controls: * MMapRotateControl - the control for rotating the map * MMapTiltControl - the control to tilt the map * MMapRotateTiltControl - a combined control for tilting and rotating the map
mappable-world · Apr 10, 2024 · f961dd5 · f961dd5
1 parent e64946d
commit f961dd5
Show file tree

Hide file tree

Showing 30 changed files with 1,508 additions and 223 deletions.
diff --git a/example/common.css b/example/common.css
@@ -0,0 +1,26 @@
+html,
+body,
+#app {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+}
+
+#app {
+    background-color: #f5f5f5;
+}
+
+.content {
+    width: 1024px;
+    margin: 0 auto;
+}
+
+.version {
+    font-size: 14px;
+    padding: 10px 0;
+    color: #999;
+    text-align: right;
+}
diff --git a/example/rotate-tilt-controls/common.js b/example/rotate-tilt-controls/common.js
@@ -0,0 +1,23 @@
+mappable.import.loaders.unshift(async (pkg) => {
+    if (!pkg.startsWith('@mappable-world/mappable-default-ui-theme')) {
+        return;
+    }
+
+    if (location.href.includes('localhost')) {
+        await mappable.import.script(`/dist/index.js`);
+    } else {
+        await mappable.import.script(`https://unpkg.com/${pkg}/dist/index.js`);
+    }
+    // @ts-ignore
+    return window['@mappable-world/mappable-default-ui-theme'];
+});
+
+const BOUNDS = [
+    [54.58311, 25.9985],
+    [56.30248, 24.47889]
+];
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const LOCATION = {bounds: BOUNDS};
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const ENABLED_BEHAVIORS = ['drag', 'scrollZoom', 'dblClick', 'mouseTilt', 'mouseRotate'];
diff --git a/example/rotate-tilt-controls/react.html b/example/rotate-tilt-controls/react.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html>
+    <head>
+        <title>React rotate tilt control example @mappable-world/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 src="common.js"></script>
+
+        <script type="text/babel">
+            window.map = null;
+
+            main();
+            async function main() {
+                // For each object in the JS API, there is a React counterpart
+                // To use the React version of the API, include the module @mappable-world/mappable-reactify
+                const [mappableReact] = await Promise.all([
+                    mappable.import('@mappable-world/mappable-reactify'),
+                    mappable.ready
+                ]);
+                const reactify = mappableReact.reactify.bindTo(React, ReactDOM);
+                const {MMap, MMapControls, MMapDefaultSchemeLayer} = reactify.module(mappable);
+                const {MMapRotateTiltControl, MMapTiltControl, MMapRotateControl, MMapZoomControl} = reactify.module(
+                    await mappable.import('@mappable-world/mappable-default-ui-theme')
+                );
+                const {useState} = React;
+
+                function App() {
+                    const [location, setLocation] = useState(LOCATION);
+
+                    return (
+                        // Initialize the map and pass initialization parameters
+                        <MMap
+                            location={location}
+                            behaviors={ENABLED_BEHAVIORS}
+                            showScaleInCopyrights={true}
+                            ref={(x) => (map = x)}
+                        >
+                            {/* Add a map scheme layer */}
+                            <MMapDefaultSchemeLayer />
+                            <MMapControls position="right">
+                                <MMapRotateTiltControl />
+                                <MMapRotateControl />
+                                <MMapTiltControl />
+                            </MMapControls>
+                        </MMap>
+                    );
+                }
+
+                ReactDOM.render(
+                    <React.StrictMode>
+                        <App />
+                    </React.StrictMode>,
+                    document.getElementById('app')
+                );
+            }
+        </script>
+
+        <link rel="stylesheet" href="../common.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+</html>
diff --git a/example/rotate-tilt-controls/vanilla.html b/example/rotate-tilt-controls/vanilla.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Vanilla rotate tilt control example @mappable-world/mappable-default-ui-theme</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+        <script src="https://js.api.mappable.world/3.0/?apikey=%APIKEY%&lang=en_US"></script>
+        <script src="common.js"></script>
+        <script>
+            window.map = null;
+
+            main();
+            async function main() {
+                // Waiting for all api elements to be loaded
+                await mappable.ready;
+                const {MMap, MMapControls, MMapDefaultSchemeLayer} = mappable;
+                const {MMapRotateTiltControl, MMapTiltControl, MMapRotateControl} = await mappable.import(
+                    '@mappable-world/mappable-default-ui-theme'
+                );
+                // Initialize the map
+                map = new MMap(
+                    // Pass the link to the HTMLElement of the container
+                    document.getElementById('app'),
+                    // Pass the map initialization parameters
+                    {location: LOCATION, showScaleInCopyrights: true, behaviors: ENABLED_BEHAVIORS},
+                    // Add a map scheme layer
+                    [new MMapDefaultSchemeLayer({})]
+                );
+
+                map.addChild(
+                    new MMapControls({position: 'right'}, [
+                        new MMapRotateTiltControl({}),
+                        new MMapRotateControl({}),
+                        new MMapTiltControl({})
+                    ])
+                );
+            }
+        </script>
+
+        <link rel="stylesheet" href="../common.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+</html>
diff --git a/example/rotate-tilt-controls/vue.html b/example/rotate-tilt-controls/vue.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Vue rotate tilt control example @mappable-world/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 src="common.js"></script>
+
+        <script type="text/babel">
+            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, MMapControls, MMapDefaultSchemeLayer} = vuefy.module(mappable);
+                const {MMapRotateTiltControl, MMapTiltControl, MMapRotateControl, MMapZoomControl} = vuefy.module(
+                    await mappable.import('@mappable-world/mappable-default-ui-theme')
+                );
+                const app = Vue.createApp({
+                    components: {
+                        MMap,
+                        MMapControls,
+                        MMapDefaultSchemeLayer,
+                        MMapRotateTiltControl,
+                        MMapTiltControl,
+                        MMapRotateControl,
+                        MMapZoomControl
+                    },
+                    setup() {
+                        const refMap = (ref) => {
+                            window.map = ref?.entity;
+                        };
+                        return {LOCATION, ENABLED_BEHAVIORS, refMap};
+                    },
+                    template: `
+                        <MMap :location="LOCATION" :behaviors="ENABLED_BEHAVIORS" :showScaleInCopyrights="true" :ref="refMap">
+                            <MMapDefaultSchemeLayer />
+                            <MMapControls position="right">
+                                <MMapRotateTiltControl />
+                                <MMapRotateControl />
+                                <MMapTiltControl />
+                            </MMapControls>
+                        </MMap>`
+                });
+                app.mount('#app');
+            }
+        </script>
+
+        <link rel="stylesheet" href="../common.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+</html>