1.1.25 • Published 2 months ago
@skymapglobal/map-drawer v1.1.25
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
1.1.25
2 months ago
1.1.23
6 months ago
1.1.24
6 months ago
1.1.22
2 years ago
1.1.21
2 years ago
1.1.20
2 years ago
1.1.19
2 years ago
1.1.18
3 years ago
1.1.17
3 years ago
1.1.16
3 years ago
1.1.15
3 years ago
1.1.14
3 years ago
1.1.13
3 years ago
1.1.12
3 years ago
1.1.11
3 years ago
1.1.10
3 years ago
1.1.9
3 years ago
1.1.8
3 years ago
1.1.7
3 years ago
1.1.6
3 years ago
1.1.5
3 years ago
1.1.4
3 years ago
1.1.3
3 years ago
1.1.2
3 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.0.11
3 years ago
1.0.10
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago