Measuring with a ruler using the ruler module

Open in CodeSandbox

<!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 type {MMapMarker} from '@mappable-world/mappable-types';
      import type {RenderPointArgs, RulerPointState} from '@mappable-world/mappable-types/modules/ruler';
      import {FEATURE_STYLE, formatArea, formatDistance, randomColor} from './common';
      import {LOCATION, RULER_COORDINATES} from '../variables';

      window.map = null;

      main();
      async function main() {
          // Waiting for all api elements to be loaded
          await mappable.ready;
          const {
              MMap,
              MMapDefaultSchemeLayer,
              MMapDefaultFeaturesLayer,
              MMapMarker,
              MMapControls,
              MMapControl,
              MMapControlButton
          } = mappable;
          const {MMapRuler} = await mappable.import('@mappable-world/mappable-ruler');
          // 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({}), new MMapDefaultFeaturesLayer({})]
          );

          const infoElement = document.createElement('span');
          infoElement.classList.add('info');

          const rulerButtonElement = document.createElement('span');
          rulerButtonElement.classList.add('ruler-button');
          rulerButtonElement.textContent = 'ruler';
          const planimeterButtonElement = document.createElement('span');
          planimeterButtonElement.classList.add('planimeter-button');
          planimeterButtonElement.textContent = 'planimeter';

          const controlsRight = new MMapControls({position: 'top right'}, [
              new MMapControlButton({element: rulerButtonElement, onClick: () => ruler.update({type: 'ruler'})}),
              new MMapControlButton({element: planimeterButtonElement, onClick: () => ruler.update({type: 'planimeter'})})
          ]);
          const controlsLeft = new MMapControls({position: 'top left'}, [
              new MMapControlButton({text: 'enable', onClick: () => ruler.update({editable: true})}),
              new MMapControlButton({text: 'disable', onClick: () => ruler.update({editable: false})})
          ]);
          const controlsTop = new MMapControls({position: 'top'}, [new MMapControl({}, infoElement)]);
          map.addChild(controlsLeft).addChild(controlsRight).addChild(controlsTop);

          const previewPoint = document.createElement('div');
          previewPoint.classList.add('preview-point');

          // Ruler point entity
          class RulerPoint extends mappable.MMapComplexEntity<RenderPointArgs> {
              private _pointMarker: MMapMarker;
              private _balloonMarker: MMapMarker;
              private _balloonLabelElement: HTMLSpanElement;
              private _balloonElement: HTMLDivElement;
              private _state: RulerPointState;

              private _showBalloon = false;

              constructor(props: RenderPointArgs) {
                  super(props);

                  this._state = this._props.state;

                  const point = document.createElement('div');
                  point.classList.add('point');
                  point.style.backgroundColor = randomColor();

                  this._balloonElement = document.createElement('div');
                  this._balloonElement.classList.add('balloon');

                  this._balloonLabelElement = document.createElement('span');
                  this._balloonLabelElement.textContent = this.__getLabel();
                  this._balloonElement.appendChild(this._balloonLabelElement);
                  this.__toggleBalloon(this._state.index === this._state.totalCount - 1);

                  const deleteButton = document.createElement('button');
                  deleteButton.classList.add('button');
                  deleteButton.textContent = 'delete';
                  deleteButton.addEventListener('click', (event) => {
                      event.stopPropagation();
                      this._props.onDelete();
                  });
                  this._balloonElement.appendChild(deleteButton);

                  const {coordinates, editable, source} = this._state;

                  this._pointMarker = new MMapMarker(
                      {
                          coordinates,
                          draggable: editable,
                          source,
                          zIndex: 1,
                          onDragMove: this._props.onDragMove,
                          onFastClick: () => {
                              this._showBalloon = !this._showBalloon;
                              this.__toggleBalloon(this._showBalloon);
                          }
                      },
                      point
                  );
                  this._balloonMarker = new MMapMarker({coordinates, source, zIndex: 0}, this._balloonElement);
                  this.addChild(this._pointMarker).addChild(this._balloonMarker);
              }

              protected _onUpdate(props: Partial<RenderPointArgs>): void {
                  if (props.state !== undefined) {
                      this._state = props.state;
                      const {coordinates, editable, source} = this._state;

                      this._pointMarker.update({coordinates, draggable: editable, source});
                      this._balloonMarker.update({coordinates, source});

                      this._balloonLabelElement.textContent = this.__getLabel();
                      this.__toggleBalloon(
                          !this._showBalloon ? props.state.index === props.state.totalCount - 1 : this._showBalloon
                      );
                  }
              }

              private __getLabel(): string {
                  const {measurements} = this._state;
                  return measurements.type === 'ruler'
                      ? formatDistance(measurements.distance)
                      : formatArea(measurements.area);
              }

              private __toggleBalloon(show: boolean): void {
                  this._balloonElement.classList.toggle('hide', !show);
              }
          }

          const ruler = new MMapRuler({
              points: RULER_COORDINATES,
              type: 'ruler',
              editable: true,
              previewPoint,
              geometry: {style: FEATURE_STYLE},
              onUpdate: (state) => {
                  infoElement.textContent =
                      state.measurements.type === 'ruler'
                          ? `Total distance: ${formatDistance(state.measurements.totalDistance)}`
                          : `Area: ${formatArea(state.measurements.area)}`;
              },
              point: (props) => new RulerPoint(props)
          });
          map.addChild(ruler);
      }
    </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="react, typescript"
      type="text/babel"
      src="./common.ts"
    ></script>
    <script data-plugins="transform-modules-umd" data-presets="react, typescript" type="text/babel">
      import type {LngLat} from '@mappable-world/mappable-types';
      import type {
        RenderPointArgs,
        RulerType,
        RulerCommonState,
        RulerGeometry
      } from '@mappable-world/mappable-types/modules/ruler';
      import {FEATURE_STYLE, formatArea, formatDistance, randomColor} from './common';
      import {LOCATION, RULER_COORDINATES} 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,
          MMapMarker,
          MMapControls,
          MMapControl,
          MMapControlButton
        } = reactify.module(mappable);
        const {MMapRuler} = reactify.module(await mappable.import('@mappable-world/mappable-ruler'));

        const RulerPoint = (props: RenderPointArgs) => {
          const {measurements, index, coordinates, editable, totalCount, source} = props.state;

          const [showBalloon, setShowBalloon] = React.useState(false);
          const backgroundColor = React.useRef(undefined);
          backgroundColor.current ??= randomColor();

          const label = React.useMemo(() => {
            return measurements.type === 'planimeter'
              ? formatArea(measurements.area)
              : formatDistance(measurements.distance);
          }, [measurements]);

          const showLastBalloon = React.useMemo(() => {
            return index === totalCount - 1;
          }, [index, totalCount]);

          const onClick = React.useCallback(() => {
            setShowBalloon((value) => !value);
          }, []);

          const onDelete = React.useCallback((event) => {
            event.stopPropagation();
            props.onDelete();
          }, []);

          return (
            <>
              <MMapMarker
                coordinates={coordinates}
                zIndex={21}
                source={source}
                draggable={editable}
                onDragMove={props.onDragMove}
                onFastClick={onClick}
              >
                <div className="point" style={{backgroundColor: backgroundColor.current}}></div>
              </MMapMarker>
              {(showLastBalloon || showBalloon) && (
                <MMapMarker coordinates={coordinates} zIndex={20} source={source}>
                  <div className="balloon">
                    <span>{label}</span>
                    <button onClick={onDelete} className="button">
                      delete
                    </button>
                  </div>
                </MMapMarker>
              )}
            </>
          );
        };

        function App() {
          const [location, setLocation] = React.useState(LOCATION);
          const [geometry] = React.useState < RulerGeometry > {style: FEATURE_STYLE};
          const [type, setType] = React.useState < RulerType > 'ruler';
          const [editable, setEditable] = React.useState(true);
          const [commonInfo, setCommonInfo] = React.useState('');

          const setRulerType = React.useCallback(() => setType('ruler'), []);
          const setPlanimeterType = React.useCallback(() => setType('planimeter'), []);

          const enableRuler = React.useCallback(() => setEditable(true), []);
          const disableRuler = React.useCallback(() => setEditable(false), []);

          const onRender = React.useCallback((params: RenderPointArgs) => {
            return <RulerPoint {...params} />;
          }, []);
          const onUpdate = React.useCallback(({measurements}: RulerCommonState) => {
            setCommonInfo(
              measurements.type === 'ruler'
                ? `Total distance: ${formatDistance(measurements.totalDistance)}`
                : `Area: ${formatArea(measurements.area)}`
            );
          }, []);

          return (
            // Initialize the map and pass initialization parameters
            <MMap location={location} showScaleInCopyrights={true} ref={(x) => (map = x)}>
              {/* Add a map scheme layer */}
              <MMapDefaultSchemeLayer />
              <MMapDefaultFeaturesLayer />

              <MMapControls position="top right">
                <MMapControlButton onClick={setRulerType}>
                  <span className="ruler-button">ruler</span>
                </MMapControlButton>
                <MMapControlButton onClick={setPlanimeterType}>
                  <span className="planimeter-button">planimeter</span>
                </MMapControlButton>
              </MMapControls>

              <MMapControls position="top left">
                <MMapControlButton text="enable" onClick={enableRuler} />
                <MMapControlButton text="disable" onClick={disableRuler} />
              </MMapControls>

              <MMapControls position="top">
                <MMapControl>
                  <span className="info">{commonInfo}</span>
                </MMapControl>
              </MMapControls>

              <MMapRuler
                points={reactify.useDefault(RULER_COORDINATES)}
                editable={editable}
                type={type}
                point={onRender}
                onUpdate={onUpdate}
                geometry={geometry}
                previewPoint={<div className="preview-point"></div>}
              />
            </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="../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 type {LngLat} from '@mappable-world/mappable-types';
      import type {RenderPointArgs, RulerCommonState, RulerType} from '@mappable-world/mappable-types/modules/ruler';
      import type TVue from 'vue';
      import {FEATURE_STYLE, formatArea, formatDistance, randomColor} from './common';
      import {LOCATION, RULER_COORDINATES} 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,
              MMapDefaultFeaturesLayer,
              MMapMarker,
              MMapListener,
              MMapControls,
              MMapControl,
              MMapControlButton
          } = vuefy.module(mappable);
          const {MMapRuler} = vuefy.module(await mappable.import('@mappable-world/mappable-ruler'));

          const RulerPoint = Vue.defineComponent({
              name: 'RulerPoint',
              props: {
                  state: Object as TVue.PropType<RenderPointArgs['state']>,
                  onDragMove: Function as TVue.PropType<RenderPointArgs['onDragMove']>,
                  onDelete: Function as TVue.PropType<RenderPointArgs['onDelete']>
              },
              components: {MMapMarker},
              setup(props) {
                  const showBalloon = Vue.ref(false);
                  const label = Vue.computed(() => {
                      return props.state.measurements.type === 'planimeter'
                          ? formatArea(props.state.measurements.area)
                          : formatDistance(props.state.measurements.distance);
                  });

                  const showLastBalloon = Vue.computed(() => {
                      return props.state.index === props.state.totalCount - 1;
                  });

                  const onClick = () => {
                      showBalloon.value = !showBalloon.value;
                  };

                  const onDeleteHandler = (event) => {
                      event.stopPropagation();
                      props.onDelete();
                  };

                  const backgroundColor = randomColor();

                  return {label, showBalloon, showLastBalloon, backgroundColor, onClick, onDeleteHandler};
              },
              template: `
                  <template>
                      <MMapMarker
                          :key="state.index"
                          :coordinates="state.coordinates"
                          :zIndex="21"
                          :draggable="state.editable"
                          :source="state.source"
                          :onDragMove="onDragMove"
                          :onFastClick="onClick">
                          <div class="point" :style="{backgroundColor}"></div>
                      </MMapMarker>
                      <MMapMarker v-if="showBalloon || showLastBalloon" :coordinates="state.coordinates" :source="state.source" :zIndex="20">
                          <div class="balloon">
                              <span>{{ label }}</span>
                              <button @click="onDeleteHandler" class="button">delete</button>
                          </div>
                      </MMapMarker>
                  </template>`
          });

          const app = Vue.createApp({
              components: {
                  MMap,
                  MMapDefaultSchemeLayer,
                  MMapDefaultFeaturesLayer,
                  MMapMarker,
                  MMapListener,
                  MMapControls,
                  MMapControl,
                  MMapControlButton,
                  MMapRuler,
                  RulerPoint
              },
              setup() {
                  const refMap = (ref) => {
                      window.map = ref?.entity;
                  };
                  const type = Vue.ref<RulerType>('ruler');
                  const editable = Vue.ref(true);
                  const coordinates = Vue.ref<LngLat[]>(RULER_COORDINATES);
                  const commonInfo = Vue.ref('');

                  const setRulerType = () => {
                      type.value = 'ruler';
                  };
                  const setPlanimeterType = () => {
                      type.value = 'planimeter';
                  };
                  const onUpdate = ({measurements}: RulerCommonState) => {
                      commonInfo.value =
                          measurements.type === 'ruler'
                              ? `Total distance: ${formatDistance(measurements.totalDistance)}`
                              : `Area: ${formatArea(measurements.area)}`;
                  };

                  return {
                      LOCATION,
                      FEATURE_STYLE,
                      refMap,
                      type,
                      coordinates,
                      editable,
                      commonInfo,
                      onUpdate,
                      setRulerType,
                      setPlanimeterType,
                      formatDistance,
                      formatArea
                  };
              },
              template: `
                  <MMap :location="LOCATION" :showScaleInCopyrights="true" :ref="refMap">
                      <MMapDefaultSchemeLayer />
                      <MMapDefaultFeaturesLayer />

                      <MMapControls position="top right">
                          <MMapControlButton :onClick="setRulerType">
                              <span class="ruler-button">ruler</span>
                          </MMapControlButton>
                          <MMapControlButton :onClick="setPlanimeterType">
                              <span class="planimeter-button">planimeter</span>
                          </MMapControlButton>
                      </MMapControls>

                      <MMapControls position="top left">
                          <MMapControlButton text="enable" :onClick="() => editable = true" />
                          <MMapControlButton text="disable" :onClick="() => editable = false" />
                      </MMapControls>

                      <MMapControls position="top">
                          <MMapControl>
                              <span className="info">{{commonInfo}}</span>
                          </MMapControl>
                      </MMapControls>

                      <MMapRuler
                          :points="coordinates"
                          :editable="editable"
                          :geometry="{style: FEATURE_STYLE}"
                          :type="type"
                          :onUpdate="onUpdate">
                          <template #point="params">
                              <RulerPoint v-bind="params" />
                          </template>
                          <template #previewPoint>
                              <div class="preview-point"></div>
                          </template>
                      </MMapRuler>
                  </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>

.point {
  position: absolute;

  display: inline-block;

  box-sizing: border-box;
  width: 16px;
  height: 16px;

  cursor: pointer;

  border: 2px solid #171b26;
  border-radius: 50%;
  background-color: #fefefe;

  transform: translate(-50%, -50%);
}

.balloon {
  position: absolute;
  z-index: 10;

  padding: 4px;

  font-size: 12px;
  white-space: nowrap;

  border-radius: 8px;
  background-color: #fefefe;
  box-shadow: 0 2px 4px 0 rgba(95, 105, 131, 0.2), 0 0 2px 0 rgba(95, 105, 131, 0.08);

  transform: translate(-50%, calc(-100% - 5px));
}

.hide {
  display: none;
}

.button {
  display: inline-block;

  margin: 0;
  padding: 4px 5px;

  list-style: none;

  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;

  color: #333;
  border-width: 0;
  border-radius: 8px;
  background-color: rgba(51, 51, 51, 0.05);

  transition: all 200ms;
  touch-action: manipulation;
}

.preview-point {
  position: absolute;

  box-sizing: border-box;
  width: 12px;
  height: 12px;

  cursor: pointer;

  opacity: 0.6;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #666;

  transform: translate(-50%, -50%);
}

.info {
  display: inline-block;

  padding: 8px;

  font-size: 12px;
}

import type {DrawingStyle} from '@mappable-world/mappable-types';

export const FEATURE_STYLE: DrawingStyle = {
  simplificationRate: 0,
  fill: '#666',
  fillOpacity: 0.3,
  stroke: [
    {width: 3, opacity: 0.7, color: '#666'},
    {width: 5, opacity: 0.7, color: '#fff'}
  ]
};

export function formatDistance(distance: number): string {
  return distance > 900 ? `${roundDistance(distance / 1000)} km` : `${roundDistance(distance)} m`;
}

export function formatArea(area: number): string {
  return area > 900_000
    ? `${splitNumber(roundDistance(area / 1_000_000))} km²`
    : `${splitNumber(roundDistance(area))} m²`;
}

function roundDistance(distance: number): number {
  if (distance > 100) {
    return Math.round(distance);
  }
  const factor = Math.pow(10, distance > 10 ? 1 : 2);
  return Math.round(distance * factor) / factor;
}

function splitNumber(value: number): string {
  return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
}

// Function for generating a pseudorandom number
const seed = (s: number) => () => {
  s = Math.sin(s) * 10000;
  return s - Math.floor(s);
};
const rnd = seed(10000); // () => Math.random()

export function randomColor() {
  return '#' + (((1 << 24) * rnd()) | 0).toString(16).padStart(6, '0');
}

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

export const LOCATION: MMapLocationRequest = {
  center: [31.245384, 30.051434], // starting position [lng, lat]
  zoom: 3 // starting zoom
};

export const RULER_COORDINATES: LngLat[] = [
  [-0.128407, 51.506807], // London
  [31.245384, 30.051434], // Cairo
  [77.201224, 28.614653] // New Delhi
];