diff options
Diffstat (limited to 'src/components/map/controls')
6 files changed, 85 insertions, 0 deletions
diff --git a/src/components/map/controls/ExportCanvasComponent.js b/src/components/map/controls/ExportCanvasComponent.js new file mode 100644 index 00000000..2f044ffe --- /dev/null +++ b/src/components/map/controls/ExportCanvasComponent.js @@ -0,0 +1,13 @@ +import React from "react"; + +const ExportCanvasComponent = () => ( + <button + className="btn btn-success btn-circle btn-sm" + title="Export Canvas to PNG Image" + onClick={() => window["exportCanvasToImage"]()} + > + <span className="fa fa-camera"/> + </button> +); + +export default ExportCanvasComponent; diff --git a/src/components/map/controls/ScaleIndicatorComponent.js b/src/components/map/controls/ScaleIndicatorComponent.js new file mode 100644 index 00000000..fd9483b5 --- /dev/null +++ b/src/components/map/controls/ScaleIndicatorComponent.js @@ -0,0 +1,14 @@ +import React from "react"; +import {TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS} from "../MapConstants"; +import "./ScaleIndicatorComponent.css"; + +const ScaleIndicatorComponent = ({scale}) => ( + <div + className="scale-indicator" + style={{width: TILE_SIZE_IN_PIXELS * scale}} + > + {TILE_SIZE_IN_METERS}m + </div> +); + +export default ScaleIndicatorComponent; diff --git a/src/components/map/controls/ScaleIndicatorComponent.sass b/src/components/map/controls/ScaleIndicatorComponent.sass new file mode 100644 index 00000000..f2d2b55b --- /dev/null +++ b/src/components/map/controls/ScaleIndicatorComponent.sass @@ -0,0 +1,9 @@ +.scale-indicator + position: absolute + right: 10px + bottom: 10px + z-index: 50 + + border: solid 2px #212529 + border-top: none + border-left: none diff --git a/src/components/map/controls/ToolPanelComponent.js b/src/components/map/controls/ToolPanelComponent.js new file mode 100644 index 00000000..19e9f0d9 --- /dev/null +++ b/src/components/map/controls/ToolPanelComponent.js @@ -0,0 +1,13 @@ +import React from "react"; +import ZoomControlContainer from "../../../containers/map/controls/ZoomControlContainer"; +import ExportCanvasComponent from "./ExportCanvasComponent"; +import "./ToolPanelComponent.css"; + +const ToolPanelComponent = () => ( + <div className="tool-panel"> + <ZoomControlContainer/> + <ExportCanvasComponent/> + </div> +); + +export default ToolPanelComponent; diff --git a/src/components/map/controls/ToolPanelComponent.sass b/src/components/map/controls/ToolPanelComponent.sass new file mode 100644 index 00000000..996712b3 --- /dev/null +++ b/src/components/map/controls/ToolPanelComponent.sass @@ -0,0 +1,5 @@ +.tool-panel + position: absolute + left: 10px + bottom: 10px + z-index: 50 diff --git a/src/components/map/controls/ZoomControlComponent.js b/src/components/map/controls/ZoomControlComponent.js new file mode 100644 index 00000000..c5628d16 --- /dev/null +++ b/src/components/map/controls/ZoomControlComponent.js @@ -0,0 +1,31 @@ +import React from "react"; +import {MAP_MAX_SCALE, MAP_MIN_SCALE, MAP_SCALE_PER_EVENT} from "../MapConstants"; + +const ZoomControlComponent = ({mapScale, setMapScale}) => { + const zoom = (out) => { + const newScale = out ? mapScale / MAP_SCALE_PER_EVENT : mapScale * MAP_SCALE_PER_EVENT; + const boundedScale = Math.min(Math.max(MAP_MIN_SCALE, newScale), MAP_MAX_SCALE); + setMapScale(boundedScale); + }; + + return ( + <span> + <button + className="btn btn-default btn-circle btn-sm mr-1" + title="Zoom in" + onClick={() => zoom(false)} + > + <span className="fa fa-plus"/> + </button> + <button + className="btn btn-default btn-circle btn-sm mr-1" + title="Zoom out" + onClick={() => zoom(true)} + > + <span className="fa fa-minus"/> + </button> + </span> + ); +}; + +export default ZoomControlComponent; |