add zoom and geolocation controls (#4)

Add new controls: * Zoom control * Geolocation control
mappable-world · Apr 10, 2024 · 488f91d · 488f91d
1 parent f961dd5
commit 488f91d
Show file tree

Hide file tree

Showing 44 changed files with 1,241 additions and 206 deletions.
diff --git a/example/case-template/vue/index.ts b/example/case-template/vue/index.ts
@@ -23,7 +23,7 @@ async function main() {
             MMapButtonExample
         },
         setup() {
-            const refMap = (ref) => {
+            const refMap = (ref: any) => {
                 window.map = ref?.entity;
             };
             const onClick = () => alert('Click!');

diff --git a/example/common.css b/example/common.css
diff --git a/example/geolocation-control/common.css b/example/geolocation-control/common.css
diff --git a/example/geolocation-control/common.ts b/example/geolocation-control/common.ts
@@ -0,0 +1,8 @@
+import type {MMapLocationRequest, LngLatBounds} from '@mappable-world/mappable-types';
+
+const BOUNDS: LngLatBounds = [
+    [54.58311, 25.9985],
+    [56.30248, 24.47889]
+];
+
+export const LOCATION: MMapLocationRequest = {bounds: BOUNDS};
diff --git a/example/geolocation-control/react/index.html b/example/geolocation-control/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/geolocation-control/react/index.tsx b/example/geolocation-control/react/index.tsx
@@ -0,0 +1,38 @@
+import {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} = reactify.module(mappable);
+
+    const {useState} = React;
+
+    const {MMapGeolocationControl} = 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);
+
+        return (
+            <MMap location={location} ref={(x) => (map = x)}>
+                <MMapDefaultSchemeLayer />
+                <MMapDefaultFeaturesLayer />
+                <MMapControls position="right">
+                    <MMapGeolocationControl />
+                </MMapControls>
+            </MMap>
+        );
+    }
+}
diff --git a/example/geolocation-control/vanilla/index.html b/example/geolocation-control/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/geolocation-control/vanilla/index.ts b/example/geolocation-control/vanilla/index.ts
@@ -0,0 +1,17 @@
+import {LOCATION} from '../common';
+window.map = null;
+
+main();
+async function main() {
+    await mappable.ready;
+    const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = mappable;
+
+    const {MMapGeolocationControl} = 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: 'right'}).addChild(new MMapGeolocationControl({})));
+}
diff --git a/example/geolocation-control/vue/index.html b/example/geolocation-control/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/geolocation-control/vue/index.ts b/example/geolocation-control/vue/index.ts
@@ -0,0 +1,39 @@
+import {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} = vuefy.module(mappable);
+
+    const {MMapGeolocationControl} = vuefy.module(await mappable.import('@mappable-world/mappable-default-ui-theme'));
+
+    const app = Vue.createApp({
+        components: {
+            MMap,
+            MMapDefaultSchemeLayer,
+            MMapDefaultFeaturesLayer,
+            MMapControls,
+            MMapGeolocationControl
+        },
+        setup() {
+            const refMap = (ref: any) => {
+                window.map = ref?.entity;
+            };
+            const onClick = () => alert('Click!');
+            return {LOCATION, refMap, onClick};
+        },
+        template: `
+            <MMap :location="LOCATION" :ref="refMap">
+                <MMapDefaultSchemeLayer />
+                <MMapDefaultFeaturesLayer />
+                <MMapControls position="right">
+                    <MMapGeolocationControl />
+                </MMapControls>
+            </MMap>`
+    });
+    app.mount('#app');
+}
diff --git a/example/rotate-tilt-controls/common.js → example/rotate-tilt-controls/common.ts b/example/rotate-tilt-controls/common.js → example/rotate-tilt-controls/common.ts
@@ -1,3 +1,5 @@
+import {BehaviorType, LngLatBounds, MMapBoundsLocation} from '@mappable-world/mappable-types';
+
 mappable.import.loaders.unshift(async (pkg) => {
     if (!pkg.startsWith('@mappable-world/mappable-default-ui-theme')) {
         return;
@@ -12,12 +14,10 @@ mappable.import.loaders.unshift(async (pkg) => {
     return window['@mappable-world/mappable-default-ui-theme'];
 });
 
-const BOUNDS = [
+const BOUNDS: LngLatBounds = [
     [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'];
+export const LOCATION: MMapBoundsLocation = {bounds: BOUNDS};
+export const ENABLED_BEHAVIORS: BehaviorType[] = ['drag', 'scrollZoom', 'dblClick', 'mouseTilt', 'mouseRotate'];
diff --git a/example/rotate-tilt-controls/react.html b/example/rotate-tilt-controls/react.html
diff --git a/example/rotate-tilt-controls/react/index.html b/example/rotate-tilt-controls/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>