Add default ruler (#33)

Fixes #
mappable-world · Sep 6, 2024 · cb2c322 · cb2c322
1 parent 0e18f58
commit cb2c322
Show file tree

Hide file tree

Showing 25 changed files with 797 additions and 10 deletions.
diff --git a/example/README.md b/example/README.md
@@ -99,6 +99,24 @@ For `MMapPopupMarker`:
 
 There is a [live example](./popups-on-map/vanilla/index.html) for `MMapPopupMarker` to demonstrate the possibilities of its operation.
 
+## Default ruler
+
+The default MMapDefaultRuler is a ready-made implementation of the MMapRuler module. It has ready-made visual styles and controls,
+including double-clicking to delete a point and a steering wheel with two buttons: Finish for finishing editing and Delete for deleting all points.
+
+| Props name    | Description                                                                                             |
+| ------------- | ------------------------------------------------------------------------------------------------------- |
+| onFinish      | Ruler editing finish callback                                                                           |
+| points        | Ruler points coordinates array                                                                          |
+| zIndex        | Ruler layer zIndex                                                                                      |
+| editable      | Flag that the ruler can be edited                                                                       |
+| onUpdate      | Callback function, when updating the ruler                                                              |
+| onUpdateEnd   | Callback function when the ruler update ends                                                            |
+| onUpdateStart | Callback function when the ruler update starts                                                          |
+| source        | Name for the ruler's data source                                                                        |
+| type          | Type of ruler. `ruler` – line that measures the distance. `planimeter` - polygon that measures the area |
+|               |
+
 ## Examples
 
 - [Add controls to the map](./controls/vanilla/index.html)
@@ -111,3 +129,5 @@ There is a [live example](./popups-on-map/vanilla/index.html) for `MMapPopupMark
   ([source code](https://github.com/mappable-world/mappable-default-ui-theme/tree/main/example/popups-on-map))
 - [Adding a search control to the map](./search-control/vanilla/index.html)
   ([source code](https://github.com/mappable-world/mappable-default-ui-theme/tree/main/example/search-control))
+- [Adding a default ruler to the map](./default-ruler/vanilla/index.html)
+  ([source code](https://github.com/mappable-world/mappable-default-ui-theme/tree/main/example/default-ruler))
diff --git a/example/default-ruler/common.css b/example/default-ruler/common.css
diff --git a/example/default-ruler/common.ts b/example/default-ruler/common.ts
@@ -0,0 +1,12 @@
+import type {LngLat, MMapLocationRequest} from '@mappable-world/mappable-types';
+
+export const LOCATION: MMapLocationRequest = {
+    center: [31.245384, 30.051434], // starting position [lng, lat]
+    zoom: 3 // starting zoom
+};
+
+export const RULER_COORDINATES: LngLat[] = [
+    [-0.128407, 51.506807], // London
+    [31.245384, 30.051434], // Cairo
+    [77.201224, 28.614653] // New Delhi
+];
diff --git a/example/default-ruler/react/index.html b/example/default-ruler/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-ruler/react/index.tsx b/example/default-ruler/react/index.tsx
@@ -0,0 +1,52 @@
+import {RulerType} from '@mappable-world/mappable-types/modules/ruler';
+import {LOCATION, RULER_COORDINATES} from '../common';
+
+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, MMapDefaultSchemeLayer, MMapControls, MMapControlButton} = reactify.module(mappable);
+    const {MMapDefaultRuler} = reactify.module(await mappable.import('@mappable-world/mappable-default-ui-theme'));
+    const {useState, useCallback} = React;
+
+    function App() {
+        const [location] = useState(LOCATION);
+        const [rulerCoordinates] = useState(RULER_COORDINATES);
+        const [rulerType, setRulerType] = useState<RulerType>('ruler');
+        const [editable, setEditable] = useState(true);
+
+        const switchEditable = useCallback(() => setEditable((editable) => !editable), []);
+        const switchType = useCallback(
+            () => setRulerType((rulerType) => (rulerType === 'ruler' ? 'planimeter' : 'ruler')),
+            []
+        );
+        const onFinish = useCallback(() => setEditable(false), []);
+
+        return (
+            // Initialize the map and pass initialization parameters
+            <MMap location={location} showScaleInCopyrights={true} ref={(x) => (map = x)}>
+                {/* Add a map scheme layer */}
+                <MMapDefaultSchemeLayer />
+                <MMapDefaultRuler type={rulerType} points={rulerCoordinates} editable={editable} onFinish={onFinish} />
+
+                <MMapControls position="top right">
+                    <MMapControlButton onClick={switchEditable} text="Switch edit ruler" />
+                </MMapControls>
+                <MMapControls position="top left">
+                    <MMapControlButton onClick={switchType} text="Switch ruler type" />
+                </MMapControls>
+            </MMap>
+        );
+    }
+
+    ReactDOM.render(
+        <React.StrictMode>
+            <App />
+        </React.StrictMode>,
+        document.getElementById('app')
+    );
+}
diff --git a/example/default-ruler/vanilla/index.html b/example/default-ruler/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-ruler/vanilla/index.ts b/example/default-ruler/vanilla/index.ts
@@ -0,0 +1,57 @@
+import {RulerType} from '@mappable-world/mappable-types/modules/ruler';
+import {LOCATION, RULER_COORDINATES} from '../common';
+
+window.map = null;
+
+main();
+async function main() {
+    // Waiting for all api elements to be loaded
+    await mappable.ready;
+    const {MMap, MMapDefaultSchemeLayer, MMapControlButton, MMapControls} = mappable;
+    const {MMapDefaultRuler} = 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},
+        // Add a map scheme layer
+        [new MMapDefaultSchemeLayer({})]
+    );
+
+    let editable = true;
+    let rulerType: RulerType = 'ruler';
+
+    const ruler = new MMapDefaultRuler({
+        type: rulerType,
+        editable,
+        points: RULER_COORDINATES,
+        onFinish: () => {
+            editable = false;
+        }
+    });
+    map.addChild(ruler);
+
+    map.addChild(
+        new MMapControls({position: 'top right'}, [
+            new MMapControlButton({
+                text: 'Switch edit ruler',
+                onClick: () => {
+                    editable = !editable;
+                    ruler.update({editable});
+                }
+            })
+        ])
+    );
+    map.addChild(
+        new MMapControls({position: 'top left'}, [
+            new MMapControlButton({
+                text: 'Switch ruler type',
+                onClick: () => {
+                    rulerType = rulerType === 'ruler' ? 'planimeter' : 'ruler';
+                    ruler.update({type: rulerType});
+                }
+            })
+        ])
+    );
+}
diff --git a/example/default-ruler/vue/index.html b/example/default-ruler/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-ruler/vue/index.ts b/example/default-ruler/vue/index.ts
@@ -0,0 +1,49 @@
+import {RulerType} from '@mappable-world/mappable-types/modules/ruler';
+import {LOCATION, RULER_COORDINATES} from '../common';
+
+window.map = null;
+
+async function main() {
+    // For each object in the JS API, there is a Vue counterpart
+    // To use the Vue version of the API, include the module @mappable-world/mappable-vuefy
+    const [mappableVue] = await Promise.all([mappable.import('@mappable-world/mappable-vuefy'), mappable.ready]);
+    const vuefy = mappableVue.vuefy.bindTo(Vue);
+    const {MMap, MMapDefaultSchemeLayer, MMapControls, MMapControlButton} = vuefy.module(mappable);
+    const {MMapDefaultRuler} = vuefy.module(await mappable.import('@mappable-world/mappable-default-ui-theme'));
+
+    const app = Vue.createApp({
+        components: {MMap, MMapDefaultSchemeLayer, MMapControls, MMapControlButton, MMapDefaultRuler},
+        setup() {
+            const refMap = (ref) => {
+                window.map = ref?.entity;
+            };
+            const editable = Vue.ref(true);
+            const rulerType = Vue.ref<RulerType>('ruler');
+
+            const switchEditable = () => {
+                editable.value = !editable.value;
+            };
+            const switchType = () => {
+                rulerType.value = rulerType.value === 'ruler' ? 'planimeter' : 'ruler';
+            };
+
+            const onFinish = () => {
+                editable.value = false;
+            };
+            return {LOCATION, RULER_COORDINATES, refMap, editable, rulerType, switchEditable, switchType, onFinish};
+        },
+        template: `
+            <MMap :location="LOCATION" :showScaleInCopyrights="true" :ref="refMap">
+                <MMapDefaultSchemeLayer />
+                <MMapDefaultRuler :type="rulerType" :points="RULER_COORDINATES" :editable="editable" :onFinish="onFinish" />
+                <MMapControls position="top right">
+                    <MMapControlButton @click="switchEditable" text="Switch edit ruler" />
+                </MMapControls>
+                <MMapControls position="top left">
+                    <MMapControlButton @click="switchType" text="Switch ruler type" />
+                </MMapControls>
+            </MMap>`
+    });
+    app.mount('#app');
+}
+main();