Create a line

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="../variables.ts"
    ></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">
      import {InfoMessage} from './common';
      import {LINESTRING, LOCATION} from '../variables';

      window.map = null;

      main();
      async function main() {
        // Waiting for all api elements to be loaded
        await mappable.ready;
        const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapFeature, MMapControls} = mappable;

        // Initialize the map
        map = new MMap(
          // Pass the link to the HTMLElement of the container
          document.getElementById('app'),
          // Pass the map initialization parameters
          {location: LOCATION, showScaleInCopyrights: true},
          [
            // Add a map scheme layer
            new MMapDefaultSchemeLayer({}),
            // Add a layer of geo objects to display the line
            new MMapDefaultFeaturesLayer({})
          ]
        );

        // Create a line object, set its coordinates and styles, and add it to the map
        const line = new MMapFeature({
          geometry: {
            type: 'LineString',
            coordinates: LINESTRING.coordinates
          },
          style: {stroke: [{color: LINESTRING.color, width: 4}]}
        });
        map.addChild(line);

        /* Create and add a shared container for controls to the map.
Using MMapControls you can change the position of the control */
        const topRightControls = new MMapControls({position: 'top left'});
        map.addChild(topRightControls);

        // Add a custom information message control to the map
        topRightControls.addChild(new InfoMessage({text: LINESTRING.tooltipText}));
      }
    </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="typescript"
      type="text/babel"
      src="../variables.ts"
    ></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="react, typescript" type="text/babel">
      import {InfoMessage} from './common';
      import {LINESTRING, LOCATION} 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, MMapDefaultFeaturesLayer, MMapFeature, MMapControls} = reactify.module(mappable);

          // Using mappable-rectify, we turn a custom InfoMessage into a React component
          const {InfoMessage: InfoMessageR} = reactify.module({InfoMessage});

          function App() {
              return (
                  // Initialize the map and pass initialization parameters
                  <MMap location={LOCATION} showScaleInCopyrights={true} ref={(x) => (map = x)}>
                      {/* Add a map scheme layer */}
                      <MMapDefaultSchemeLayer />
                      {/* Add a layer of geo objects to display the line */}
                      <MMapDefaultFeaturesLayer />

                      {/* Add a line object to the map, set its coordinates and styles */}
                      <MMapFeature
                          geometry=not_var{{
                              type: 'LineString',
                              coordinates: LINESTRING.coordinates
                          }}
                          style={{stroke: [{color: LINESTRING.color, width: 4}]}}
                      />

                      {/* Add a shared container for controls to the map.
                      Using MMapControls you can change the position of the control */}
                      <MMapControls position="top left">
                          {/* Add a custom information message control to the map */}
                          <InfoMessageR text={LINESTRING.tooltipText} />
                      </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>
    <!-- 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="../variables.ts"
    ></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">
      import {InfoMessage} from './common';
      import {LINESTRING, LOCATION} from '../variables';

      window.map = null;

      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, MMapDefaultFeaturesLayer, MMapFeature, MMapControls} =
          vuefy.module(mappable);

        const {InfoMessage: InfoMessageV} = vuefy.module({InfoMessage});

        const App = Vue.createApp({
          components: {
            MMap,
            MMapDefaultSchemeLayer,
            MMapDefaultFeaturesLayer,
            MMapFeature,
            MMapControls,
            InfoMessageV
          },
          setup() {
            const refMap = (ref) => {
              window.map = ref?.entity;
            };

            return {
              refMap,
              LOCATION,
              LINESTRING
            };
          },
          template: `
      <MMap
        :location="LOCATION"
        :ref="refMap"
        :showScaleInCopyrights="true"
      >
        <MMapDefaultSchemeLayer />
        <MMapDefaultFeaturesLayer />
        
        <MMapFeature
          :geometry="{
            type: 'LineString',
            coordinates: LINESTRING.coordinates
          }"
          :style="{ stroke: [{ color: LINESTRING.color, width: 4 }] }"
        />
        
        <MMapControls position="top left">
          <InfoMessageV :text="LINESTRING.tooltipText" />
        </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>

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

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

interface InfoMessageProps {
  text: string;
}

// Wait for the api to load to access the entity system (MMapComplexEntity)
mappable.ready.then(() => {
  class InfoMessageClass extends mappable.MMapComplexEntity<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 = mappable.useDomContext(this, this._element, this._element);
    }

    // Method for detaching control from the map
    _onDetach() {
      this._detachDom();
      this._detachDom = undefined;
      this._element = undefined;
    }
  }

  InfoMessage = InfoMessageClass;
});

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

export const LOCATION: MMapLocationRequest = {
  center: [54.6056, 24.4705], // starting position [lng, lat]
  zoom: 14 // starting zoom
};

export const LINESTRING: {
  color: string;
  tooltipText: string;
  coordinates: LngLat[];
} = {
  color: '#122DB2',
  tooltipText: 'Location:<br>Yes Marina Circuit, 2/1, Abu Dhabi',
  coordinates: [
    [54.605463, 24.46997],
    [54.60783, 24.470262],
    [54.607955, 24.4703],
    [54.608049, 24.470389],
    [54.608114, 24.470512],
    [54.608126, 24.470634],
    [54.608091, 24.470762],
    [54.607712, 24.472228],
    [54.607647, 24.472388],
    [54.607558, 24.472506],
    [54.60741, 24.472619],
    [54.607286, 24.472675],
    [54.606615, 24.472865],
    [54.606392, 24.472968],
    [54.606226, 24.473071],
    [54.606076, 24.4732],
    [54.605963, 24.473321],
    [54.605879, 24.473422],
    [54.605777, 24.473644],
    [54.60574, 24.473813],
    [54.605737, 24.473997],
    [54.605778, 24.474215],
    [54.605854, 24.474444],
    [54.606021, 24.475027],
    [54.60608, 24.475459],
    [54.606086, 24.475766],
    [54.606056, 24.476032],
    [54.605871, 24.4774],
    [54.605748, 24.478262],
    [54.605724, 24.478362],
    [54.605701, 24.478443],
    [54.60563, 24.478526],
    [54.605509, 24.478617],
    [54.605436, 24.47864],
    [54.605352, 24.478648],
    [54.605272, 24.478636],
    [54.605186, 24.478605],
    [54.605122, 24.478546],
    [54.605083, 24.478491],
    [54.605034, 24.478399],
    [54.604887, 24.478001],
    [54.604747, 24.477425],
    [54.603563, 24.474212],
    [54.603101, 24.472968],
    [54.602845, 24.472274],
    [54.602653, 24.471736],
    [54.602453, 24.471068],
    [54.60203, 24.469838],
    [54.601627, 24.46873],
    [54.60158, 24.468622],
    [54.601568, 24.468541],
    [54.60158, 24.468494],
    [54.601625, 24.468447],
    [54.601727, 24.468444],
    [54.602104, 24.468485],
    [54.602187, 24.468485],
    [54.602254, 24.468412],
    [54.602468, 24.467672],
    [54.602512, 24.467533],
    [54.602647, 24.467226],
    [54.60277, 24.467006],
    [54.603035, 24.466655],
    [54.603337, 24.466335],
    [54.603717, 24.466038],
    [54.605328, 24.464881],
    [54.605695, 24.46461],
    [54.605984, 24.464422],
    [54.60637, 24.464195],
    [54.606701, 24.464021],
    [54.607236, 24.463786],
    [54.607725, 24.463586],
    [54.608452, 24.463273],
    [54.608763, 24.463159],
    [54.608938, 24.463158],
    [54.609123, 24.463192],
    [54.609292, 24.463281],
    [54.609382, 24.46336],
    [54.609442, 24.463438],
    [54.609502, 24.463553],
    [54.609536, 24.463665],
    [54.609556, 24.463769],
    [54.60954, 24.463941],
    [54.609502, 24.464066],
    [54.609448, 24.464187],
    [54.609369, 24.464295],
    [54.609257, 24.464393],
    [54.609118, 24.464478],
    [54.608971, 24.464537],
    [54.608757, 24.464565],
    [54.607061, 24.464689],
    [54.606852, 24.464714],
    [54.606762, 24.464732],
    [54.606667, 24.464763],
    [54.605756, 24.465281],
    [54.605664, 24.465344],
    [54.605602, 24.465416],
    [54.605536, 24.46557],
    [54.605324, 24.466473],
    [54.605338, 24.466544],
    [54.605387, 24.466592],
    [54.605461, 24.466611],
    [54.606217, 24.466714],
    [54.606306, 24.466748],
    [54.606363, 24.466775],
    [54.606423, 24.466831],
    [54.606483, 24.466934],
    [54.606497, 24.467061],
    [54.606499, 24.467686],
    [54.606444, 24.467793],
    [54.606376, 24.467857],
    [54.606273, 24.467893],
    [54.606132, 24.467921],
    [54.606009, 24.467936],
    [54.605845, 24.467941],
    [54.605683, 24.46793],
    [54.604105, 24.467709],
    [54.603969, 24.4677],
    [54.603796, 24.467706],
    [54.603627, 24.467733],
    [54.603511, 24.467768],
    [54.603434, 24.467832],
    [54.603354, 24.46791],
    [54.602921, 24.468626],
    [54.602697, 24.468955],
    [54.60265, 24.469052],
    [54.602617, 24.469181],
    [54.602606, 24.469291],
    [54.602604, 24.469423],
    [54.602628, 24.469513],
    [54.602686, 24.469578],
    [54.602758, 24.469611],
    [54.602923, 24.469638],
    [54.605463, 24.46997]
  ]
};