Автоцентрирование попапа

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="react, typescript"
            type="text/babel"
            src="../variables.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">
            import {TRANSLATIONS, LOCATION, MARKER_LOCATION, MARKER_HEIGHT} from '../variables';
            import {InfoMessage, locationWithDuration, findPopupCenterCoords} from './common';
            import type {MarkerPopupProps} from '@yandex/ymaps3-default-ui-theme';
            
            window.map = null;
            
            async function main() {
                // Wait for ymaps3 and import requireds resources
                await ymaps3.ready;
            
                const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapControls} = ymaps3;
            
                const {YMapDefaultMarker} = await ymaps3.import('@yandex/ymaps3-default-ui-theme');
                const worldUtils = await ymaps3.import('@yandex/ymaps3-world-utils');
            
                let show = false;
            
                // Initialize the map
                map = new YMap(document.getElementById('app'), {location: LOCATION, showScaleInCopyrights: true}, [
                    new YMapDefaultSchemeLayer({}),
                    new YMapDefaultFeaturesLayer({})
                ]);
            
                // Create and set the marker popup content
                const createPopupContent = () => {
                    const content = document.createElement('div');
                    content.classList.add('balloon');
                    content.id = 'balloon';
                    content.innerHTML = `
                    <p class="title">${TRANSLATIONS.balloonTitle}</p>
                    <p class="description">${TRANSLATIONS.balloonDescription}</p>
                    <p class="description">
                      ${TRANSLATIONS.address}
                    </p>
                  `;
                    return content;
                };
            
                const handleMarkerClick = () => {
                    show = !show;
                    marker.update({popup: {show} as MarkerPopupProps});
                    if (show) {
                        const popupCenter = findPopupCenterCoords(MARKER_LOCATION, MARKER_HEIGHT, worldUtils);
                        map.setLocation(locationWithDuration(popupCenter));
                    }
                };
            
                const marker = new YMapDefaultMarker({
                    coordinates: MARKER_LOCATION,
                    size: 'normal',
                    iconName: 'fallback',
                    onClick: handleMarkerClick,
                    popup: {
                        show,
                        content: createPopupContent
                    }
                });
            
                map.addChild(marker);
            
                // Add map controls
                const topLeftControl = new YMapControls({position: 'top left'});
                topLeftControl.addChild(new InfoMessage({text: TRANSLATIONS.infoText}));
                map.addChild(topLeftControl);
            }
            
            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>

<!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="../variables.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">
            import {TRANSLATIONS, LOCATION, MARKER_LOCATION, MARKER_HEIGHT} from '../variables';
            import {InfoMessage, locationWithDuration, findPopupCenterCoords} from './common';
            import type {MapEventUpdateHandler} from '@mappable-world/mappable-types/imperative';
            
            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, YMapDefaultFeaturesLayer, YMapControls, YMapListener} =
                    reactify.module(ymaps3);
            
                const {YMapDefaultMarker} = reactify.module(await ymaps3.import('@yandex/ymaps3-default-ui-theme'));
                const worldUtils = await ymaps3.import('@yandex/ymaps3-world-utils');
            
                const {InfoMessage: InfoMessageR} = reactify.module({InfoMessage});
            
                const {useState, useCallback} = React;
            
                const Balloon = () => (
                    <div className="balloon">
                        <p className="title">{TRANSLATIONS.balloonTitle}</p>
                        <p className="description">{TRANSLATIONS.balloonDescription}</p>
                        <p className="description">{TRANSLATIONS.address}</p>
                    </div>
                );
            
                const App = () => {
                    const [show, setShow] = useState(false);
                    const [location, setLocation] = useState(LOCATION);
            
                    const handleMarkerClick = useCallback(() => {
                        const newShowValue = !show;
            
                        setShow(newShowValue);
            
                        if (newShowValue) {
                            // Ждем следующий кадр, чтобы DOM успел обновиться
                            requestAnimationFrame(() => {
                                const popupCenter = findPopupCenterCoords(MARKER_LOCATION, MARKER_HEIGHT, worldUtils);
                                setLocation(locationWithDuration(popupCenter));
                            });
                        }
                    }, [show]);
            
                    // Update handler for synchronizing the map locations
                    const updateHandler: MapEventUpdateHandler = useCallback(({location}) => {
                        setLocation({
                            center: location.center,
                            zoom: location.zoom
                        });
                    }, []);
            
                    return (
                        <YMap location={location} showScaleInCopyrights ref={(x) => (map = x)}>
                            <YMapDefaultSchemeLayer />
                            <YMapDefaultFeaturesLayer />
            
                            <YMapDefaultMarker
                                coordinates={MARKER_LOCATION}
                                size="normal"
                                iconName="fallback"
                                blockEvents
                                popup={{
                                    show,
                                    content: () => <Balloon />
                                }}
                                onClick={handleMarkerClick}
                            />
            
                            <YMapListener onUpdate={updateHandler} />
                            <YMapControls position="top left">
                                <InfoMessageR text={TRANSLATIONS.infoText} />
                            </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>
        <!-- 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="../variables.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="typescript" type="text/babel">
            import {TRANSLATIONS, LOCATION, MARKER_LOCATION, MARKER_HEIGHT} from '../variables';
            import {InfoMessage, locationWithDuration, findPopupCenterCoords} from './common';
            import type {MapEventUpdateHandler} from '@mappable-world/mappable-types/imperative';
            
            window.map = null;
            
            async function main() {
                const [ymaps3Vue] = await Promise.all([ymaps3.import('@yandex/ymaps3-vuefy'), ymaps3.ready]);
            
                const vuefy = ymaps3Vue.vuefy.bindTo(Vue);
                const {YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapControls, YMapListener} = vuefy.module(ymaps3);
                const {InfoMessage: InfoMessageV} = vuefy.module({InfoMessage});
                const {YMapDefaultMarker} = vuefy.module(await ymaps3.import('@yandex/ymaps3-default-ui-theme'));
                const worldUtils = await ymaps3.import('@yandex/ymaps3-world-utils');
            
                const app = Vue.createApp({
                    components: {
                        YMap,
                        YMapDefaultSchemeLayer,
                        YMapDefaultFeaturesLayer,
                        YMapControls,
                        YMapListener,
                        YMapDefaultMarker,
                        InfoMessageV
                    },
                    setup() {
                        const location = Vue.ref(LOCATION);
                        const show = Vue.ref(false);
            
                        const refMap = (ref) => {
                            window.map = ref?.entity;
                        };
            
                        const handleMarkerClick = () => {
                            show.value = !show.value;
            
                            if (show.value) {
                                requestAnimationFrame(() => {
                                    const popupCenter = findPopupCenterCoords(MARKER_LOCATION, MARKER_HEIGHT, worldUtils);
                                    location.value = locationWithDuration(popupCenter);
                                });
                            }
                        };
            
                        const updateHandler: MapEventUpdateHandler = ({location: loc}) => {
                            location.value = {
                                center: loc.center,
                                zoom: loc.zoom
                            };
                        };
            
                        return {
                            LOCATION,
                            TRANSLATIONS,
                            MARKER_LOCATION,
                            handleMarkerClick,
                            show,
                            location,
                            refMap,
                            updateHandler
                        };
                    },
                    template: `
                  <YMap :location="location" showScaleInCopyrights :ref="refMap">
                    <YMapDefaultSchemeLayer />
                    <YMapDefaultFeaturesLayer />
                    <YMapDefaultMarker
                      :coordinates="MARKER_LOCATION"
                      size="normal"
                      iconName="fallback"
                      :popup="{show, position: 'top'}"
                      @click="handleMarkerClick"
                    >
                      <template #popupContent>
                        <div class="balloon">
                            <p class="title">{{ TRANSLATIONS.balloonTitle }}</p>
                            <p class="description">{{ TRANSLATIONS.balloonDescription }}</p>
                            <p class="description">
                              {{ TRANSLATIONS.address }}
                            </p>
                        </div>
                      </template>
                    </YMapDefaultMarker>
                    <YMapListener @update="updateHandler" />
                    <YMapControls position="top left">
                      <InfoMessageV :text="TRANSLATIONS.infoText" />
                    </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 {LngLat, YMapLocationRequest} from '@yandex/ymaps3-types';

export const LOCATION: YMapLocationRequest = {
    center: [39.905858, 57.618943], // starting position [lng, lat]
    zoom: 18 // starting zoom
};

export const MARKER_LOCATION: LngLat = [39.9046, 57.6186];

export const MARKER_HEIGHT: number = 61;

export const TRANSLATIONS = {
    infoText: 'Нажмите иконку «Парк Стрелка»',
    balloonTitle: 'Парк «Стрелка»',
    balloonDescription:
        'Парк в историческом центре Ярославля. Одна из главных достопримечательностей города. Расположен на Стрелке — мысе при впадении реки Которосль в Волгу. Состоит из двух частей — верхнего партера (в Рубленом городе) и нижнего (на косе). Верхняя часть парка расположена на месте разрушенного в 1918 году Демидовского лицея и на месте Соборной площади (ныне часть площади Челюскинцев от Вечного огня до Успенского собора). Парк вокруг лицея был разбит в 1820-х годах. Сквер на Соборной площади обустроен в 1960-х.',
    address: 'Адрес: Россия, Ярославль, парк Стрелка'
};

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

// Create a custom information message control
export let InfoMessage = null;

interface InfoMessageProps {
    text: string;
}

declare module '@yandex/ymaps3-types/import' {
    interface Import {
        (pkg: '@yandex/ymaps3-world-utils'): Promise<typeof import('@yandex/ymaps3-world-utils')>;
    }
}

ymaps3.import.registerCdn('https://cdn.jsdelivr.net/npm/{package}', [
    '@yandex/ymaps3-default-ui-theme@0.0',
    '@yandex/ymaps3-world-utils@0.0'
]);

// Wait for the api to load to access the entity system (YMapComplexEntity)
ymaps3.ready.then(async () => {
    class InfoMessageClass extends ymaps3.YMapComplexEntity<InfoMessageProps> {
        private _element!: HTMLDivElement;
        private _detachDom!: () => void;

        // Method for create a DOM control element
        _createElement(props: InfoMessageProps) {
            // Create a root element
            const infoWindow = document.createElement('div');
            infoWindow.classList.add('info_window');
            infoWindow.innerHTML = props.text;

            return infoWindow;
        }

        // 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;
        }
    }

    InfoMessage = InfoMessageClass;
});

export const locationWithDuration = (center: LngLat): YMapLocationRequest => {
    return {
        center: center,
        duration: 1000,
        easing: 'ease-in-out'
    };
};

// Get the coordinates of the popup center
export const findPopupCenterCoords = (
    markerLocation: LngLat,
    markerHeight: number,
    {worldToPixels, pixelsToWorld}
): LngLat => {
    const zoom = map.zoom;
    const projection = map.projection;

    const markerWorldCoords = projection.toWorldCoordinates(markerLocation);
    const markerPixelCoords = worldToPixels({x: markerWorldCoords.x, y: markerWorldCoords.y}, zoom);

    const popup = document.querySelector('.ymaps3--popup-marker_container');
    const popupRect = popup.getBoundingClientRect();

    const popupPixelCoords = {
        x: markerPixelCoords.x,
        y: markerPixelCoords.y - popupRect.height / 2 - markerHeight
    };
    const popupWorldCoords = pixelsToWorld(popupPixelCoords, zoom);
    const popupLngLatCoords = projection.fromWorldCoordinates({x: popupWorldCoords.x, y: popupWorldCoords.y});

    return popupLngLatCoords;
};

.info_window {
    padding: 8px 12px 8px 40px;
    border-radius: 12px;
    background-color: #313133;
    background-image: url('./info-icon.svg');
    background-position: 10px 8px;
    background-repeat: no-repeat;
    color: #f2f5fa;
    font-size: 14px;
    line-height: 20px;
    min-width: max-content;
}

.title {
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

.description {
    line-height: 20px;
    font-size: 14px;
    margin: 0;
    color: #7b7d85ff;
}

.balloon {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    row-gap: 8px;
    border-radius: 12px;
    padding: 8px 4px;
    height: 100%;
    width: 350px;
    overflow: hidden;
}