|
@@ -16,6 +16,18 @@ import {longitude, latitude, mapWidth, mapHeight, markerIcon} from "./../config/
|
|
|
import {Button} from "reactstrap";
|
|
|
import {getRoute} from "./../helpers/mapboxHelper";
|
|
|
import PathButtons from "./../PathButtons";
|
|
|
+import {
|
|
|
+ Editor,
|
|
|
+ EditingMode,
|
|
|
+ DrawLineStringMode,
|
|
|
+ DrawPolygonMode,
|
|
|
+} from "react-map-gl-draw";
|
|
|
+
|
|
|
+const drawModes = [
|
|
|
+ {id: "drawPolyline", text: "Draw Polyline", handler: DrawLineStringMode},
|
|
|
+ {id: "drawPolygon", text: "Draw Polygon", handler: DrawPolygonMode},
|
|
|
+ {id: "editing", text: "Edit Feature", handler: EditingMode},
|
|
|
+];
|
|
|
|
|
|
export default class MapGL extends React.Component{
|
|
|
constructor(props){
|
|
@@ -32,6 +44,8 @@ export default class MapGL extends React.Component{
|
|
|
},
|
|
|
path: [[longitude, latitude]],
|
|
|
distance: 0,
|
|
|
+ drawModeId: null,
|
|
|
+ drawModeHandler: null,
|
|
|
}
|
|
|
this.getRoute = getRoute.bind(this)
|
|
|
}
|
|
@@ -65,6 +79,28 @@ export default class MapGL extends React.Component{
|
|
|
this.setState({path: [], distance: 0})
|
|
|
}
|
|
|
|
|
|
+ switchDrawMode = (event) => {
|
|
|
+ const modeId = event.target.value===this.state.drawModeId ? null:event.target.value;
|
|
|
+ const mode = drawModes.find((m) => m.id===modeId);
|
|
|
+ const modeHandler = mode ? new mode.handler() : null;
|
|
|
+ this.setState({"drawModeid": modeId, "drawModeHandler": modeHandler });
|
|
|
+ };
|
|
|
+
|
|
|
+ drawToolbar = () => {
|
|
|
+ return (
|
|
|
+ <div style={{ position: "absolute", top: 0, right: 0, maxWidth: "320px"}}>
|
|
|
+ <select onChange={this.switchDrawMode}>
|
|
|
+ <option value="">--Please choose a draw mode--</option>
|
|
|
+ {drawModes.map((mode) => (
|
|
|
+ <option key={mode.id} value={mode.id}>
|
|
|
+ {mode.text}
|
|
|
+ </option>
|
|
|
+ ))}
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
render() {
|
|
|
let testMarkers = this.props.markers
|
|
|
let markers = <></>
|
|
@@ -136,6 +172,22 @@ export default class MapGL extends React.Component{
|
|
|
|
|
|
{markers}
|
|
|
|
|
|
+ <Editor
|
|
|
+ clickRadius={12}
|
|
|
+ mode={this.state.drawModeHandler}
|
|
|
+ onSelect={(_) => {}}
|
|
|
+ featureStyle={({ feature, state }) => {
|
|
|
+ return {
|
|
|
+ stroke: "rgb(189,189,189)",
|
|
|
+ strokeDasharray: "4,2",
|
|
|
+ strokeWidth: 2,
|
|
|
+ fill: "rgb(189,189,189)",
|
|
|
+ fillOpacity: 0.1
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ {this.drawToolbar()}
|
|
|
+
|
|
|
<div className="controllers">
|
|
|
<GeolocateControl />
|
|
|
<FullscreenControl />
|