From bf7708f658cc6299a3b775afe24459b5a808c54d Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Fri, 22 Sep 2017 21:20:54 +0200
Subject: Restructure component and container directories

---
 .../app/map/controls/ZoomControlComponent.js       | 31 ++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/components/app/map/controls/ZoomControlComponent.js

(limited to 'src/components/app/map/controls/ZoomControlComponent.js')

diff --git a/src/components/app/map/controls/ZoomControlComponent.js b/src/components/app/map/controls/ZoomControlComponent.js
new file mode 100644
index 00000000..c5628d16
--- /dev/null
+++ b/src/components/app/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;
-- 
cgit v1.2.3