Moving the map

vanilla.html

react.html

vue.html

variables.ts

common.ts

common.css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
        <script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>

        <!-- To make the map appear, you must add your apikey -->
        <script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></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="../variables.ts"
        ></script>
        <script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
            import {CAMERA, DEFAULT_LOCATION_SETTINGS} from './common';
            import {BUTTONS_TITLES, LOCATIONS} from '../variables';
            
            window.map = null;
            
            main();
            
            type ButtonProps = {
                title: string;
                onClick: () => void;
            };
            
            async function main() {
                // Waiting for all api elements to be loaded
                await mappable.ready;
                const {MMap, MMapDefaultSchemeLayer, MMapControl, MMapControls} = mappable;
            
                let currentLocationIndex = 0;
                let currentZoomIndex = 0;
            
                // Initialize the map
                map = new MMap(
                    // Pass the link to the HTMLElement of the container
                    document.getElementById('app'),
                    // Pass the map initialization parameters
                    {location: LOCATIONS[currentLocationIndex][currentZoomIndex], showScaleInCopyrights: true, camera: CAMERA},
                    // Add a map scheme layer
                    [new MMapDefaultSchemeLayer({})]
                );
            
                class ButtonClass extends mappable.MMapComplexEntity<ButtonProps> {
                    private _element!: HTMLButtonElement;
            
                    private _detachDom!: () => void;
            
                    // Method for create a DOM control element
                    _createElement(props: ButtonProps) {
                        // Create a root element
                        const buttonElement = document.createElement('button');
                        buttonElement.classList.add('btn');
                        buttonElement.onclick = props.onClick;
                        buttonElement.innerText = props.title;
                        return buttonElement;
                    }
            
                    // Method for attaching the control to the map
                    _onAttach() {
                        this._element = this._createElement(this._props);
                        this._detachDom = mappable.useDomContext(this, this._element, this._element);
                    }
            
                    // Method for detaching control from the map
                    _onDetach() {
                        this._detachDom();
                        this._detachDom = undefined;
                        this._element = undefined;
                    }
                }
            
                // Moving the center of the map to a point with new coordinates
                const changeCenterHandler = () => {
                    currentLocationIndex += 1;
                    let location = LOCATIONS[currentLocationIndex]?.[currentZoomIndex];
                    if (!location) {
                        location = LOCATIONS[0][currentZoomIndex];
                        currentLocationIndex = 0;
                    }
                    map.update({location: {...location, ...DEFAULT_LOCATION_SETTINGS}, camera: CAMERA});
                };
            
                // Moving the center of the map to a point with new coordinates
                const changeZoomHandler = () => {
                    currentZoomIndex += 1;
                    let location = LOCATIONS[currentLocationIndex]?.[currentZoomIndex];
                    if (!location) {
                        location = LOCATIONS[currentLocationIndex][0];
                        currentZoomIndex = 0;
                    }
                    map.update({location: {...location, ...DEFAULT_LOCATION_SETTINGS}, camera: CAMERA});
                };
            
                const buttonCenterControl = new MMapControl({transparent: true}).addChild(
                    new ButtonClass({
                        title: BUTTONS_TITLES.center,
                        onClick: changeCenterHandler
                    })
                );
            
                const buttonBoundsControl = new MMapControl({transparent: true}).addChild(
                    new ButtonClass({
                        title: BUTTONS_TITLES.bounds,
                        onClick: changeZoomHandler
                    })
                );
            
                map.addChild(
                    new MMapControls(
                        {
                            position: 'top right',
                            orientation: 'vertical'
                        },
                        [buttonCenterControl, buttonBoundsControl]
                    )
                );
            }
        </script>

        <style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; }  </style>
        <link rel="stylesheet" href="./common.css" />
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
        <script crossorigin src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
        <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
        <script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>

        <!-- To make the map appear, you must add your apikey -->
        <script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></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="../variables.ts"
        ></script>
        <script data-plugins="transform-modules-umd" data-presets="react, typescript" type="text/babel">
            import type {MMapLocationRequest} from '@mappable-world/mappable-types';
            import {CAMERA, DEFAULT_LOCATION_SETTINGS} from './common';
            import {BUTTONS_TITLES, LOCATIONS} from '../variables';
            
            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, MMapControl} = reactify.module(mappable);
                const {useState, useCallback} = React;
            
                function App() {
                    const [location, setLocation] = useState<MMapLocationRequest>(LOCATIONS[0][0]);
                    const [currentLocationIndex, setCurrentLocationIndex] = useState(0);
                    const [currentZoomIndex, setCurrentZoomIndex] = useState(0);
            
                    // Moving the center of the map to a point with new coordinates
                    const changeCenterHandler = useCallback(() => {
                        let index = currentLocationIndex + 1;
                        let location = LOCATIONS[index]?.[currentZoomIndex];
                        if (!location) {
                            location = LOCATIONS[0][currentZoomIndex];
                            index = 0;
                        }
                        setLocation({...location, ...DEFAULT_LOCATION_SETTINGS});
                        setCurrentLocationIndex(index);
                    }, [currentLocationIndex, currentZoomIndex]);
            
                    // Moving the center of the map to a point with new coordinates
                    const changeZoomHandler = useCallback(() => {
                        let index = currentZoomIndex + 1;
                        let location = LOCATIONS[currentLocationIndex]?.[index];
                        if (!location) {
                            location = LOCATIONS[currentLocationIndex][0];
                            index = 0;
                        }
                        setLocation({...location, ...DEFAULT_LOCATION_SETTINGS});
                        setCurrentZoomIndex(index);
                    }, [currentLocationIndex, currentZoomIndex]);
            
                    return (
                        // Initialize the map and pass initialization parameters
                        <MMap location={location} showScaleInCopyrights={true} camera={CAMERA} ref={(x) => (map = x)}>
                            {/* Add a map scheme layer */}
                            <MMapDefaultSchemeLayer />
            
                            <MMapControls position="top right" orientation="vertical">
                                <MMapControl transparent>
                                    <button className="btn" onClick={changeCenterHandler}>
                                        {BUTTONS_TITLES.center}
                                    </button>
                                </MMapControl>
                                <MMapControl transparent>
                                    <button className="btn" onClick={changeZoomHandler}>
                                        {BUTTONS_TITLES.bounds}
                                    </button>
                                </MMapControl>
                            </MMapControls>
                        </MMap>
                    );
                }
            
                ReactDOM.render(
                    <React.StrictMode>
                        <App />
                    </React.StrictMode>,
                    document.getElementById('app')
                );
            }
        </script>

        <style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; }  </style>
        <link rel="stylesheet" href="./common.css" />
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
        <script crossorigin src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
        <script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>

        <script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></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="../variables.ts"
        ></script>
        <script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
            import type {MMapLocationRequest} from '@mappable-world/mappable-types';
            import {DEFAULT_LOCATION_SETTINGS, CAMERA} from './common';
            import {BUTTONS_TITLES, LOCATIONS} from '../variables';
            
            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, MMapControl} = vuefy.module(mappable);
            
                const app = Vue.createApp({
                    components: {
                        MMap,
                        MMapDefaultSchemeLayer,
                        MMapControls,
                        MMapControl
                    },
                    setup() {
                        const currentLocationIndex = Vue.ref(0);
                        const currentZoomIndex = Vue.ref(0);
                        const location = Vue.ref<MMapLocationRequest>(
                            LOCATIONS[currentLocationIndex.value][currentZoomIndex.value]
                        );
            
                        const refMap = (ref) => {
                            window.map = ref?.entity;
                        };
            
                        // Moving the center of the map to a point with new coordinates
                        const changeCenterHandler = () => {
                            let index = currentLocationIndex.value + 1;
                            let newLocation = LOCATIONS[index]?.[currentZoomIndex.value];
                            if (!newLocation) {
                                newLocation = LOCATIONS[0][currentZoomIndex.value];
                                index = 0;
                            }
                            location.value = {...newLocation, ...DEFAULT_LOCATION_SETTINGS};
                            currentLocationIndex.value = index;
                        };
            
                        // Moving the center of the map to a point with new coordinates
                        const changeZoomHandler = () => {
                            let index = currentZoomIndex.value + 1;
                            let newLocation = LOCATIONS[currentLocationIndex.value]?.[index];
                            if (!newLocation) {
                                newLocation = LOCATIONS[currentLocationIndex.value][0];
                                index = 0;
                            }
                            location.value = {...newLocation, ...DEFAULT_LOCATION_SETTINGS};
                            currentZoomIndex.value = index;
                        };
            
                        return {
                            BUTTONS_TITLES,
                            CAMERA,
                            location,
                            refMap,
                            changeZoomHandler,
                            changeCenterHandler
                        };
                    },
                    template: `
                  <!-- Initialize the map and pass initialization parameters -->
                  <MMap
                    :location="location" 
                    :showScaleInCopyrights="true"
                    :camera="CAMERA"
                    :ref="refMap"
                  >
                    <!-- Add a map scheme layer -->
                    <MMapDefaultSchemeLayer/>
            
                    <MMapControls position="top right" orientation="vertical">
                      <MMapControl :transparent="true">
                        <button class="btn" @click="changeCenterHandler">
                          {{ BUTTONS_TITLES.center }}
                        </button>
                      </MMapControl>
                      <MMapControl :transparent="true">
                        <button class="btn" @click="changeZoomHandler">
                          {{ BUTTONS_TITLES.bounds }}
                        </button>
                      </MMapControl>
                    </MMapControls>
            
                  </MMap>
                `
                });
                app.mount('#app');
            }
            
            main();
        </script>

        <style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; }  </style>
        <link rel="stylesheet" href="./common.css" />
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

