Skymap Map Drawer & Markup Tool

Install

yarn add @skymapglobal/map @skymapglobal/map-drawer

Draw Control Usage

Import Drawer Mixin

<script>
import { ExtendDrawControlMixin } from "@skymapglobal/map-drawer";

export default {
  mixins: [ExtendDrawControlMixin]
}
</script>

Create Geometries

• Activate Draw Mode

  this.activeDraw()

• Draw with DrawingType

  import { DrawingType } from "@skymapglobal/map-drawer";
  
  this.draw(DrawingType.POLYGON)

• Save/ Cancel Draw Mode

  this.saveDraw(({ added, updated, deleted, geojson }) => {})
  this.cancelDraw()

Create One Geometry Only

• Activate Draw Mode

  this.activeDraw()

• Draw Once by passing a callback

  import { DrawingType } from "@skymapglobal/map-drawer";
  
  this.draw(DrawingType.POLYGON, ({ added, updated, deleted, geojson }) => {})

• Cancel when drawing

  this.cancelDraw()

Edit Geometries

• Passing GeoJSON that want to edit to activeDraw() method

  this.activeDraw(myGeoJSON)

• Delete Selected When Editing

  this.deleteSelectedDraw()

• Save/ Cancel Result

  this.saveDraw(({ added, updated, deleted, geojson }) => {})
  this.cancelDraw()

Markup Control Usage

<template>
  <map>
    <BaseMapControl position="top-right" />

    <DrawControl>
      <MarkupControl position="top-right" />
    </DrawControl>
  </map>
</template>

<script>
  import { Map, BaseMapControl } from "@skymapglobal/map";
  import { DrawControl, MarkupControl } from "@skymapglobal/map-drawer";

  export default {
    components: {
      Map,
      BaseMapControl,
      DrawControl,
      MarkupControl,
    },
  };
</script>

Shortcut Guide

<template>
  <ModuleContainer>
    <!-- Children modules -->
    <slot />
  </ModuleContainer>
</template>

<script>
import {
  ModuleMixin,
  ButtonGroupControl,
  ButtonControl,
  LabelControl,
  GroupControl
} from "@skymapglobal/map";
import { DrawingType, ExtendDrawControlMixin } from "@skymapglobal/map-drawer";

/**
 * @requires [DrawControl]
 */
export default {
  mixins: [ModuleMixin, ExtendDrawControlMixin],

  data() {
    return {
      bindedOnKeyDown: undefined
    };
  },

  methods: {
    // Init
    onInit() {
      this.bindedOnKeyDown = this.onKeyDown.bind(this);
      this.map.getContainer().addEventListener("keydown", this.bindedOnKeyDown);
    },

    // Destroy
    onDestroy() {
      this.map
        .getContainer()
        .removeEventListener("keydown", this.bindedOnKeyDown);
    },

    /**
     *
     * @param {Object} event
     */
    // eslint-disable-next-line no-unused-vars
    onKeyDown(event) {
      const KEYS = {
        q: 81,
        w: 87,
        e: 69,
        r: 82
      };

      switch (event.keyCode) {
        case KEYS.q:
          this.activeDraw();
          this.draw(DrawingType.POINT, this.onCreatedGeometry.bind(this));
          break;
        case KEYS.w:
          this.activeDraw();
          this.draw(DrawingType.LINE_STRING, this.onCreatedGeometry.bind(this));
          break;
        case KEYS.e:
          this.activeDraw();
          this.draw(DrawingType.CIRCLE_DRAG, this.onCreatedGeometry.bind(this));
          break;
        case KEYS.r:
          this.activeDraw();
          this.draw(DrawingType.POLYGON, this.onCreatedGeometry.bind(this));
          break;
      }
    }
  }
};
</script>

API Reference

Data

drawControl: MapboxDraw - mapbox gl drawer instance

drawControlActivated: Boolean - draw control activation state

Methods

activeDraw(geojson)

• geojson?: FeatureCollection - GeoJSON that want to edit, ignore if want to create new geometries

draw(type, callback?, options?)

• type: DrawingType - Drawing type, includes: POINT, LINE_STRING, RECTANGLE, POLYGON, CIRCLE, CIRCLE_DRAG, CIRCLE_VIEWPORT
• callback?: ({ added: { [string]: Feature }, updated: { [string]: Feature }, deleted: { [string]: Feature }, geojson: FeatureCollection }) => void - Passing callback for drawing once
• options?: Object - Passing to drawControl.changeMode method

saveDraw(callback)

• callback: ({ added: { [string]: Feature }, updated: { [string]: Feature }, deleted: { [string]: Feature }, geojson: FeatureCollection }) => void - callback to get draw result

cancelDraw()

deleteSelectedDraw()

FAQ

• Invoke activeDraw() + draw() but can not draw on map?

  • Maybe map is loading tiles, it'll wait for layers to finish to load tiles before activating drawing