JavaScript API

Create and delete map

The example demonstrates the basic capabilities of the map, allowing you to view geographical information. The user can zoom in and out of the map, move around it.

Open on CodeSandbox

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
    <script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>
    <script src="./common.js"></script>

    <script>
      window.map = null;

      main();
      async function main() {
        await mappable.ready;
        const {MMap, MMapDefaultSchemeLayer, MMapControls} = mappable;

        const {MMapZoomControl} = await mappable.import('@mappable-world/mappable-controls@0.0.1');

        map = new MMap(document.getElementById('app'), {location: LOCATION}, [
          new MMapDefaultSchemeLayer(),
          new MMapControls({position: 'right'}, [new MMapZoomControl({})])
        ]);
      }

      mappable.ready.then(() => {
        manageMap.onclick = () => {
          manageMap.innerHTML = !map ? 'Delete map' : 'Create map';
          if (map) {
            map.destroy();
            map = null;
          } else {
            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 class="toolbar">
      <button type="button" id="manageMap">Delete map</button>
    </div>
    <div id="app"></div>
  </body>
</html>

#app {
  overflow: hidden;
  /* height: calc(100% - 40px); */
  width: 320px;
  height: 240px;

  border: 1px solid #ccc;
}

const LOCATION = {center: [55.44279, 25.24613], zoom: 9};

<!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://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@6/babel.min.js"></script>
    <script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>
    <script src="./common.js"></script>

    <script type="text/babel">
      window.map = null;

      main();
      async function main() {
        const [mappableReact] = await Promise.all([
          mappable.import('@mappable-world/mappable-reactify'),
          mappable.ready
        ]);
        const reactify = mappableReact.reactify.bindTo(React, ReactDOM);
        const {MMap, MMapDefaultSchemeLayer, MMapControls} = reactify.module(mappable);

        const {MMapZoomControl} = reactify.module(await mappable.import('@mappable-world/mappable-controls@0.0.1'));

        function App() {
          const [show, toggleShow] = React.useState(true);

          return (
            <React.Fragment>
              <div className="toolbar">
                <button type="button" onClick={() => toggleShow(!show)}>
                  {show ? 'Delete map' : 'Create map'}
                </button>
              </div>
              {show && (
                <MMap location={LOCATION} ref={(x) => (map = x)}>
                  <MMapDefaultSchemeLayer />
                  <MMapControls position="right">
                    <MMapZoomControl />
                  </MMapControls>
                </MMap>
              )}
            </React.Fragment>
          );
        }

        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://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>
    <script src="./common.js"></script>

    <script>
      window.map = null;

      main();
      async function main() {
        const [mappableVue] = await Promise.all([mappable.import('@mappable-world/mappable-vuefy'), mappable.ready]);
        const vuefy = mappableVue.vuefy.bindTo(Vue);
        const {MMap, MMapDefaultSchemeLayer, MMapControls} = vuefy.module(mappable);
        const {MMapZoomControl} = vuefy.module(await mappable.import('@mappable-world/mappable-controls@0.0.1'));

        const app = Vue.createApp({
          components: {MMap, MMapDefaultSchemeLayer, MMapControls, MMapZoomControl},
          setup() {
            const show = Vue.ref(true);
            const refMap = (ref) => {
              window.map = ref?.entity;
            };
            return {LOCATION, show, refMap};
          },
          template: `
                        <div className="toolbar">
                            <button type="button" @click="show = !show">{{show ? 'Delete map': 'Create map'}}</button>
                        </div>
                        <MMap v-if="show" :location="LOCATION" :ref="refMap">
                            <MMapDefaultSchemeLayer />
                            <MMapControls position="right">
                                <MMapZoomControl></MMapZoomControl>
                            </MMapControls>
                        </MMap>`
        });
        app.mount('#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>