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://api-maps.yandex.ru/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 ymaps3.ready;
                const {YMap, YMapDefaultSchemeLayer, YMapControl, YMapControls} = ymaps3;
            
                let currentLocationIndex = 0;
                let currentZoomIndex = 0;
            
                // Initialize the map
                map = new YMap(
                    // 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 YMapDefaultSchemeLayer({})]
                );
            
                class ButtonClass extends ymaps3.YMapComplexEntity<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 = ymaps3.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 YMapControl({transparent: true}).addChild(
                    new ButtonClass({
                        title: BUTTONS_TITLES.center,
                        onClick: changeCenterHandler
                    })
                );
            
                const buttonBoundsControl = new YMapControl({transparent: true}).addChild(
                    new ButtonClass({
                        title: BUTTONS_TITLES.bounds,
                        onClick: changeZoomHandler
                    })
                );
            
                map.addChild(
                    new YMapControls(
                        {
                            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://api-maps.yandex.ru/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 {YMapLocationRequest} from '@yandex/ymaps3-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 @yandex/ymaps3-reactify
                const [ymaps3React] = await Promise.all([ymaps3.import('@yandex/ymaps3-reactify'), ymaps3.ready]);
                const reactify = ymaps3React.reactify.bindTo(React, ReactDOM);
                const {YMap, YMapDefaultSchemeLayer, YMapControls, YMapControl} = reactify.module(ymaps3);
                const {useState, useCallback} = React;
            
                function App() {
                    const [location, setLocation] = useState<YMapLocationRequest>(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
                        <YMap location={location} showScaleInCopyrights={true} camera={CAMERA} ref={(x) => (map = x)}>
                            {/* Add a map scheme layer */}
                            <YMapDefaultSchemeLayer />
            
                            <YMapControls position="top right" orientation="vertical">
                                <YMapControl transparent>
                                    <button className="btn" onClick={changeCenterHandler}>
                                        {BUTTONS_TITLES.center}
                                    </button>
                                </YMapControl>
                                <YMapControl transparent>
                                    <button className="btn" onClick={changeZoomHandler}>
                                        {BUTTONS_TITLES.bounds}
                                    </button>
                                </YMapControl>
                            </YMapControls>
                        </YMap>
                    );
                }
            
                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://api-maps.yandex.ru/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 {YMapLocationRequest} from '@yandex/ymaps3-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 @yandex/ymaps3-vuefy
                const [ymaps3Vue] = await Promise.all([ymaps3.import('@yandex/ymaps3-vuefy'), ymaps3.ready]);
                const vuefy = ymaps3Vue.vuefy.bindTo(Vue);
                const {YMap, YMapDefaultSchemeLayer, YMapControls, YMapControl} = vuefy.module(ymaps3);
            
                const app = Vue.createApp({
                    components: {
                        YMap,
                        YMapDefaultSchemeLayer,
                        YMapControls,
                        YMapControl
                    },
                    setup() {
                        const currentLocationIndex = Vue.ref(0);
                        const currentZoomIndex = Vue.ref(0);
                        const location = Vue.ref<YMapLocationRequest>(
                            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 -->
                  <YMap
                    :location="location" 
                    :showScaleInCopyrights="true"
                    :camera="CAMERA"
                    :ref="refMap"
                  >
                    <!-- Add a map scheme layer -->
                    <YMapDefaultSchemeLayer/>
            
                    <YMapControls position="top right" orientation="vertical">
                      <YMapControl :transparent="true">
                        <button class="btn" @click="changeCenterHandler">
                          {{ BUTTONS_TITLES.center }}
                        </button>
                      </YMapControl>
                      <YMapControl :transparent="true">
                        <button class="btn" @click="changeZoomHandler">
                          {{ BUTTONS_TITLES.bounds }}
                        </button>
                      </YMapControl>
                    </YMapControls>
            
                  </YMap>
                `
                });
                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 {YMapLocationRequest} from '@yandex/ymaps3-types';

export const BUTTONS_TITLES = {
    center: 'Изменить центр',
    bounds: 'Изменить границы'
};
export const LOCATIONS: Array<Array<YMapLocationRequest>> = [
    [
        {
            bounds: [
                [37.5232, 55.7048],
                [37.5386, 55.7014]
            ]
        },
        {
            bounds: [
                [37.4847, 55.7111],
                [37.5783, 55.6903]
            ]
        },
        {
            bounds: [
                [37.4502, 55.7547],
                [37.6971, 55.6999]
            ]
        }
    ],
    [
        {
            bounds: [
                [37.6347, 55.8264],
                [37.641, 55.825]
            ]
        },
        {
            bounds: [
                [37.6228, 55.8292],
                [37.6582, 55.8213]
            ]
        },
        {
            bounds: [
                [37.591, 55.8384],
                [37.6571, 55.8238]
            ]
        }
    ],
    [
        {
            bounds: [
                [37.664, 55.7968],
                [37.6844, 55.7923]
            ]
        },
        {
            bounds: [
                [37.637, 55.8034],
                [37.7031, 55.7887]
            ]
        },
        {
            bounds: [
                [37.5655, 55.7962],
                [37.7174, 55.7625]
            ]
        }
    ]
];

import type {YMapCameraRequest, YMapLocationRequest} from '@yandex/ymaps3-types';

export const CAMERA: YMapCameraRequest = {tilt: (45 * Math.PI) / 180};
export const DEFAULT_LOCATION_SETTINGS: Partial<YMapLocationRequest> = {
    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;
}