import type {MMapLocationRequest} from '@mappable-world/mappable-types';

export const BUTTONS_TITLES = {
    center: 'Change center',
    bounds: 'Change bounds'
};
export const LOCATIONS: Array<Array<MMapLocationRequest>> = [
    [
        {
            bounds: [
                [55.2671, 25.2011],
                [55.2815, 25.1959]
            ]
        },
        {
            bounds: [
                [55.2473, 25.2058],
                [55.3048, 25.1852]
            ]
        },
        {
            bounds: [
                [55.2282, 25.1872],
                [55.3217, 25.1537]
            ]
        }
    ],
    [
        {
            bounds: [
                [55.2948, 25.2359],
                [55.302, 25.2334]
            ]
        },
        {
            bounds: [
                [55.2835, 25.2376],
                [55.3123, 25.2273]
            ]
        },
        {
            bounds: [
                [55.257, 25.2449],
                [55.3384, 25.2157]
            ]
        }
    ],
    [
        {
            bounds: [
                [55.1113, 25.1355],
                [55.1267, 25.13]
            ]
        },
        {
            bounds: [
                [55.1042, 25.134],
                [55.133, 25.1237]
            ]
        },
        {
            bounds: [
                [55.0974, 25.1265],
                [55.1513, 25.1072]
            ]
        }
    ]
];

import type {MMapCameraRequest, MMapLocationRequest} from '@mappable-world/mappable-types';

export const CAMERA: MMapCameraRequest = {tilt: (45 * Math.PI) / 180};
export const DEFAULT_LOCATION_SETTINGS: Partial<MMapLocationRequest> = {
    duration: 5000,
    easing: 'ease-in-out'
};

.btn {
    border: none;
    cursor: pointer;

    width: 174px;
    padding: 10px 16px;

    color: #34374a;
    font-size: 14px;
    font-weight: 500;

    background-color: white;
    border-radius: 12px;
    box-shadow: 0px 4px 8px 4px #5f698333;
}