change buttons in ViewerMapAPI

amosproj · Jun 23, 2021 · 19988b8 · 19988b8
1 parent ae48f55
commit 19988b8
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 7 deletions.
diff --git a/src/css/main.css b/src/css/main.css
@@ -42,4 +42,11 @@ body {
     color: #fff;
 }
 
+#menu {
+    float: left;
+    position: absolute;
+    top: 0 px;
+    left: 0%;
+    z-index: 2000;
+}
 
diff --git a/src/index.html b/src/index.html
@@ -60,6 +60,11 @@
     <div id="pano-viewer"></div>
 
     <div id="map" class="map">
+        <div id="menu">
+            <button id="zoom-in"> + </button>
+            <button id="zoom-out"> - </button>
+            <button id="full-screen"> Full Screen </button>
+        </div>
         <div class="control-OL" id="floorOL">
             <div id="cfOL"></div>
             <select name="dropdown-OL" id="dropdown-floors-OL"></select>

diff --git a/src/js/viewer/ViewerMapAPI.js b/src/js/viewer/ViewerMapAPI.js
@@ -19,7 +19,6 @@ export class ViewerMapAPI {
         // create Map and Layers
         this.map;
         this.vectorLayer = [];
-        this.fullscreen = new ol.control.FullScreen();
         this.initDisplayMap();
         this.init = true;
 
@@ -38,7 +37,8 @@ export class ViewerMapAPI {
         map.addEventListener('fullscreenchange', (event) => {
             // If map set to full screen, hide the floor setting buttons
             hideButtons( "floorOL"); 
-          });
+        });
+        this.control_button();
     }
 
     // Method: Add an event layer to the map (2D) view.
@@ -74,11 +74,9 @@ export class ViewerMapAPI {
             }),
             controls: ol.control.defaults({
                 // Hide Map rotation button
-                rotate: false
-            }).extend([
-                // create fullScreen button
-                this.fullscreen
-            ]),
+                rotate: false,
+                zoom: false
+            }),
             //Disable Zoom Control on MAP
             interactions: ol.interaction.defaults({doubleClickZoom :false}),
         });
@@ -303,6 +301,30 @@ export class ViewerMapAPI {
     setMiddle(poslon, poslan){
             this.map.getView().setCenter([poslon,poslan]);
     }
+
+    control_button(){
+        var zoom_in = document.getElementById('zoom-in');
+        var zoom_out = document.getElementById('zoom-out');
+        var full_screen = document.getElementById('full-screen');
+        var map = this.map;
+
+        zoom_in.addEventListener('click', function () {
+            var view = map.getView();
+			var zoom = view.getZoom();
+			view.setZoom(zoom + 1);
+        })
+
+        zoom_out.addEventListener('click', function () {
+            var view = map.getView();
+			var zoom = view.getZoom();
+            view.setZoom(zoom - 1);
+        })
+
+        full_screen.addEventListener('click', function () {
+            var elem = document.getElementById('map');
+            elem.requestFullscreen();
+        })
+    }
 }
 
 function hideButtons(divId) {