maplibre-gl-js-amplify
Version:
MapLibre Plugin to Support Amplify Geo Integration
132 lines (131 loc) • 5.39 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AmplifyMapDraw = void 0;
const mapbox_gl_draw_1 = __importDefault(require("@mapbox/mapbox-gl-draw"));
const maplibre_gl_draw_circle_1 = require("maplibre-gl-draw-circle");
const geofenceUtils_1 = require("../geofenceUtils");
const constants_1 = require("../constants");
class AmplifyMapDraw {
constructor(map, ui) {
this._mapBoxDraw = new mapbox_gl_draw_1.default({
displayControlsDefault: false,
defaultMode: 'simple_select',
userProperties: true,
controls: {
trash: true,
},
modes: Object.assign(Object.assign({}, mapbox_gl_draw_1.default.modes), { draw_circle: maplibre_gl_draw_circle_1.CircleMode, direct_select: maplibre_gl_draw_circle_1.DirectMode, simple_select: maplibre_gl_draw_circle_1.SimpleSelectMode }),
styles: [
// ACTIVE (being drawn)
// polygon fill
{
id: 'gl-draw-polygon-fill',
type: 'fill',
filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
paint: {
'fill-color': constants_1.GEOFENCE_COLOR,
'fill-outline-color': constants_1.GEOFENCE_COLOR,
'fill-opacity': 0.3,
},
},
// polygon mid points
{
id: 'gl-draw-polygon-midpoint',
type: 'circle',
filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
paint: {
'circle-radius': 5,
'circle-color': constants_1.GEOFENCE_VERTEX_COLOR,
},
},
// polygon border
{
id: 'gl-draw-polygon-stroke-active',
type: 'line',
filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
layout: {
'line-cap': 'round',
'line-join': 'round',
},
paint: {
'line-color': constants_1.GEOFENCE_BORDER_COLOR,
'line-width': 4,
},
},
// vertex circle
{
id: 'gl-draw-polygon-and-line-vertex-active',
type: 'circle',
filter: [
'all',
['==', 'meta', 'vertex'],
['==', '$type', 'Point'],
['!=', 'mode', 'static'],
],
paint: {
'circle-radius': 8,
'circle-color': constants_1.GEOFENCE_VERTEX_COLOR,
'circle-stroke-color': constants_1.GEOFENCE_BORDER_COLOR,
'circle-stroke-width': 1,
},
},
],
});
this._map = map;
this._ui = ui;
this.enable = this.enable.bind(this);
this.disable = this.disable.bind(this);
this.drawPolygonGeofence = this.drawPolygonGeofence.bind(this);
}
get(id) {
return this._mapBoxDraw.get(id);
}
add(data) {
const isCircle = data.properties.isCircle;
this.enable(isCircle);
this._mapBoxDraw.add(data);
this._mapBoxDraw.changeMode('direct_select', {
featureId: data.id,
});
}
delete(id) {
this._mapBoxDraw.delete(id);
}
disable() {
if (this._map.hasControl(this._mapBoxDraw)) {
this._map.removeControl(this._mapBoxDraw);
}
this._ui.removeGeofenceCreateContainer();
}
enable(isCircle) {
if (this._map.hasControl(this._mapBoxDraw)) {
return;
}
this._map.addControl(this._mapBoxDraw, 'bottom-right');
this._ui.createGeofenceCreateContainer(isCircle);
}
/**
* Draws a polygonal geofence around the center of the current map view. The polygon defaults to 3/4 the size of the current map bounds
* @param id the geofence geojson id
*/
drawPolygonGeofence(id) {
const mapBounds = this._map.getBounds();
const feature = (0, geofenceUtils_1.getPolygonFeatureFromBounds)(id, mapBounds);
this.add(feature);
}
/**
* Draws a cicular geofence around the center of the current map view
* @param id the geofence geojson id
* @param radius optional parameter for setting the radius of the cicular geofence, default to 1/8th of the current map bounds length
*/
drawCircularGeofence(id, radius) {
const mapBounds = this._map.getBounds();
const circleFeature = (0, geofenceUtils_1.getCircleFeatureFromCoords)(id, this._map.getCenter().toArray(), { bounds: mapBounds, radius });
this.add(circleFeature);
this._ui.updateGeofenceRadius(radius || circleFeature.properties.radius.toFixed(2));
}
}
exports.AmplifyMapDraw = AmplifyMapDraw;