Moving the map

vanilla.html

react.html

vue.html

common.css

common.ts

variables.ts

<!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>

    <!-- prettier-ignore -->
    <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>

    <!-- prettier-ignore -->
    <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>

    <!-- prettier-ignore -->
    <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>

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

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

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