From 70d6aba9a9fd73bb21a17ad5b50e942d4d21090f Mon Sep 17 00:00:00 2001
From: Matthias Harrer <ma.harrer@gmail.com>
Date: Sat, 12 Jan 2019 16:20:52 +0100
Subject: [PATCH] Integrate /zone map into OnsenUI

- replace hammerjs by own implementation
- removes zone/goto coordinates to eliminate dependency on html
- allows to define multiple zones
- allows to modify the zones
---
 client/index.html                        | 431 +++++---------
 client/js/geometry-polyfill.js           | 715 +++++++++++++++++++++++
 client/zone/hammer.min.js                |   7 -
 client/zone/index.html                   |  48 +-
 client/zone/js-modules/locations.js      |   4 +-
 client/zone/js-modules/map-drawer.js     |   4 +-
 client/zone/js-modules/path-drawer.js    |   2 +-
 client/zone/js-modules/touch-handling.js | 232 ++++++++
 client/zone/js-modules/vacuum-map.js     | 260 ++++-----
 client/zone/main.js                      |  54 +-
 10 files changed, 1279 insertions(+), 478 deletions(-)
 create mode 100644 client/js/geometry-polyfill.js
 delete mode 100644 client/zone/hammer.min.js
 create mode 100644 client/zone/js-modules/touch-handling.js

diff --git a/client/index.html b/client/index.html
index 45e9297476f..dae7afd948d 100644
--- a/client/index.html
+++ b/client/index.html
@@ -5,6 +5,7 @@
     <link rel="stylesheet" href="css/onsen-css-components.min.css">
     <link rel="manifest" href="/manifest.json">
     <script src="js/onsenui.min.js"></script>
+    <script src="js/geometry-polyfill.js"></script>
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#4285f4">
@@ -456,7 +457,7 @@
                 function handleGoToButton() {
                     window.clearTimeout(currentRefreshTimer);
                     var options = []
-                    
+
                     for(var i=0; i < config.spots.length; i++){
                         options.push(config.spots[i][0]);
                     }
@@ -478,7 +479,7 @@
                                 }), "PUT", function (err) {
                                     if (err) {
                                         ons.notification.toast(err, { buttonLabel: 'Dismiss', timeout: 1500 })
-                                    } 
+                                    }
                                     window.setTimeout(function () {
                                         updateHomePage();
                                     }, 3000);
@@ -494,7 +495,7 @@
                 function handleAreaButton() {
                     window.clearTimeout(currentRefreshTimer);
                     var options = []
-                    
+
                     for(var i=0; i < config.areas.length; i++){
                         options.push(config.areas[i][0]);
                     }
@@ -515,7 +516,7 @@
                                 ), "PUT", function (err) {
                                     if (err) {
                                         ons.notification.toast(err, { buttonLabel: 'Dismiss', timeout: 1500 })
-                                    } 
+                                    }
                                     window.setTimeout(function () {
                                         updateHomePage();
                                     }, 3000);
@@ -603,7 +604,7 @@
                                 goToButton.removeAttribute("disabled");
                         if(config.areas)
                             if(config.areas.length > 0)
-                                areaButton.removeAttribute("disabled"); 
+                                areaButton.removeAttribute("disabled");
                     });
                     updateHomePage();
                 };
@@ -689,7 +690,7 @@
                         fn.requestWithPayload("api/start_cleaning_zone", JSON.stringify(zones), "PUT", function (err) {
                             if (err) {
                                 ons.notification.toast(err, { buttonLabel: 'Dismiss', timeout: 1500 })
-                                } 
+                                }
                             loadingBarZones.removeAttribute("indeterminate");
                         });
                     }
@@ -723,7 +724,7 @@
                             zonesList.innerHTML = out;
                             }
                         }
-                        
+
                     });
                 };
             </script>
@@ -732,7 +733,7 @@
             </style>
         </ons-page>
     </template>
-    
+
 
     <template id="zones-configuration-zone.html">
         <ons-page id="zones-configuration-zone-page">
@@ -846,7 +847,7 @@
                          }), "PUT", function (err) {
                          if (err) {
                                ons.notification.toast(err, { buttonLabel: 'Dismiss', timeout: 1500 })
-                            } 
+                            }
                             loadingBarZonesConfigZone.removeAttribute("indeterminate");
                     });
                 }
@@ -858,12 +859,12 @@
                     fn.requestWithPayload("api/set_config", JSON.stringify({config}), "PUT", function (err) {
                         if (err) {
                             ons.notification.toast(err, { buttonLabel: 'Dismiss', timeout: 1500 })
-                        } 
+                        }
                         loadingBarZonesConfigZone.removeAttribute("indeterminate");
                     });
-                }    
+                }
+
 
-                
                 function handleZonesConfigZoneAddButton() {
                     var options = []
                     for(var i=0; i < config.areas.length; i++)
@@ -882,10 +883,10 @@
                             fn.requestWithPayload("api/set_config", JSON.stringify({config}), "PUT", function (err) {
                                 if (err) {
                                     ons.notification.toast(err, { buttonLabel: 'Dismiss', timeout: 1500 })
-                                } 
+                                }
                                 loadingBarZonesConfigZone.removeAttribute("indeterminate");
                             });
-                        } 
+                        }
                     });
                 }
 
@@ -907,10 +908,10 @@
                             fn.requestWithPayload("api/set_config", JSON.stringify({config}), "PUT", function (err) {
                                 if (err) {
                                     ons.notification.toast(err, { buttonLabel: 'Dismiss', timeout: 1500 })
-                                } 
+                                }
                                 loadingBarZonesConfigZone.removeAttribute("indeterminate");
                             });
-                        } 
+                        }
                     });
                 }
 
@@ -920,17 +921,17 @@
             </style>
         </ons-page>
     </template>
-    
+
 
     <template id="zones-configuration-go-to.html">
             <ons-page id="zones-configuration-go-to-page">
-    
+
                 <div class="left">
                     <ons-back-button>Zones</ons-back-button>
                 </div>
-    
+
                 <ons-progress-bar id="loading-bar-zones-go-to" value="0"></ons-progress-bar>
-    
+
                 <ons-list-title style="margin-top:20px;">Go to setup</ons-list-title>
                 <ons-list>
                     <ons-list-item>
@@ -955,7 +956,7 @@
                         </div>
                     </ons-list-item>
                 </ons-list>
-    
+
                 <ons-list-title style="margin-top:20px;">Save Go To spot as</ons-list-title>
                 <ons-list>
                     <ons-list-item>
@@ -972,7 +973,7 @@
                         </div>
                     </ons-list-item>
                 </ons-list>
-    
+
                 <ons-list-title style="margin-top:20px;">Delete Go To spot</ons-list-title>
                 <ons-list>
                     <ons-list-item>
@@ -990,14 +991,14 @@
 
                     function handleZonesConfigGoToButton() {
                         loadingBarZonesGoTo.setAttribute("indeterminate", "indeterminate");
-    
+
                         fn.requestWithPayload("api/go_to", JSON.stringify({
                              x: parseInt(zonesConfigGoToX.value),
                              y: parseInt(zonesConfigGoToY.value),
                         }), "PUT", function (err) {
                              if (err) {
                                    ons.notification.toast(err, { buttonLabel: 'Dismiss', timeout: 1500 })
-                                } 
+                                }
                             loadingBarZonesGoTo.removeAttribute("indeterminate");
                         });
                     }
@@ -1009,15 +1010,15 @@
                         fn.requestWithPayload("api/set_config", JSON.stringify({config}), "PUT", function (err) {
                              if (err) {
                                    ons.notification.toast(err, { buttonLabel: 'Dismiss', timeout: 1500 })
-                                } 
+                                }
                             loadingBarZonesGoTo.removeAttribute("indeterminate");
                         });
-                    }    
+                    }
 
 
                     function handleZonesConfigGoToDeleteButton() {
                         var options = []
-                        
+
                         for(var i=0; i < config.spots.length; i++){
                             options.push(config.spots[i][0]);
                         }
@@ -1039,16 +1040,16 @@
                                 fn.requestWithPayload("api/set_config", JSON.stringify({config}), "PUT", function (err) {
                                     if (err) {
                                         ons.notification.toast(err, { buttonLabel: 'Dismiss', timeout: 1500 })
-                                        } 
+                                        }
                                     loadingBarZonesGoTo.removeAttribute("indeterminate");
                                 });
-                            } 
+                            }
                         });
                     }
                 </script>
             </ons-page>
         </template>
-        
+
     <template id="manualcontrol.html">
         <ons-page id="manualcontrol-page">
             <ons-progress-bar id="loading-bar-manualcontrol" value="0" indeterminate="indeterminate"></ons-progress-bar>
@@ -1163,7 +1164,7 @@
                 function startManualControlTimer() {
                     if (!timedManualControlLoop && manualControlEnabled) {
                         sendManualControl(); //send + start repetitive timer
-                        timedManualControlLoop = setInterval(function(){ 
+                        timedManualControlLoop = setInterval(function(){
                             sendManualControl();
                         }, manualControlDurationMS);
                     }
@@ -1198,7 +1199,7 @@
                     //draw values
                     manualControlCanvasContext.font = "12px Helvetica";
                     manualControlCanvasContext.textAlign = 'left';
-                    manualControlCanvasContext.fillStyle = '#8A8A8A';  
+                    manualControlCanvasContext.fillStyle = '#8A8A8A';
                     manualControlCanvasContext.fillText("Velocity:\t" + currentVelocity.toPrecision(2) + "\tOmega:\t" + currentOmega.toPrecision(2), 30, 30);
                 }
 
@@ -1231,7 +1232,7 @@
                         if (evt.touches.length === 1) { // Only deal with one finger
                             var touch = evt.touches[0]; // Get the information for finger #1
                             return {
-                                x : touch.pageX - rect.left,  //-touch.target.offsetLeft, 
+                                x : touch.pageX - rect.left,  //-touch.target.offsetLeft,
                                 y : touch.pageY - rect.top //-touch.target.offsetTop
                             };
                         }
@@ -1318,9 +1319,9 @@
                 ons.getScriptPage().onShow = function () {
                     manualControlLoadingBar.setAttribute("indeterminate", "indeterminate");
                     refreshManualControlMode();
-                    //Since the robot may disable manual control mode by itself, this timer keeps the 
+                    //Since the robot may disable manual control mode by itself, this timer keeps the
                     //state of the robot in track with the UI
-                    manualControlStateRefreshTimer = setInterval(function(){ 
+                    manualControlStateRefreshTimer = setInterval(function(){
                         refreshManualControlMode();
                     }, manualControlStateRefreshTimerMS);
                 };
@@ -1347,287 +1348,143 @@
 
     <template id="map.html">
         <ons-page id="map-page">
-            <ons-progress-bar id="loading-bar-map" value="0" indeterminate="indeterminate"></ons-progress-bar>
+            <div class="map-page-container">
+                <ons-progress-bar id="loading-bar-map" value="0" indeterminate="indeterminate"></ons-progress-bar>
 
-            <div class="centered-map aspect-ratio">
-                <img id="current-map" class="fit-img fit-img-tight" src="" />
+                <canvas id="map-canvas"></canvas>
             </div>
 
-            <script>
-                var currentRefreshTimer;
-
-                var loadingBar = document.getElementById('loading-bar-map');
-                var map = document.getElementById("current-map");
-
-                //PNG of Robot
-                var rocky = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAfCAMAAAHGjw8oAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADbUExURQAAAICAgICAgICAgICAgICAgHx8fH19fX19fYCAgIGBgX5+foCAgH5+foCAgH9/f39/f35+foCAgH9/f39/f4CAgH5+foGBgYCAgICAgIGBgX9/f39/f35+foCAgH9/f39/f4CAgIODg4eHh4mJiZCQkJycnJ2dnZ6enqCgoKSkpKenp62trbGxsbKysry8vL29vcLCwsXFxcbGxsvLy87OztPT09XV1d/f3+Tk5Ojo6Ozs7O3t7e7u7vHx8fLy8vPz8/X19fb29vf39/j4+Pn5+f39/f7+/v///9yECocAAAAgdFJOUwAGChgcKCkzOT5PVWZnlJmfsLq7wcrS1Nre4OXz+vr7ZhJmqwAAAAlwSFlzAAAXEQAAFxEByibzPwAAAcpJREFUKFNlkolaWkEMhYPggliBFiwWhGOx3AqCsggI4lZt8/5P5ElmuEX5P5hMMjeZJBMRafCvUKnbIqpcioci96owTQWqP0QKC54nImUAyr9k7VD1me4YvibHlJKpVUzQhR+dmdTRSDUvdHh8NK8nhqUVch7cITmXA3rtYDmH+3OL4XI1T+BhJUcXczQxOBXJuve0/daeUr5A6g9muJzo5NI2kPKtyRSGBStKQZ5RC1hENWn6NSRTrDUqLD/lsNKoFTNRETlGMn9dDoGdoDcT1fHPi7EuUDD9dMBw4+6vMQVyInnPXDsdW+8tjWfbYTbzg/OstcagzSlb0+wL/6k+1KPhCrj6YFhzS5eXuHcYNF4bsGtDYhFLTOSMqTsx9e3iyKfynb1SK+RqtEq70RzZPwEGKwv7G0OK1QA42Y+HIgct9P3WWG9ItI/mQTgvoeuWAMdlTRclO/+Km2jwlhDvinGNbyJH6EWV84AJ1wl8JowejqTqTmv+0GqDmVLlg/wLX5Mp2rO3WRs2Zs5fznAVd1EzRh10OONr7hhhM4ctevhiVVxHdYsbq+JzHzaIfdjs5CZ9tGInSfoWEXuL7//fwtn9+Jp7wSryDjBFqnOGeuUxAAAAAElFTkSuQmCC";
-                var charger = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAdVBMVEUAAAA44Yo44Yo44Yo44Yo44Yo44Yo44Yo44Yp26q844Yr///9767Kv89DG9t2g8Md26q5C44/5/vvz/fjY+ei19NNV5ZtJ45T2/fmY78KP7r1v6atq6Kjs/PPi+u7e+uvM9+Gb8MSS7r+H7bhm6KVh56JZ5p3ZkKITAAAACnRSTlMABTr188xpJ4aepd0A4wAAANZJREFUKM9VklmCgzAMQwkQYCSmLKWl2+zL/Y9YcIUL7wvkJHIUJyKkVcyy+JIGCZILGF//QLEqlTmMdsBEXi56igfH/QVGqvXSu49+1KftCbn+dtxB5LOPfNGQNRaKaQNkTJ46OMGczZg8wJB/9TB+J3nFkyqJMp44vBrnWYhJJmOn/5uVzAotV/zACnbUtTbOpHcQzVx8kxw6mavdpYP90dsNcE5k6xd8RoIb2Xgk6xAbfm5C9NiHtxGiXD/U2P96UJunrS/LOeV2GG4wfBi241P5+NwBnAEUFx9FUdUAAAAASUVORK5CYII=";
-                var img_rocky = new Image();
-                img_rocky.src = rocky;
-                var img_charger = new Image();
-                img_charger.src = charger;
-
+            <div class="map-page-buttons">
+                <ons-fab ripple id="add_zone">
+                    <ons-icon icon="fa-plus"></ons-icon>
+                </ons-fab>
+                <ons-fab ripple id="start_zoned_cleanup">
+                    <ons-icon icon="fa-play"></ons-icon>
+                </ons-fab>
+                <ons-fab ripple id="goto">
+                    <ons-icon icon="fa-map-marker"></ons-icon>
+                </ons-fab>
+            </div>
 
+            <script type="module">
+                import { VacuumMap } from "./zone/js-modules/vacuum-map.js"
+                const loadingBar = document.getElementById('loading-bar-map');
+                let map = null;
+                let currentRefreshTimer = null;
 
                 function updateMapPage() {
-                    var canvas = document.createElement("canvas");
-                    var ctx = canvas.getContext('2d');
-
-                    var canvasrobot = document.createElement("canvas");
-                    var ctxrobot = canvasrobot.getContext('2d');
-
-                    var mapImageData;
-                    var first = true;
-                    var cold1, cold2; // old Coordinates
-
-                    canvas.height = 1024 * 4;
-                    canvas.width = 1024 * 4;
-
                     loadingBar.setAttribute("indeterminate", "indeterminate");
-                    fn.request("api/map/latest", "GET", function (err, res) {
+                    fn.request("api/map/latest?doNotTransformPath", "GET", function (err, mapData) {
                         loadingBar.removeAttribute("indeterminate");
                         if (!err) {
-                            mapImageData = getMapImageData(res.map);
-                            mapImageData = scaleImageData(mapImageData, 4);
-
-                            ctx.putImageData(mapImageData, 0, 0);
-
-
-                            res.path.forEach(function (coord) {
-                                if (first) {
-                                    cold1 = coord[0];
-                                    cold2 = coord[1];
-                                }
-                                else {
-                                    ctx.beginPath();
-                                    ctx.lineWidth = 2;
-                                    ctx.strokeStyle = "#FFFFFF";
-                                    ctx.moveTo(cold1, cold2);
-                                    ctx.lineTo(coord[0], coord[1]);
-                                    ctx.stroke();
-
-                                    cold1 = coord[0];
-                                    cold2 = coord[1];
-                                }
-                                first = false;
-
-                            });
-
-                            ctx.drawImage(img_charger,canvas.height/2-img_charger.height/2,canvas.width/2-img_charger.width/2);
-
-                            if (res.path.length > 0) {
-                                var angle = Math.atan2(res.path[res.path.length - 1][1] - res.path[res.path.length - 2][1], res.path[res.path.length - 1][0] - res.path[res.path.length - 2][0]) * 180 / Math.PI;
-                                canvasrobot = rotateRobot(img_rocky, angle);
-                                ctx.drawImage(canvasrobot, res.path[res.path.length - 1][0] - 15, res.path[res.path.length - 1][1] - 15, img_rocky.width, img_rocky.height);
-                            }
-
-                            canvas = trimCanvas(canvas);
-
-                            if (window.innerWidth > window.innerHeight) {
-                                if (canvas.height > canvas.width) {
-                                    canvas = rotate90(canvas);
-                                }
-                            } else if (window.innerHeight > window.innerWidth) {
-                                if (canvas.width > canvas.height) {
-                                    canvas = rotate90(canvas);
-                                }
-                            }
-
-                            //The current aspect ratio map view won't scale the image beyond 100%
-                            //hence this hack was created
-                            while (window.innerWidth > canvas.width || window.innerHeight > canvas.height) {
-                                canvas = scaleCanvas(canvas, 2);
+                            if(map === null) {
+                                map = new VacuumMap(document.getElementById('map-canvas'));
+                                map.initCanvas(mapData);
+                            } else {
+                                map.updateMap(mapData);
                             }
-
-                            map.src = canvas.toDataURL();
                         } else {
                             ons.notification.toast(err, { buttonLabel: 'Dismiss', timeout: 1500 })
                         }
-
                         currentRefreshTimer = window.setTimeout(function () {
                             updateMapPage();
                         }.bind(this), 5000);
                     })
                 }
 
-                ons.getScriptPage().onShow = function () {
-                    updateMapPage();
-                };
-
-                ons.getScriptPage().onHide = function () {
+                // Register update function to be accessible outside of es6 module (see <script> below)
+                window.fn.updateMapPage = updateMapPage;
+                window.fn.cancelUpdateMap = () => {
                     window.clearTimeout(currentRefreshTimer);
                 };
-                function rotateRobot(img, angle) {
-                    var canvasimg = document.createElement("canvas");
-                    canvasimg.width = img.width;
-                    canvasimg.height = img.height;
-                    var ctximg = canvasimg.getContext('2d');
-                    const offset = 90;
 
-                    ctximg.clearRect(0, 0, img.width, img.height);
-                    ctximg.translate(img.width / 2, img.width / 2);
-                    ctximg.rotate((angle + offset) * Math.PI / 180);
-                    ctximg.translate(-img.width / 2, -img.width / 2);
-                    ctximg.drawImage(img, 0, 0);
-                    return canvasimg;
+                /**
+                 * Calls the goto api route with the currently set goto coordinates
+                 */
+                function goto_point(point) {
+                    fetch("../api/go_to", {
+                        method: "put",
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(point)
+                    })
+                    .then(res => res.text())
+                    .then(console.log);
+                }
+
+                /**
+                 * Calls the zoned_cleanup api route with the currently set zone
+                 */
+                function zoned_cleanup(zones) {
+                    fetch("../api/start_cleaning_zone", {
+                        method: "put",
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(zones)
+                    })
+                    .then(res => res.text())
+                    .then(console.log);
                 }
 
-                function rotate90(canvas) {
-                    var canvas2 = document.createElement('canvas');
-                    // noinspection JSSuspiciousNameCombination
-                    canvas2.width = canvas.height;
-                    // noinspection JSSuspiciousNameCombination
-                    canvas2.height = canvas.width;
-                    var ctx = canvas2.getContext('2d');
-
-
-                    ctx.setTransform(0, 1, -1, 0, canvas.height, 0);
-                    ctx.drawImage(canvas, 0, 0);
-
-                    return canvas2;
+                document.getElementById("goto").onclick = () => {
+                    const gotoPoint = map.getLocations().gotoPoints[0];
+                    if(gotoPoint) goto_point(gotoPoint);
                 }
-
-                //https://gist.github.com/timdown/021d9c8f2aabc7092df564996f5afbbf
-                var trimCanvas = (function () {
-                    function rowBlank(imageData, width, y) {
-                        for (var x = 0; x < width; ++x) {
-                            if (imageData.data[y * width * 4 + x * 4 + 3] !== 0) return false;
-                        }
-                        return true;
-                    }
-
-                    function columnBlank(imageData, width, x, top, bottom) {
-                        for (var y = top; y < bottom; ++y) {
-                            if (imageData.data[y * width * 4 + x * 4 + 3] !== 0) return false;
-                        }
-                        return true;
-                    }
-
-                    return function trim(canvas) {
-                        var ctx = canvas.getContext("2d");
-                        var width = canvas.width;
-                        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-                        var top = 0, bottom = imageData.height, left = 0, right = imageData.width;
-
-                        while (top < bottom && rowBlank(imageData, width, top))++top;
-                        while (bottom - 1 > top && rowBlank(imageData, width, bottom - 1))--bottom;
-                        while (left < right && columnBlank(imageData, width, left, top, bottom))++left;
-                        while (right - 1 > left && columnBlank(imageData, width, right - 1, top, bottom))--right;
-
-                        try {
-                            var trimmed = ctx.getImageData(left, top, right - left, bottom - top);
-                            var copy = canvas.ownerDocument.createElement("canvas");
-                            var copyCtx = copy.getContext("2d");
-                            copy.width = trimmed.width;
-                            copy.height = trimmed.height;
-                            copyCtx.putImageData(trimmed, 0, 0);
-
-                            return copy;
-                        } catch (e) {
-                            console.warn("Failed to trim image data", e);
-
-                            return canvas;
-                        }
-                    };
-                })();
-
-                function scaleImageData(imageData, scale) {
-                    var canvas = document.createElement("canvas");
-                    var ctx = canvas.getContext("2d");
-                    var canv2 = document.createElement("canvas");
-                    var ctx2 = canv2.getContext("2d");
-
-                    canvas.height = imageData.height;
-                    canvas.width = imageData.width;
-                    ctx.putImageData(imageData, 0, 0);
-                    canv2.height = imageData.height * scale;
-                    canv2.width = imageData.width * scale;
-
-                    ctx2.scale(scale, scale);
-                    ctx2.imageSmoothingEnabled = false;
-                    ctx2.drawImage(canvas, 0, 0);
-
-                    return ctx2.getImageData(0, 0, canv2.height, canv2.width);
+                document.getElementById("start_zoned_cleanup").onclick = () => {
+                    const repeatNumber = 1;
+                    const zones = map.getLocations().zones.map(zoneCoordinates => [...zoneCoordinates, repeatNumber]);
+                    zoned_cleanup(zones);
                 }
-
-                function scaleCanvas(canvas, scale) {
-                    var canv2 = document.createElement("canvas");
-                    var ctx2 = canv2.getContext("2d");
-
-                    canv2.height = canvas.height * scale;
-                    canv2.width = canvas.width * scale;
-
-                    ctx2.scale(scale, scale);
-                    ctx2.imageSmoothingEnabled = false;
-                    ctx2.drawImage(canvas, 0, 0);
-
-                    return canv2
+                document.getElementById("add_zone").onclick = () => map.addZone();
+            </script>
+            <script defer>
+                // Somehow getScriptPage returns null inside the type=module script tag
+                ons.getScriptPage().onShow = function () {
+                    window.fn.updateMapPage();
+                };
+                ons.getScriptPage().onHide = function () {
+                    window.fn.cancelUpdateMap();
+                };
+            </script>
+            <style>
+                :root {
+                    --map-background-1: #efeff4;
+                    --map-background-2: #afafaf;
+                    --map-free: #0076ff;
+                    --map-occupied: #6699ff;
+                    --path: #ffffff;
                 }
 
-                function getMapImageData(mapData) {
-                    var canvas = document.createElement("canvas");
-                    var ctx = canvas.getContext("2d");
-                    var imgData;
-                    canvas.height = 1024;
-                    canvas.width = 1024;
-
-                    imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-
-                    mapData.forEach(function (px) {
-                        if (px[1] === 0 && px[2] === 0 && px[3] === 0) {
-
-                            imgData.data[px[0]] = 102;
-                            imgData.data[px[0] + 1] = 153;
-                            imgData.data[px[0] + 2] = 255;
-                            imgData.data[px[0] + 3] = 255;
-                        }
-                        else if (px[1] === 255 && px[2] === 255 && px[3] === 255) {
-
-                            imgData.data[px[0]] = 0;
-                            imgData.data[px[0] + 1] = 118;
-                            imgData.data[px[0] + 2] = 255;
-                            imgData.data[px[0] + 3] = 255;
-                        }
-
-                        else {
-                            imgData.data[px[0]] = 0;  // Original: 82,174,255
-                            imgData.data[px[0] + 1] = 118;
-                            imgData.data[px[0] + 2] = 255;
-                            imgData.data[px[0] + 3] = 255;
-                            /*
-                                imgData.data[px[0]] = px[1];
-                                imgData.data[px[0]+1] = px[2];
-                                imgData.data[px[0]+2] = px[3];
-                                imgData.data[px[0]+3] = 255;
-                            */
-                        }
-                    });
+                .map-page-container {
+                    height: 100%;
+                    width: 100%;
+                    display: grid;
+                    grid-template-columns: 1fr;
+                    grid-template-rows: auto 1fr;
+                    justify-items: stretch;
+                    align-items: stretch;
+                }
 
-                    return imgData;
+                canvas#map-canvas {
+                    touch-action: none;
+                    background-image: linear-gradient(var(--map-background-1), var(--map-background-2));
                 }
-            </script>
-            <style>
-                /*noinspection CssOverwrittenProperties*/
-                #current-map {
-                    image-rendering: -moz-crisp-edges;
-                    image-rendering: -webkit-crisp-edges;
-                    image-rendering: pixelated;
-                    image-rendering: crisp-edges;
-                    -ms-interpolation-mode: nearest-neighbor;
+
+                .map-page-buttons {
                     position: absolute;
-                    top: 0;
-                    right: 0;
-                    bottom: 0;
-                    left: 0;
-                    margin: auto;
-                    max-width: 100%;
-                    max-height: 100%
+                    right: 1.5em;
+                    bottom: 1.5em;
+                    display: grid;
+                    grid-template-columns: auto;
+                    grid-template-rows: auto;
+                    grid-gap: 0.5em;
                 }
 
-                .centered-map {
-                    text-align: center;
-                    position: relative;
-                    height: 99%;
+                .map-page-buttons > ons-fab {
+                    background-color: #ffffff;
+                    color: #31313a;
                 }
             </style>
         </ons-page>
@@ -2428,7 +2285,7 @@
                 </div>
             </ons-toolbar>
             <ons-progress-bar id="loading-bar-settings-sound-volume" value="0" indeterminate="indeterminate"></ons-progress-bar>
-            
+
             <ons-list-title style="margin-top:20px;">Sound Volume Settings</ons-list-title>
             <ons-list>
                 <ons-list-item>
@@ -2464,7 +2321,7 @@
             <script>
                 var loadingBarSettingsSoundVolume = document.getElementById('loading-bar-settings-sound-volume');
                 var soundVolumeInputVolume = document.getElementById('settings-sound-volume-input-volume');
-              
+
                 var soundVolumeInputSaveButton = document.getElementById('settings-sound-volume-input-save-button');
 
                 ons.getScriptPage().onShow = function() {
@@ -2499,7 +2356,7 @@
                     }), "PUT", function (err) {
                          if (err) {
                                ons.notification.toast(err, { buttonLabel: 'Dismiss', timeout: 1500 })
-                            } 
+                            }
                         loadingBarSettingsSoundVolume.removeAttribute("indeterminate");
                     });
                 }
@@ -2517,7 +2374,7 @@
             </script>
         </ons-page>
     </template>
-    
+
     <template id="settings-timers.html">
         <ons-page id="settings-timers-page">
                 <ons-dialog id="add-timer-dialog">
diff --git a/client/js/geometry-polyfill.js b/client/js/geometry-polyfill.js
new file mode 100644
index 00000000000..74dc7f78246
--- /dev/null
+++ b/client/js/geometry-polyfill.js
@@ -0,0 +1,715 @@
+// MIT License
+
+// Copyright (c) 2018 Jarek Foksa
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+// https://github.com/jarek-foksa/geometry-polyfill
+
+// @info
+//   DOMPoint polyfill
+// @src
+//   https://drafts.fxtf.org/geometry/#DOMPoint
+//   https://github.com/chromium/chromium/blob/master/third_party/blink/renderer/core/geometry/dom_point_read_only.cc
+{
+    class DOMPoint {
+      constructor(x = 0, y = 0, z = 0, w = 1) {
+        this.x = x;
+        this.y = y;
+        this.z = z;
+        this.w = w;
+      }
+
+      static fromPoint(otherPoint) {
+        return new DOMPoint(
+          otherPoint.x,
+          otherPoint.y,
+          otherPoint.z !== undefined ? otherPoint.z : 0,
+          otherPoint.w !== undefined ? otherPoint.w : 1
+        );
+      }
+
+      matrixTransform(matrix) {
+        if (
+          (matrix.is2D || matrix instanceof SVGMatrix) &&
+          this.z === 0 &&
+          this.w === 1
+        ) {
+          return new DOMPoint(
+            this.x * matrix.a + this.y * matrix.c + matrix.e,
+            this.x * matrix.b + this.y * matrix.d + matrix.f,
+            0, 1
+          );
+        }
+        else {
+          return new DOMPoint(
+            this.x * matrix.m11 + this.y * matrix.m21 + this.z * matrix.m31 + this.w * matrix.m41,
+            this.x * matrix.m12 + this.y * matrix.m22 + this.z * matrix.m32 + this.w * matrix.m42,
+            this.x * matrix.m13 + this.y * matrix.m23 + this.z * matrix.m33 + this.w * matrix.m43,
+            this.x * matrix.m14 + this.y * matrix.m24 + this.z * matrix.m34 + this.w * matrix.m44
+          );
+        }
+      }
+    }
+
+    window.DOMPoint = DOMPoint;
+  }
+
+  // @info
+  //   DOMRect polyfill
+  // @src
+  //   https://drafts.fxtf.org/geometry/#DOMRect
+  //   https://github.com/chromium/chromium/blob/master/third_party/blink/renderer/core/geometry/dom_rect_read_only.cc
+  {
+    class DOMRect {
+      constructor(x = 0, y = 0, width = 0, height = 0) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+      }
+
+      static fromRect(otherRect) {
+        return new DOMRect(otherRect.x, otherRect.y, otherRect.width, otherRect.height);
+      }
+
+      get top() {
+        return this.y;
+      }
+
+      get left() {
+        return this.x;
+      }
+
+      get right() {
+        return this.x + this.width;
+      }
+
+      get bottom() {
+        return this.y + this.height;
+      }
+    }
+
+    window.DOMRect = DOMRect;
+  }
+
+  // @info
+  //   DOMMatrix polyfill (SVG 2)
+  // @src
+  //   https://github.com/chromium/chromium/blob/master/third_party/blink/renderer/core/geometry/dom_matrix_read_only.cc
+  //   https://github.com/tocharomera/generativecanvas/blob/master/node-canvas/lib/DOMMatrix.js
+  {
+    const M11 =  0,  M12 =  1,  M13 =  2,  M14 =  3;
+    const M21 =  4,  M22 =  5,  M23 =  6,  M24 =  7;
+    const M31 =  8,  M32 =  9,  M33 = 10,  M34 = 11;
+    const M41 = 12,  M42 = 13,  M43 = 14,  M44 = 15;
+
+    const A = M11, B = M12;
+    const C = M21, D = M22;
+    const E = M41, F = M42;
+
+    const DEGREE_PER_RAD = 180 / Math.PI;
+    const RAD_PER_DEGREE = Math.PI / 180;
+
+    const $values = Symbol();
+    const $is2D = Symbol();
+
+    let parseMatrix = (init) => {
+      let parsed = init.replace(/matrix\(/, "");
+      parsed = parsed.split(/,/, 7);
+
+      if (parsed.length !== 6) {
+        throw new Error(`Failed to parse ${init}`);
+      }
+
+      parsed = parsed.map(parseFloat);
+
+      return [
+        parsed[0], parsed[1], 0, 0,
+        parsed[2], parsed[3], 0, 0,
+                0,         0, 1, 0,
+        parsed[4], parsed[5], 0, 1
+      ];
+    };
+
+    let parseMatrix3d = (init) => {
+      let parsed = init.replace(/matrix3d\(/, "");
+      parsed = parsed.split(/,/, 17);
+
+      if (parsed.length !== 16) {
+        throw new Error(`Failed to parse ${init}`);
+      }
+
+      return parsed.map(parseFloat);
+    };
+
+    let parseTransform = (tform) => {
+      let type = tform.split(/\(/, 1)[0];
+
+      if (type === "matrix") {
+        return parseMatrix(tform);
+      }
+      else if (type === "matrix3d") {
+        return parseMatrix3d(tform);
+      }
+      else {
+        throw new Error(`${type} parsing not implemented`)
+      }
+    };
+
+    let setNumber2D = (receiver, index, value) => {
+      if (typeof value !== "number") {
+        throw new TypeError("Expected number");
+      }
+
+      receiver[$values][index] = value;
+    };
+
+    let setNumber3D = (receiver, index, value) => {
+      if (typeof value !== "number") {
+        throw new TypeError("Expected number");
+      }
+
+      if (index === M33 || index === M44) {
+        if (value !== 1) {
+          receiver[$is2D] = false;
+        }
+      }
+      else if (value !== 0) {
+        receiver[$is2D] = false;
+      }
+
+      receiver[$values][index] = value;
+    };
+
+    let newInstance = (values) => {
+      let instance = Object.create(DOMMatrix.prototype);
+      instance.constructor = DOMMatrix;
+      instance[$is2D] = true;
+      instance[$values] = values;
+
+      return instance;
+    };
+
+    let multiply = (first, second) => {
+      let dest = new Float64Array(16);
+
+      for (let i = 0; i < 4; i++) {
+        for (let j = 0; j < 4; j++) {
+          let sum = 0;
+
+          for (let k = 0; k < 4; k++) {
+            sum += first[i * 4 + k] * second[k * 4 + j];
+          }
+
+          dest[i * 4 + j] = sum;
+        }
+      }
+
+      return dest;
+    };
+
+    class DOMMatrix {
+      get m11() { return this[$values][M11]; } set m11(value) { setNumber2D(this, M11, value); }
+      get m12() { return this[$values][M12]; } set m12(value) { setNumber2D(this, M12, value); }
+      get m13() { return this[$values][M13]; } set m13(value) { setNumber3D(this, M13, value); }
+      get m14() { return this[$values][M14]; } set m14(value) { setNumber3D(this, M14, value); }
+      get m21() { return this[$values][M21]; } set m21(value) { setNumber2D(this, M21, value); }
+      get m22() { return this[$values][M22]; } set m22(value) { setNumber2D(this, M22, value); }
+      get m23() { return this[$values][M23]; } set m23(value) { setNumber3D(this, M23, value); }
+      get m24() { return this[$values][M24]; } set m24(value) { setNumber3D(this, M24, value); }
+      get m31() { return this[$values][M31]; } set m31(value) { setNumber3D(this, M31, value); }
+      get m32() { return this[$values][M32]; } set m32(value) { setNumber3D(this, M32, value); }
+      get m33() { return this[$values][M33]; } set m33(value) { setNumber3D(this, M33, value); }
+      get m34() { return this[$values][M34]; } set m34(value) { setNumber3D(this, M34, value); }
+      get m41() { return this[$values][M41]; } set m41(value) { setNumber2D(this, M41, value); }
+      get m42() { return this[$values][M42]; } set m42(value) { setNumber2D(this, M42, value); }
+      get m43() { return this[$values][M43]; } set m43(value) { setNumber3D(this, M43, value); }
+      get m44() { return this[$values][M44]; } set m44(value) { setNumber3D(this, M44, value); }
+
+      get a() { return this[$values][A]; } set a(value) { setNumber2D(this, A, value); }
+      get b() { return this[$values][B]; } set b(value) { setNumber2D(this, B, value); }
+      get c() { return this[$values][C]; } set c(value) { setNumber2D(this, C, value); }
+      get d() { return this[$values][D]; } set d(value) { setNumber2D(this, D, value); }
+      get e() { return this[$values][E]; } set e(value) { setNumber2D(this, E, value); }
+      get f() { return this[$values][F]; } set f(value) { setNumber2D(this, F, value); }
+
+      get is2D() {
+        return this[$is2D];
+      }
+
+      get isIdentity() {
+        let values = this[$values];
+
+        return values[M11] === 1 && values[M12] === 0 && values[M13] === 0 && values[M14] === 0 &&
+               values[M21] === 0 && values[M22] === 1 && values[M23] === 0 && values[M24] === 0 &&
+               values[M31] === 0 && values[M32] === 0 && values[M33] === 1 && values[M34] === 0 &&
+               values[M41] === 0 && values[M42] === 0 && values[M43] === 0 && values[M44] === 1;
+      }
+
+      static fromMatrix(init) {
+        if (init instanceof DOMMatrix) {
+          return new DOMMatrix(init[$values]);
+        }
+        else if (init instanceof SVGMatrix) {
+          return new DOMMatrix([init.a, init.b, init.c, init.d, init.e, init.f]);
+        }
+        else {
+          throw new TypeError("Expected DOMMatrix");
+        }
+      }
+
+      static fromFloat32Array(init) {
+        if (!(init instanceof Float32Array)) throw new TypeError("Expected Float32Array");
+        return new DOMMatrix(init);
+      }
+
+      static fromFloat64Array(init) {
+        if (!(init instanceof Float64Array)) throw new TypeError("Expected Float64Array");
+        return new DOMMatrix(init);
+      }
+
+      // @type
+      // (Float64Array) => void
+      constructor(init) {
+        this[$is2D] = true;
+
+        this[$values] = new Float64Array([
+          1, 0, 0, 0,
+          0, 1, 0, 0,
+          0, 0, 1, 0,
+          0, 0, 0, 1
+        ]);
+
+        // Parse CSS transformList
+        if (typeof init === "string") {
+          if (init === "") {
+            return;
+          }
+          else {
+            let tforms = init.split(/\)\s+/, 20).map(parseTransform);
+
+            if (tforms.length === 0) {
+              return;
+            }
+
+            init = tforms[0];
+
+            for (let i = 1; i < tforms.length; i++) {
+              init = multiply(tforms[i], init);
+            }
+          }
+        }
+
+        let i = 0;
+
+        if (init && init.length === 6) {
+          setNumber2D(this, A, init[i++]);
+          setNumber2D(this, B, init[i++]);
+          setNumber2D(this, C, init[i++]);
+          setNumber2D(this, D, init[i++]);
+          setNumber2D(this, E, init[i++]);
+          setNumber2D(this, F, init[i++]);
+        }
+        else if (init && init.length === 16) {
+          setNumber2D(this, M11, init[i++]);
+          setNumber2D(this, M12, init[i++]);
+          setNumber3D(this, M13, init[i++]);
+          setNumber3D(this, M14, init[i++]);
+          setNumber2D(this, M21, init[i++]);
+          setNumber2D(this, M22, init[i++]);
+          setNumber3D(this, M23, init[i++]);
+          setNumber3D(this, M24, init[i++]);
+          setNumber3D(this, M31, init[i++]);
+          setNumber3D(this, M32, init[i++]);
+          setNumber3D(this, M33, init[i++]);
+          setNumber3D(this, M34, init[i++]);
+          setNumber2D(this, M41, init[i++]);
+          setNumber2D(this, M42, init[i++]);
+          setNumber3D(this, M43, init[i++]);
+          setNumber3D(this, M44, init[i]);
+        }
+        else if (init !== undefined) {
+          throw new TypeError("Expected string or array.");
+        }
+      }
+
+      inspect(depth, options) {
+        if (depth < 0) {
+          return "[DOMMatrix]";
+        }
+
+        return `DOMMatrix [
+          a: ${this.a}
+          b: ${this.b}
+          c: ${this.c}
+          d: ${this.d}
+          e: ${this.e}
+          f: ${this.f}
+          m11: ${this.m11}
+          m12: ${this.m12}
+          m13: ${this.m13}
+          m14: ${this.m14}
+          m21: ${this.m21}
+          m22: ${this.m22}
+          m23: ${this.m23}
+          m23: ${this.m23}
+          m31: ${this.m31}
+          m32: ${this.m32}
+          m33: ${this.m33}
+          m34: ${this.m34}
+          m41: ${this.m41}
+          m42: ${this.m42}
+          m43: ${this.m43}
+          m44: ${this.m44}
+          is2D: ${this.is2D}
+          isIdentity: ${this.isIdentity} ]`;
+      }
+
+      multiply(other) {
+        return newInstance(this[$values]).multiplySelf(other);
+      }
+
+      multiplySelf(other) {
+        this[$values] = multiply(other[$values], this[$values]);
+
+        if (!other.is2D) {
+          this[$is2D] = false;
+        }
+
+        return this;
+      }
+
+      preMultiplySelf(other) {
+        this[$values] = multiply(this[$values], other[$values]);
+
+        if (!other.is2D) {
+          this[$is2D] = false;
+        }
+
+        return this;
+      }
+
+      translate(tx, ty, tz) {
+        return newInstance(this[$values]).translateSelf(tx, ty, tz);
+      }
+
+      translateSelf(tx = 0, ty = 0, tz = 0) {
+        this[$values] = multiply([
+          1, 0, 0, 0,
+          0, 1, 0, 0,
+          0, 0, 1, 0,
+          tx, ty, tz, 1
+        ], this[$values]);
+
+        if (tz !== 0) {
+          this[$is2D] = false;
+        }
+
+        return this;
+      }
+
+      scale(scaleX, scaleY, scaleZ, originX, originY, originZ) {
+        return newInstance(this[$values]).scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ);
+      }
+
+      scale3d(scale, originX, originY, originZ) {
+        return newInstance(this[$values]).scale3dSelf(scale, originX, originY, originZ);
+      }
+
+      scale3dSelf(scale, originX, originY, originZ) {
+        return this.scaleSelf(scale, scale, scale, originX, originY, originZ);
+      }
+
+      scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ) {
+        // Not redundant with translate's checks because we need to negate the values later.
+        if (typeof originX !== "number") originX = 0;
+        if (typeof originY !== "number") originY = 0;
+        if (typeof originZ !== "number") originZ = 0;
+
+        this.translateSelf(originX, originY, originZ);
+
+        if (typeof scaleX !== "number") scaleX = 1;
+        if (typeof scaleY !== "number") scaleY = scaleX;
+        if (typeof scaleZ !== "number") scaleZ = 1;
+
+        this[$values] = multiply([
+          scaleX, 0, 0, 0,
+          0, scaleY, 0, 0,
+          0, 0, scaleZ, 0,
+          0, 0, 0, 1
+        ], this[$values]);
+
+        this.translateSelf(-originX, -originY, -originZ);
+
+        if (scaleZ !== 1 || originZ !== 0) {
+          this[$is2D] = false;
+        }
+
+        return this;
+      }
+
+      rotateFromVector(x, y) {
+        return newInstance(this[$values]).rotateFromVectorSelf(x, y);
+      }
+
+      rotateFromVectorSelf(x = 0, y = 0) {
+        let theta = (x === 0 && y === 0) ? 0 : Math.atan2(y, x) * DEGREE_PER_RAD;
+        return this.rotateSelf(theta);
+      }
+
+      rotate(rotX, rotY, rotZ) {
+        return newInstance(this[$values]).rotateSelf(rotX, rotY, rotZ);
+      }
+
+      rotateSelf(rotX, rotY, rotZ) {
+        if (rotY === undefined && rotZ === undefined) {
+          rotZ = rotX;
+          rotX = rotY = 0;
+        }
+
+        if (typeof rotY !== "number") rotY = 0;
+        if (typeof rotZ !== "number") rotZ = 0;
+
+        if (rotX !== 0 || rotY !== 0) {
+          this[$is2D] = false;
+        }
+
+        rotX *= RAD_PER_DEGREE;
+        rotY *= RAD_PER_DEGREE;
+        rotZ *= RAD_PER_DEGREE;
+
+        let c = Math.cos(rotZ);
+        let s = Math.sin(rotZ);
+
+        this[$values] = multiply([
+          c, s, 0, 0,
+          -s, c, 0, 0,
+          0, 0, 1, 0,
+          0, 0, 0, 1
+        ], this[$values]);
+
+        c = Math.cos(rotY);
+        s = Math.sin(rotY);
+
+        this[$values] = multiply([
+          c, 0, -s, 0,
+          0, 1, 0, 0,
+          s, 0, c, 0,
+          0, 0, 0, 1
+        ], this[$values]);
+
+        c = Math.cos(rotX);
+        s = Math.sin(rotX);
+
+        this[$values] = multiply([
+          1, 0, 0, 0,
+          0, c, s, 0,
+          0, -s, c, 0,
+          0, 0, 0, 1
+        ], this[$values]);
+
+        return this;
+      }
+
+      rotateAxisAngle(x, y, z, angle) {
+        return newInstance(this[$values]).rotateAxisAngleSelf(x, y, z, angle);
+      }
+
+      rotateAxisAngleSelf(x = 0, y = 0, z = 0, angle = 0) {
+        let length = Math.sqrt(x * x + y * y + z * z);
+
+        if (length === 0) {
+          return this;
+        }
+
+        if (length !== 1) {
+          x /= length;
+          y /= length;
+          z /= length;
+        }
+
+        angle *= RAD_PER_DEGREE;
+
+        let c = Math.cos(angle);
+        let s = Math.sin(angle);
+        let t = 1 - c;
+        let tx = t * x;
+        let ty = t * y;
+
+        this[$values] = multiply([
+          tx * x + c,      tx * y + s * z,  tx * z - s * y,  0,
+          tx * y - s * z,  ty * y + c,      ty * z + s * x,  0,
+          tx * z + s * y,  ty * z - s * x,  t * z * z + c,   0,
+          0,               0,               0,               1
+        ], this[$values]);
+
+        if (x !== 0 || y !== 0) {
+          this[$is2D] = false;
+        }
+
+        return this;
+      }
+
+      skewX(sx) {
+        return newInstance(this[$values]).skewXSelf(sx);
+      }
+
+      skewXSelf(sx) {
+        if (typeof sx !== "number") {
+          return this;
+        }
+
+        let t = Math.tan(sx * RAD_PER_DEGREE);
+
+        this[$values] = multiply([
+          1, 0, 0, 0,
+          t, 1, 0, 0,
+          0, 0, 1, 0,
+          0, 0, 0, 1
+        ], this[$values]);
+
+        return this;
+      }
+
+      skewY(sy) {
+        return newInstance(this[$values]).skewYSelf(sy);
+      }
+
+      skewYSelf(sy) {
+        if (typeof sy !== "number") {
+          return this;
+        }
+
+        let t = Math.tan(sy * RAD_PER_DEGREE);
+
+        this[$values] = multiply([
+          1, t, 0, 0,
+          0, 1, 0, 0,
+          0, 0, 1, 0,
+          0, 0, 0, 1
+        ], this[$values]);
+
+        return this;
+      }
+
+      flipX() {
+        return newInstance(multiply([
+          -1, 0, 0, 0,
+          0, 1, 0, 0,
+          0, 0, 1, 0,
+          0, 0, 0, 1
+        ], this[$values]));
+      }
+
+      flipY() {
+        return newInstance(multiply([
+          1, 0, 0, 0,
+          0, -1, 0, 0,
+          0, 0, 1, 0,
+          0, 0, 0, 1
+        ], this[$values]));
+      }
+
+      inverse () {
+        return newInstance(this[$values]).invertSelf();
+      }
+
+      invertSelf() {
+        if (this[$is2D]) {
+          let det = this[$values][A] * this[$values][D] - this[$values][B] * this[$values][C];
+
+          // Invertable
+          if (det !== 0) {
+            let result = new DOMMatrix();
+
+            result.a =  this[$values][D] / det;
+            result.b = -this[$values][B] / det;
+            result.c = -this[$values][C] / det;
+            result.d =  this[$values][A] / det;
+            result.e = (this[$values][C] * this[$values][F] - this[$values][D] * this[$values][E]) / det;
+            result.f = (this[$values][B] * this[$values][E] - this[$values][A] * this[$values][F]) / det;
+
+            return result;
+          }
+
+          // Not invertable
+          else {
+            this[$is2D] = false;
+
+            this[$values] = [
+              NaN, NaN, NaN, NaN,
+              NaN, NaN, NaN, NaN,
+              NaN, NaN, NaN, NaN,
+              NaN, NaN, NaN, NaN
+            ];
+          }
+        }
+        else {
+          throw new Error("3D matrix inversion is not implemented.");
+        }
+      }
+
+      setMatrixValue(transformList) {
+        let temp = new DOMMatrix(transformList);
+
+        this[$values] = temp[$values];
+        this[$is2D] = temp[$is2D];
+
+        return this;
+      }
+
+      transformPoint(point) {
+        point = new DOMPoint(point);
+
+        let x = point.x;
+        let y = point.y;
+        let z = point.z;
+        let w = point.w;
+
+        let values = this[$values];
+
+        let nx = values[M11] * x + values[M21] * y + values[M31] * z + values[M41] * w;
+        let ny = values[M12] * x + values[M22] * y + values[M32] * z + values[M42] * w;
+        let nz = values[M13] * x + values[M23] * y + values[M33] * z + values[M43] * w;
+        let nw = values[M14] * x + values[M24] * y + values[M34] * z + values[M44] * w;
+
+        return new DOMPoint(nx, ny, nz, nw);
+      }
+
+      toFloat32Array() {
+        return Float32Array.from(this[$values]);
+      }
+
+      toFloat64Array() {
+        return this[$values].slice(0);
+      }
+
+      toString() {
+        if (this.is2D) {
+          return `matrix(${this.a}, ${this.b}, ${this.c}, ${this.d}, ${this.e}, ${this.f})`;
+        }
+        else {
+          return `matrix3d(${this[$values].join(", ")})`;
+        }
+      }
+    }
+
+    window.DOMMatrix = DOMMatrix;
+  }
\ No newline at end of file
diff --git a/client/zone/hammer.min.js b/client/zone/hammer.min.js
deleted file mode 100644
index edadee1596a..00000000000
--- a/client/zone/hammer.min.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/*! Hammer.JS - v2.0.8 - 2016-04-23
- * http://hammerjs.github.io/
- *
- * Copyright (c) 2016 Jorik Tangelder;
- * Licensed under the MIT license */
-!function(a,b,c,d){"use strict";function e(a,b,c){return setTimeout(j(a,c),b)}function f(a,b,c){return Array.isArray(a)?(g(a,c[b],c),!0):!1}function g(a,b,c){var e;if(a)if(a.forEach)a.forEach(b,c);else if(a.length!==d)for(e=0;e<a.length;)b.call(c,a[e],e,a),e++;else for(e in a)a.hasOwnProperty(e)&&b.call(c,a[e],e,a)}function h(b,c,d){var e="DEPRECATED METHOD: "+c+"\n"+d+" AT \n";return function(){var c=new Error("get-stack-trace"),d=c&&c.stack?c.stack.replace(/^[^\(]+?[\n$]/gm,"").replace(/^\s+at\s+/gm,"").replace(/^Object.<anonymous>\s*\(/gm,"{anonymous}()@"):"Unknown Stack Trace",f=a.console&&(a.console.warn||a.console.log);return f&&f.call(a.console,e,d),b.apply(this,arguments)}}function i(a,b,c){var d,e=b.prototype;d=a.prototype=Object.create(e),d.constructor=a,d._super=e,c&&la(d,c)}function j(a,b){return function(){return a.apply(b,arguments)}}function k(a,b){return typeof a==oa?a.apply(b?b[0]||d:d,b):a}function l(a,b){return a===d?b:a}function m(a,b,c){g(q(b),function(b){a.addEventListener(b,c,!1)})}function n(a,b,c){g(q(b),function(b){a.removeEventListener(b,c,!1)})}function o(a,b){for(;a;){if(a==b)return!0;a=a.parentNode}return!1}function p(a,b){return a.indexOf(b)>-1}function q(a){return a.trim().split(/\s+/g)}function r(a,b,c){if(a.indexOf&&!c)return a.indexOf(b);for(var d=0;d<a.length;){if(c&&a[d][c]==b||!c&&a[d]===b)return d;d++}return-1}function s(a){return Array.prototype.slice.call(a,0)}function t(a,b,c){for(var d=[],e=[],f=0;f<a.length;){var g=b?a[f][b]:a[f];r(e,g)<0&&d.push(a[f]),e[f]=g,f++}return c&&(d=b?d.sort(function(a,c){return a[b]>c[b]}):d.sort()),d}function u(a,b){for(var c,e,f=b[0].toUpperCase()+b.slice(1),g=0;g<ma.length;){if(c=ma[g],e=c?c+f:b,e in a)return e;g++}return d}function v(){return ua++}function w(b){var c=b.ownerDocument||b;return c.defaultView||c.parentWindow||a}function x(a,b){var c=this;this.manager=a,this.callback=b,this.element=a.element,this.target=a.options.inputTarget,this.domHandler=function(b){k(a.options.enable,[a])&&c.handler(b)},this.init()}function y(a){var b,c=a.options.inputClass;return new(b=c?c:xa?M:ya?P:wa?R:L)(a,z)}function z(a,b,c){var d=c.pointers.length,e=c.changedPointers.length,f=b&Ea&&d-e===0,g=b&(Ga|Ha)&&d-e===0;c.isFirst=!!f,c.isFinal=!!g,f&&(a.session={}),c.eventType=b,A(a,c),a.emit("hammer.input",c),a.recognize(c),a.session.prevInput=c}function A(a,b){var c=a.session,d=b.pointers,e=d.length;c.firstInput||(c.firstInput=D(b)),e>1&&!c.firstMultiple?c.firstMultiple=D(b):1===e&&(c.firstMultiple=!1);var f=c.firstInput,g=c.firstMultiple,h=g?g.center:f.center,i=b.center=E(d);b.timeStamp=ra(),b.deltaTime=b.timeStamp-f.timeStamp,b.angle=I(h,i),b.distance=H(h,i),B(c,b),b.offsetDirection=G(b.deltaX,b.deltaY);var j=F(b.deltaTime,b.deltaX,b.deltaY);b.overallVelocityX=j.x,b.overallVelocityY=j.y,b.overallVelocity=qa(j.x)>qa(j.y)?j.x:j.y,b.scale=g?K(g.pointers,d):1,b.rotation=g?J(g.pointers,d):0,b.maxPointers=c.prevInput?b.pointers.length>c.prevInput.maxPointers?b.pointers.length:c.prevInput.maxPointers:b.pointers.length,C(c,b);var k=a.element;o(b.srcEvent.target,k)&&(k=b.srcEvent.target),b.target=k}function B(a,b){var c=b.center,d=a.offsetDelta||{},e=a.prevDelta||{},f=a.prevInput||{};b.eventType!==Ea&&f.eventType!==Ga||(e=a.prevDelta={x:f.deltaX||0,y:f.deltaY||0},d=a.offsetDelta={x:c.x,y:c.y}),b.deltaX=e.x+(c.x-d.x),b.deltaY=e.y+(c.y-d.y)}function C(a,b){var c,e,f,g,h=a.lastInterval||b,i=b.timeStamp-h.timeStamp;if(b.eventType!=Ha&&(i>Da||h.velocity===d)){var j=b.deltaX-h.deltaX,k=b.deltaY-h.deltaY,l=F(i,j,k);e=l.x,f=l.y,c=qa(l.x)>qa(l.y)?l.x:l.y,g=G(j,k),a.lastInterval=b}else c=h.velocity,e=h.velocityX,f=h.velocityY,g=h.direction;b.velocity=c,b.velocityX=e,b.velocityY=f,b.direction=g}function D(a){for(var b=[],c=0;c<a.pointers.length;)b[c]={clientX:pa(a.pointers[c].clientX),clientY:pa(a.pointers[c].clientY)},c++;return{timeStamp:ra(),pointers:b,center:E(b),deltaX:a.deltaX,deltaY:a.deltaY}}function E(a){var b=a.length;if(1===b)return{x:pa(a[0].clientX),y:pa(a[0].clientY)};for(var c=0,d=0,e=0;b>e;)c+=a[e].clientX,d+=a[e].clientY,e++;return{x:pa(c/b),y:pa(d/b)}}function F(a,b,c){return{x:b/a||0,y:c/a||0}}function G(a,b){return a===b?Ia:qa(a)>=qa(b)?0>a?Ja:Ka:0>b?La:Ma}function H(a,b,c){c||(c=Qa);var d=b[c[0]]-a[c[0]],e=b[c[1]]-a[c[1]];return Math.sqrt(d*d+e*e)}function I(a,b,c){c||(c=Qa);var d=b[c[0]]-a[c[0]],e=b[c[1]]-a[c[1]];return 180*Math.atan2(e,d)/Math.PI}function J(a,b){return I(b[1],b[0],Ra)+I(a[1],a[0],Ra)}function K(a,b){return H(b[0],b[1],Ra)/H(a[0],a[1],Ra)}function L(){this.evEl=Ta,this.evWin=Ua,this.pressed=!1,x.apply(this,arguments)}function M(){this.evEl=Xa,this.evWin=Ya,x.apply(this,arguments),this.store=this.manager.session.pointerEvents=[]}function N(){this.evTarget=$a,this.evWin=_a,this.started=!1,x.apply(this,arguments)}function O(a,b){var c=s(a.touches),d=s(a.changedTouches);return b&(Ga|Ha)&&(c=t(c.concat(d),"identifier",!0)),[c,d]}function P(){this.evTarget=bb,this.targetIds={},x.apply(this,arguments)}function Q(a,b){var c=s(a.touches),d=this.targetIds;if(b&(Ea|Fa)&&1===c.length)return d[c[0].identifier]=!0,[c,c];var e,f,g=s(a.changedTouches),h=[],i=this.target;if(f=c.filter(function(a){return o(a.target,i)}),b===Ea)for(e=0;e<f.length;)d[f[e].identifier]=!0,e++;for(e=0;e<g.length;)d[g[e].identifier]&&h.push(g[e]),b&(Ga|Ha)&&delete d[g[e].identifier],e++;return h.length?[t(f.concat(h),"identifier",!0),h]:void 0}function R(){x.apply(this,arguments);var a=j(this.handler,this);this.touch=new P(this.manager,a),this.mouse=new L(this.manager,a),this.primaryTouch=null,this.lastTouches=[]}function S(a,b){a&Ea?(this.primaryTouch=b.changedPointers[0].identifier,T.call(this,b)):a&(Ga|Ha)&&T.call(this,b)}function T(a){var b=a.changedPointers[0];if(b.identifier===this.primaryTouch){var c={x:b.clientX,y:b.clientY};this.lastTouches.push(c);var d=this.lastTouches,e=function(){var a=d.indexOf(c);a>-1&&d.splice(a,1)};setTimeout(e,cb)}}function U(a){for(var b=a.srcEvent.clientX,c=a.srcEvent.clientY,d=0;d<this.lastTouches.length;d++){var e=this.lastTouches[d],f=Math.abs(b-e.x),g=Math.abs(c-e.y);if(db>=f&&db>=g)return!0}return!1}function V(a,b){this.manager=a,this.set(b)}function W(a){if(p(a,jb))return jb;var b=p(a,kb),c=p(a,lb);return b&&c?jb:b||c?b?kb:lb:p(a,ib)?ib:hb}function X(){if(!fb)return!1;var b={},c=a.CSS&&a.CSS.supports;return["auto","manipulation","pan-y","pan-x","pan-x pan-y","none"].forEach(function(d){b[d]=c?a.CSS.supports("touch-action",d):!0}),b}function Y(a){this.options=la({},this.defaults,a||{}),this.id=v(),this.manager=null,this.options.enable=l(this.options.enable,!0),this.state=nb,this.simultaneous={},this.requireFail=[]}function Z(a){return a&sb?"cancel":a&qb?"end":a&pb?"move":a&ob?"start":""}function $(a){return a==Ma?"down":a==La?"up":a==Ja?"left":a==Ka?"right":""}function _(a,b){var c=b.manager;return c?c.get(a):a}function aa(){Y.apply(this,arguments)}function ba(){aa.apply(this,arguments),this.pX=null,this.pY=null}function ca(){aa.apply(this,arguments)}function da(){Y.apply(this,arguments),this._timer=null,this._input=null}function ea(){aa.apply(this,arguments)}function fa(){aa.apply(this,arguments)}function ga(){Y.apply(this,arguments),this.pTime=!1,this.pCenter=!1,this._timer=null,this._input=null,this.count=0}function ha(a,b){return b=b||{},b.recognizers=l(b.recognizers,ha.defaults.preset),new ia(a,b)}function ia(a,b){this.options=la({},ha.defaults,b||{}),this.options.inputTarget=this.options.inputTarget||a,this.handlers={},this.session={},this.recognizers=[],this.oldCssProps={},this.element=a,this.input=y(this),this.touchAction=new V(this,this.options.touchAction),ja(this,!0),g(this.options.recognizers,function(a){var b=this.add(new a[0](a[1]));a[2]&&b.recognizeWith(a[2]),a[3]&&b.requireFailure(a[3])},this)}function ja(a,b){var c=a.element;if(c.style){var d;g(a.options.cssProps,function(e,f){d=u(c.style,f),b?(a.oldCssProps[d]=c.style[d],c.style[d]=e):c.style[d]=a.oldCssProps[d]||""}),b||(a.oldCssProps={})}}function ka(a,c){var d=b.createEvent("Event");d.initEvent(a,!0,!0),d.gesture=c,c.target.dispatchEvent(d)}var la,ma=["","webkit","Moz","MS","ms","o"],na=b.createElement("div"),oa="function",pa=Math.round,qa=Math.abs,ra=Date.now;la="function"!=typeof Object.assign?function(a){if(a===d||null===a)throw new TypeError("Cannot convert undefined or null to object");for(var b=Object(a),c=1;c<arguments.length;c++){var e=arguments[c];if(e!==d&&null!==e)for(var f in e)e.hasOwnProperty(f)&&(b[f]=e[f])}return b}:Object.assign;var sa=h(function(a,b,c){for(var e=Object.keys(b),f=0;f<e.length;)(!c||c&&a[e[f]]===d)&&(a[e[f]]=b[e[f]]),f++;return a},"extend","Use `assign`."),ta=h(function(a,b){return sa(a,b,!0)},"merge","Use `assign`."),ua=1,va=/mobile|tablet|ip(ad|hone|od)|android/i,wa="ontouchstart"in a,xa=u(a,"PointerEvent")!==d,ya=wa&&va.test(navigator.userAgent),za="touch",Aa="pen",Ba="mouse",Ca="kinect",Da=25,Ea=1,Fa=2,Ga=4,Ha=8,Ia=1,Ja=2,Ka=4,La=8,Ma=16,Na=Ja|Ka,Oa=La|Ma,Pa=Na|Oa,Qa=["x","y"],Ra=["clientX","clientY"];x.prototype={handler:function(){},init:function(){this.evEl&&m(this.element,this.evEl,this.domHandler),this.evTarget&&m(this.target,this.evTarget,this.domHandler),this.evWin&&m(w(this.element),this.evWin,this.domHandler)},destroy:function(){this.evEl&&n(this.element,this.evEl,this.domHandler),this.evTarget&&n(this.target,this.evTarget,this.domHandler),this.evWin&&n(w(this.element),this.evWin,this.domHandler)}};var Sa={mousedown:Ea,mousemove:Fa,mouseup:Ga},Ta="mousedown",Ua="mousemove mouseup";i(L,x,{handler:function(a){var b=Sa[a.type];b&Ea&&0===a.button&&(this.pressed=!0),b&Fa&&1!==a.which&&(b=Ga),this.pressed&&(b&Ga&&(this.pressed=!1),this.callback(this.manager,b,{pointers:[a],changedPointers:[a],pointerType:Ba,srcEvent:a}))}});var Va={pointerdown:Ea,pointermove:Fa,pointerup:Ga,pointercancel:Ha,pointerout:Ha},Wa={2:za,3:Aa,4:Ba,5:Ca},Xa="pointerdown",Ya="pointermove pointerup pointercancel";a.MSPointerEvent&&!a.PointerEvent&&(Xa="MSPointerDown",Ya="MSPointerMove MSPointerUp MSPointerCancel"),i(M,x,{handler:function(a){var b=this.store,c=!1,d=a.type.toLowerCase().replace("ms",""),e=Va[d],f=Wa[a.pointerType]||a.pointerType,g=f==za,h=r(b,a.pointerId,"pointerId");e&Ea&&(0===a.button||g)?0>h&&(b.push(a),h=b.length-1):e&(Ga|Ha)&&(c=!0),0>h||(b[h]=a,this.callback(this.manager,e,{pointers:b,changedPointers:[a],pointerType:f,srcEvent:a}),c&&b.splice(h,1))}});var Za={touchstart:Ea,touchmove:Fa,touchend:Ga,touchcancel:Ha},$a="touchstart",_a="touchstart touchmove touchend touchcancel";i(N,x,{handler:function(a){var b=Za[a.type];if(b===Ea&&(this.started=!0),this.started){var c=O.call(this,a,b);b&(Ga|Ha)&&c[0].length-c[1].length===0&&(this.started=!1),this.callback(this.manager,b,{pointers:c[0],changedPointers:c[1],pointerType:za,srcEvent:a})}}});var ab={touchstart:Ea,touchmove:Fa,touchend:Ga,touchcancel:Ha},bb="touchstart touchmove touchend touchcancel";i(P,x,{handler:function(a){var b=ab[a.type],c=Q.call(this,a,b);c&&this.callback(this.manager,b,{pointers:c[0],changedPointers:c[1],pointerType:za,srcEvent:a})}});var cb=2500,db=25;i(R,x,{handler:function(a,b,c){var d=c.pointerType==za,e=c.pointerType==Ba;if(!(e&&c.sourceCapabilities&&c.sourceCapabilities.firesTouchEvents)){if(d)S.call(this,b,c);else if(e&&U.call(this,c))return;this.callback(a,b,c)}},destroy:function(){this.touch.destroy(),this.mouse.destroy()}});var eb=u(na.style,"touchAction"),fb=eb!==d,gb="compute",hb="auto",ib="manipulation",jb="none",kb="pan-x",lb="pan-y",mb=X();V.prototype={set:function(a){a==gb&&(a=this.compute()),fb&&this.manager.element.style&&mb[a]&&(this.manager.element.style[eb]=a),this.actions=a.toLowerCase().trim()},update:function(){this.set(this.manager.options.touchAction)},compute:function(){var a=[];return g(this.manager.recognizers,function(b){k(b.options.enable,[b])&&(a=a.concat(b.getTouchAction()))}),W(a.join(" "))},preventDefaults:function(a){var b=a.srcEvent,c=a.offsetDirection;if(this.manager.session.prevented)return void b.preventDefault();var d=this.actions,e=p(d,jb)&&!mb[jb],f=p(d,lb)&&!mb[lb],g=p(d,kb)&&!mb[kb];if(e){var h=1===a.pointers.length,i=a.distance<2,j=a.deltaTime<250;if(h&&i&&j)return}return g&&f?void 0:e||f&&c&Na||g&&c&Oa?this.preventSrc(b):void 0},preventSrc:function(a){this.manager.session.prevented=!0,a.preventDefault()}};var nb=1,ob=2,pb=4,qb=8,rb=qb,sb=16,tb=32;Y.prototype={defaults:{},set:function(a){return la(this.options,a),this.manager&&this.manager.touchAction.update(),this},recognizeWith:function(a){if(f(a,"recognizeWith",this))return this;var b=this.simultaneous;return a=_(a,this),b[a.id]||(b[a.id]=a,a.recognizeWith(this)),this},dropRecognizeWith:function(a){return f(a,"dropRecognizeWith",this)?this:(a=_(a,this),delete this.simultaneous[a.id],this)},requireFailure:function(a){if(f(a,"requireFailure",this))return this;var b=this.requireFail;return a=_(a,this),-1===r(b,a)&&(b.push(a),a.requireFailure(this)),this},dropRequireFailure:function(a){if(f(a,"dropRequireFailure",this))return this;a=_(a,this);var b=r(this.requireFail,a);return b>-1&&this.requireFail.splice(b,1),this},hasRequireFailures:function(){return this.requireFail.length>0},canRecognizeWith:function(a){return!!this.simultaneous[a.id]},emit:function(a){function b(b){c.manager.emit(b,a)}var c=this,d=this.state;qb>d&&b(c.options.event+Z(d)),b(c.options.event),a.additionalEvent&&b(a.additionalEvent),d>=qb&&b(c.options.event+Z(d))},tryEmit:function(a){return this.canEmit()?this.emit(a):void(this.state=tb)},canEmit:function(){for(var a=0;a<this.requireFail.length;){if(!(this.requireFail[a].state&(tb|nb)))return!1;a++}return!0},recognize:function(a){var b=la({},a);return k(this.options.enable,[this,b])?(this.state&(rb|sb|tb)&&(this.state=nb),this.state=this.process(b),void(this.state&(ob|pb|qb|sb)&&this.tryEmit(b))):(this.reset(),void(this.state=tb))},process:function(a){},getTouchAction:function(){},reset:function(){}},i(aa,Y,{defaults:{pointers:1},attrTest:function(a){var b=this.options.pointers;return 0===b||a.pointers.length===b},process:function(a){var b=this.state,c=a.eventType,d=b&(ob|pb),e=this.attrTest(a);return d&&(c&Ha||!e)?b|sb:d||e?c&Ga?b|qb:b&ob?b|pb:ob:tb}}),i(ba,aa,{defaults:{event:"pan",threshold:10,pointers:1,direction:Pa},getTouchAction:function(){var a=this.options.direction,b=[];return a&Na&&b.push(lb),a&Oa&&b.push(kb),b},directionTest:function(a){var b=this.options,c=!0,d=a.distance,e=a.direction,f=a.deltaX,g=a.deltaY;return e&b.direction||(b.direction&Na?(e=0===f?Ia:0>f?Ja:Ka,c=f!=this.pX,d=Math.abs(a.deltaX)):(e=0===g?Ia:0>g?La:Ma,c=g!=this.pY,d=Math.abs(a.deltaY))),a.direction=e,c&&d>b.threshold&&e&b.direction},attrTest:function(a){return aa.prototype.attrTest.call(this,a)&&(this.state&ob||!(this.state&ob)&&this.directionTest(a))},emit:function(a){this.pX=a.deltaX,this.pY=a.deltaY;var b=$(a.direction);b&&(a.additionalEvent=this.options.event+b),this._super.emit.call(this,a)}}),i(ca,aa,{defaults:{event:"pinch",threshold:0,pointers:2},getTouchAction:function(){return[jb]},attrTest:function(a){return this._super.attrTest.call(this,a)&&(Math.abs(a.scale-1)>this.options.threshold||this.state&ob)},emit:function(a){if(1!==a.scale){var b=a.scale<1?"in":"out";a.additionalEvent=this.options.event+b}this._super.emit.call(this,a)}}),i(da,Y,{defaults:{event:"press",pointers:1,time:251,threshold:9},getTouchAction:function(){return[hb]},process:function(a){var b=this.options,c=a.pointers.length===b.pointers,d=a.distance<b.threshold,f=a.deltaTime>b.time;if(this._input=a,!d||!c||a.eventType&(Ga|Ha)&&!f)this.reset();else if(a.eventType&Ea)this.reset(),this._timer=e(function(){this.state=rb,this.tryEmit()},b.time,this);else if(a.eventType&Ga)return rb;return tb},reset:function(){clearTimeout(this._timer)},emit:function(a){this.state===rb&&(a&&a.eventType&Ga?this.manager.emit(this.options.event+"up",a):(this._input.timeStamp=ra(),this.manager.emit(this.options.event,this._input)))}}),i(ea,aa,{defaults:{event:"rotate",threshold:0,pointers:2},getTouchAction:function(){return[jb]},attrTest:function(a){return this._super.attrTest.call(this,a)&&(Math.abs(a.rotation)>this.options.threshold||this.state&ob)}}),i(fa,aa,{defaults:{event:"swipe",threshold:10,velocity:.3,direction:Na|Oa,pointers:1},getTouchAction:function(){return ba.prototype.getTouchAction.call(this)},attrTest:function(a){var b,c=this.options.direction;return c&(Na|Oa)?b=a.overallVelocity:c&Na?b=a.overallVelocityX:c&Oa&&(b=a.overallVelocityY),this._super.attrTest.call(this,a)&&c&a.offsetDirection&&a.distance>this.options.threshold&&a.maxPointers==this.options.pointers&&qa(b)>this.options.velocity&&a.eventType&Ga},emit:function(a){var b=$(a.offsetDirection);b&&this.manager.emit(this.options.event+b,a),this.manager.emit(this.options.event,a)}}),i(ga,Y,{defaults:{event:"tap",pointers:1,taps:1,interval:300,time:250,threshold:9,posThreshold:10},getTouchAction:function(){return[ib]},process:function(a){var b=this.options,c=a.pointers.length===b.pointers,d=a.distance<b.threshold,f=a.deltaTime<b.time;if(this.reset(),a.eventType&Ea&&0===this.count)return this.failTimeout();if(d&&f&&c){if(a.eventType!=Ga)return this.failTimeout();var g=this.pTime?a.timeStamp-this.pTime<b.interval:!0,h=!this.pCenter||H(this.pCenter,a.center)<b.posThreshold;this.pTime=a.timeStamp,this.pCenter=a.center,h&&g?this.count+=1:this.count=1,this._input=a;var i=this.count%b.taps;if(0===i)return this.hasRequireFailures()?(this._timer=e(function(){this.state=rb,this.tryEmit()},b.interval,this),ob):rb}return tb},failTimeout:function(){return this._timer=e(function(){this.state=tb},this.options.interval,this),tb},reset:function(){clearTimeout(this._timer)},emit:function(){this.state==rb&&(this._input.tapCount=this.count,this.manager.emit(this.options.event,this._input))}}),ha.VERSION="2.0.8",ha.defaults={domEvents:!1,touchAction:gb,enable:!0,inputTarget:null,inputClass:null,preset:[[ea,{enable:!1}],[ca,{enable:!1},["rotate"]],[fa,{direction:Na}],[ba,{direction:Na},["swipe"]],[ga],[ga,{event:"doubletap",taps:2},["tap"]],[da]],cssProps:{userSelect:"none",touchSelect:"none",touchCallout:"none",contentZooming:"none",userDrag:"none",tapHighlightColor:"rgba(0,0,0,0)"}};var ub=1,vb=2;ia.prototype={set:function(a){return la(this.options,a),a.touchAction&&this.touchAction.update(),a.inputTarget&&(this.input.destroy(),this.input.target=a.inputTarget,this.input.init()),this},stop:function(a){this.session.stopped=a?vb:ub},recognize:function(a){var b=this.session;if(!b.stopped){this.touchAction.preventDefaults(a);var c,d=this.recognizers,e=b.curRecognizer;(!e||e&&e.state&rb)&&(e=b.curRecognizer=null);for(var f=0;f<d.length;)c=d[f],b.stopped===vb||e&&c!=e&&!c.canRecognizeWith(e)?c.reset():c.recognize(a),!e&&c.state&(ob|pb|qb)&&(e=b.curRecognizer=c),f++}},get:function(a){if(a instanceof Y)return a;for(var b=this.recognizers,c=0;c<b.length;c++)if(b[c].options.event==a)return b[c];return null},add:function(a){if(f(a,"add",this))return this;var b=this.get(a.options.event);return b&&this.remove(b),this.recognizers.push(a),a.manager=this,this.touchAction.update(),a},remove:function(a){if(f(a,"remove",this))return this;if(a=this.get(a)){var b=this.recognizers,c=r(b,a);-1!==c&&(b.splice(c,1),this.touchAction.update())}return this},on:function(a,b){if(a!==d&&b!==d){var c=this.handlers;return g(q(a),function(a){c[a]=c[a]||[],c[a].push(b)}),this}},off:function(a,b){if(a!==d){var c=this.handlers;return g(q(a),function(a){b?c[a]&&c[a].splice(r(c[a],b),1):delete c[a]}),this}},emit:function(a,b){this.options.domEvents&&ka(a,b);var c=this.handlers[a]&&this.handlers[a].slice();if(c&&c.length){b.type=a,b.preventDefault=function(){b.srcEvent.preventDefault()};for(var d=0;d<c.length;)c[d](b),d++}},destroy:function(){this.element&&ja(this,!1),this.handlers={},this.session={},this.input.destroy(),this.element=null}},la(ha,{INPUT_START:Ea,INPUT_MOVE:Fa,INPUT_END:Ga,INPUT_CANCEL:Ha,STATE_POSSIBLE:nb,STATE_BEGAN:ob,STATE_CHANGED:pb,STATE_ENDED:qb,STATE_RECOGNIZED:rb,STATE_CANCELLED:sb,STATE_FAILED:tb,DIRECTION_NONE:Ia,DIRECTION_LEFT:Ja,DIRECTION_RIGHT:Ka,DIRECTION_UP:La,DIRECTION_DOWN:Ma,DIRECTION_HORIZONTAL:Na,DIRECTION_VERTICAL:Oa,DIRECTION_ALL:Pa,Manager:ia,Input:x,TouchAction:V,TouchInput:P,MouseInput:L,PointerEventInput:M,TouchMouseInput:R,SingleTouchInput:N,Recognizer:Y,AttrRecognizer:aa,Tap:ga,Pan:ba,Swipe:fa,Pinch:ca,Rotate:ea,Press:da,on:m,off:n,each:g,merge:ta,extend:sa,assign:la,inherit:i,bindFn:j,prefixed:u});var wb="undefined"!=typeof a?a:"undefined"!=typeof self?self:{};wb.Hammer=ha,"function"==typeof define&&define.amd?define(function(){return ha}):"undefined"!=typeof module&&module.exports?module.exports=ha:a[c]=ha}(window,document,"Hammer");
-//# sourceMappingURL=hammer.min.js.map
\ No newline at end of file
diff --git a/client/zone/index.html b/client/zone/index.html
index 8b0e773dd8f..b09923b213b 100644
--- a/client/zone/index.html
+++ b/client/zone/index.html
@@ -27,11 +27,11 @@
 
         body {
             display: grid;
-            grid-template-columns: 1fr 1fr;
+            grid-template-columns: 1fr 1fr 1fr 1fr;
             grid-template-rows: 1fr 100px;
             grid-template-areas:
-                "map map"
-                "button1 button2";
+                "map map map map"
+                "button1 button2 button3 button4";
             justify-items: stretch;
             align-items: stretch;
         }
@@ -41,52 +41,16 @@
             touch-action: none;
             background-image: linear-gradient(var(--map-background-1), var(--map-background-2));
         }
-        #console {
-	    display: block;
-	    position: absolute;
-	    right: 0;
-	    top: 0;
-	    width: 300px;
-	    max-width: 90%;
-            background: rgba(255,255,255,0.8);
-            border: 1px solid #000;
-            padding: 10px;
-        }
-        #console .pt_val {
-            width: 100%;
-            position: relative;
-            overflow: hidden;
-            display: block;
-            margin-bottom: 5px;
-        }
-        #console label, #console input {
-            display: inline;
-            margin: 0;
-            padding: 0;
-        }
-        #console label {
-            width: 13%;
-        }
-        #console input {
-           width: 35%;
-        }
     </style>
 </head>
 
 <body>
     <canvas id="experiments"></canvas>
-    <div id="console">
-        <div class="pt_val">
-            <label for="x1">X1: </label><input type="text" name="x1" id="x1" readonly /><label for="y1">Y1: </label><input type="text" name="y1" id="y1" readonly />
-        </div>
-        <div class="pt_val">
-            <label for="x2">X2: </label><input type="text" name="x2" id="x2" readonly /><label for="y2">Y2: </label><input type="text" name="y2" id="y2" readonly />
-        </div>
-    </div>
+    <button id="add_zone">Add zone</button>
     <button id="goto">Goto</button>
-    <button id="zone">Zone</button>
+    <button id="repeat">Repeat: 1</button>
+    <button id="clean">Clean</button>
     <script src="geometry-polyfill.js"></script>
-    <script src="hammer.min.js"></script>
     <script src="main.js" type="module"></script>
 </body>
 
diff --git a/client/zone/js-modules/locations.js b/client/zone/js-modules/locations.js
index b39f1ca7f43..aed439c02c0 100644
--- a/client/zone/js-modules/locations.js
+++ b/client/zone/js-modules/locations.js
@@ -118,7 +118,7 @@ export class Zone {
 
             return {
                 updatedLocation: this,
-                stopPropagation: true
+                stopPropagation: false
             };
         } else {
             this.active = false;
@@ -179,6 +179,8 @@ export class Zone {
                     updatedLocation: this,
                     stopPropagation: true
                 };
+            } else {
+                this.active = false;
             }
         }
 
diff --git a/client/zone/js-modules/map-drawer.js b/client/zone/js-modules/map-drawer.js
index ca675892aa7..6844a36c602 100644
--- a/client/zone/js-modules/map-drawer.js
+++ b/client/zone/js-modules/map-drawer.js
@@ -32,8 +32,8 @@ export function MapDrawer() {
     function draw(mapData) {
         this.boundingBox = getBoundingBox(mapData, mapCanvas.width, mapCanvas.height);
 
-        const freeColor = hexToRgb(getComputedStyle(document.documentElement).getPropertyValue('--map-free'));
-        const occupiedColor = hexToRgb(getComputedStyle(document.documentElement).getPropertyValue('--map-occupied'));
+        const freeColor = hexToRgb(getComputedStyle(document.documentElement).getPropertyValue('--map-free') || '#0076ff');
+        const occupiedColor = hexToRgb(getComputedStyle(document.documentElement).getPropertyValue('--map-occupied') || '#6699ff');
 
         mapCtx.clearRect(0, 0, mapCanvas.width, mapCanvas.height);
         const imgData = mapCtx.createImageData(mapCanvas.width, mapCanvas.height);
diff --git a/client/zone/js-modules/path-drawer.js b/client/zone/js-modules/path-drawer.js
index d8bbc49b49e..f79869da619 100644
--- a/client/zone/js-modules/path-drawer.js
+++ b/client/zone/js-modules/path-drawer.js
@@ -73,7 +73,7 @@ export function PathDrawer() {
      * Externally called function to (re)draw the path to the canvas
      */
     function draw() {
-        const pathColor = getComputedStyle(document.documentElement).getPropertyValue('--path').trim();
+        const pathColor = (getComputedStyle(document.documentElement).getPropertyValue('--path') || '#ffffff').trim();
 
         const ctx = canvas.getContext("2d");
         ctx.clearRect(0, 0, canvas.width, canvas.height);
diff --git a/client/zone/js-modules/touch-handling.js b/client/zone/js-modules/touch-handling.js
new file mode 100644
index 00000000000..b9646c6e786
--- /dev/null
+++ b/client/zone/js-modules/touch-handling.js
@@ -0,0 +1,232 @@
+function distance([x1, y1], [x2, y2]) {
+    return Math.sqrt(
+        Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)
+    );
+}
+
+class NoGesture {
+    constructor() {}
+    updatePointerPosition(evts) {}
+    removePointer(evt) {
+        return this;
+    }
+}
+
+class PossibleTap {
+    constructor(pointerDownEvent, dispatchEvent) {
+        this.tapTolerance = 5;
+        this.pointerId = pointerDownEvent.pointerId;
+        this.pointerDownPosition = [pointerDownEvent.clientX, pointerDownEvent.clientY];
+        this.lastPosition = [pointerDownEvent.clientX, pointerDownEvent.clientY];
+
+        this.dispatchEvent = dispatchEvent;
+    }
+
+    toleranceExeeded() {
+        return distance(this.lastPosition, this.pointerDownPosition) > this.tapTolerance;
+    }
+
+    updatePointerPosition(evts) {
+        this.lastPosition = [evts[0].clientX, evts[0].clientY];
+    }
+
+    removePointer(evt) {
+        if(evt.pointerId === this.pointerId) {
+            const tapEvent = new Event("tap");
+            tapEvent.tappedCoordinates = {x: this.pointerDownPosition[0], y: this.pointerDownPosition[1]};
+            this.dispatchEvent(tapEvent);
+
+            return new NoGesture();
+        } else {
+            return this;
+        }
+    }
+}
+
+class OngoingPan {
+    constructor(pointerId, [pointerDownX, pointerDownY], [currentX, currentY], dispatchEvent) {
+        this.pointerId = pointerId;
+        this.pointerDownPosition = [pointerDownX, pointerDownY];
+        this.lastPosition = [currentX, currentY];
+
+        this.dispatchEvent = dispatchEvent;
+
+        const panStartEvent = new Event("panstart");
+        panStartEvent.coordinates = {x: this.pointerDownPosition[0], y: this.pointerDownPosition[1]};
+        this.dispatchEvent(panStartEvent);
+    }
+
+    updatePointerPosition(evts) {
+        this.lastPosition = [evts[0].clientX, evts[0].clientY];
+
+        const panMoveEvent = new Event("panmove");
+        panMoveEvent.startCoordinates = {x: this.pointerDownPosition[0], y: this.pointerDownPosition[1]};
+        panMoveEvent.currentCoordinates = {x: evts[0].clientX, y: evts[0].clientY};
+        this.dispatchEvent(panMoveEvent);
+    }
+
+    removePointer(evt) {
+        if(evt.pointerId === this.pointerId) {
+            const panEndEvent = new Event("panend");
+            panEndEvent.startCoordinates = {x: this.pointerDownPosition[0], y: this.pointerDownPosition[1]};
+            panEndEvent.currentCoordinates = {x: evt.clientX, y: evt.clientY};
+            this.dispatchEvent(panEndEvent);
+
+            return new NoGesture();
+        } else {
+            return this;
+        }
+    }
+}
+
+class OngoingPinch {
+    constructor(pointerId, [pointerDownX, pointerDownY], secondPointerDownEvent, dispatchEvent) {
+        this.tapTolerance = 5;
+        this.pointerId = pointerId;
+        this.pointerDownPosition = [pointerDownX, pointerDownY];
+        this.lastPosition = [pointerDownX, pointerDownY];
+        this.pointer2Id = secondPointerDownEvent.pointerId;
+        this.pointer2DownPosition = [secondPointerDownEvent.clientX, secondPointerDownEvent.clientY];
+        this.lastPosition2 = [secondPointerDownEvent.clientX, secondPointerDownEvent.clientY];
+
+        this.dispatchEvent = dispatchEvent;
+
+        const pinchStartEvent = new Event("pinchstart");
+        pinchStartEvent.distance = distance(this.pointerDownPosition, this.pointer2DownPosition);
+        pinchStartEvent.scale = 1;
+        pinchStartEvent.center = {
+            x: (this.pointerDownPosition[0] + this.pointer2DownPosition[0]) / 2,
+            y: (this.pointerDownPosition[1] + this.pointer2DownPosition[1]) / 2
+        }
+        this.dispatchEvent(pinchStartEvent);
+    }
+
+    updatePointerPosition(evts) {
+        for(let evt of evts) {
+            if(evt.pointerId === this.pointerId) {
+                this.lastPosition = [evt.clientX, evt.clientY];
+            } else if (evt.pointerId === this.pointer2Id) {
+                this.lastPosition2 = [evt.clientX, evt.clientY];
+            }
+        }
+
+        const pinchMoveEvent = new Event("pinchmove");
+        pinchMoveEvent.distance = distance(this.lastPosition, this.lastPosition2);
+        pinchMoveEvent.scale = pinchMoveEvent.distance / distance(this.pointerDownPosition, this.pointer2DownPosition);
+        pinchMoveEvent.center = {
+            x: (this.lastPosition[0] + this.lastPosition2[0]) / 2,
+            y: (this.lastPosition[1] + this.lastPosition2[1]) / 2
+        }
+
+        this.dispatchEvent(pinchMoveEvent);
+    }
+
+    removePointer(evt) {
+        if(evt.pointerId === this.pointerId) {
+            this.dispatchEvent(new Event("pinchend"));
+            return new OngoingPan(
+                this.pointer2Id,
+                this.lastPosition2,
+                this.lastPosition2,
+                this.dispatchEvent
+            );
+        } else if (evt.pointerId === this.pointer2Id) {
+            this.dispatchEvent(new Event("pinchend"));
+            return new OngoingPan(
+                this.pointerId,
+                this.lastPosition,
+                this.lastPosition,
+                this.dispatchEvent
+            );
+        } else {
+            return this;
+        }
+    }
+}
+
+export class TouchHandler {
+    /**
+     * @param {HTMLElement} trackedElement
+     */
+    constructor(trackedElement) {
+        this.trackedElement = trackedElement;
+        this.trackedElement.addEventListener("mousedown", e => this.pointerDown(e, this.touchChangesFromMouseEvent(e)));
+        this.trackedElement.addEventListener("mousemove", e => this.pointerMove(e, this.touchChangesFromMouseEvent(e)));
+        this.trackedElement.addEventListener("mouseup", e => this.pointerUp(e, this.touchChangesFromMouseEvent(e)));
+        this.trackedElement.addEventListener("mouseleave", e => this.pointerUp(e, this.touchChangesFromMouseEvent(e)));
+        this.trackedElement.addEventListener("mouseout", e => this.pointerUp(e, this.touchChangesFromMouseEvent(e)));
+
+        this.trackedElement.addEventListener("touchstart", e => this.pointerDown(e, this.touchChangesFromTouchEvent(e)));
+        this.trackedElement.addEventListener("touchmove", e => this.pointerMove(e, this.touchChangesFromTouchEvent(e)));
+        this.trackedElement.addEventListener("touchcancel", e => this.pointerUp(e, this.touchChangesFromTouchEvent(e)));
+        this.trackedElement.addEventListener("touchend", e => this.pointerUp(e, this.touchChangesFromTouchEvent(e)));
+
+        this.ongoingGesture = new NoGesture();
+    }
+
+
+    touchChangesFromMouseEvent(evt) {
+        return [{
+            clientX: evt.clientX,
+            clientY: evt.clientY,
+            pointerId: 0
+        }];
+    }
+
+    touchChangesFromTouchEvent(evt) {
+        const changedTouches = []
+
+        for(let touch of evt.changedTouches) {
+            changedTouches.push({
+                clientX: touch.clientX,
+                clientY: touch.clientY,
+                pointerId: touch.identifier
+            });
+        }
+
+        return changedTouches;
+    }
+
+    pointerDown(evt, changedTouches) {
+        evt.stopPropagation();
+        evt.preventDefault();
+
+        if(this.ongoingGesture instanceof NoGesture) {
+            this.ongoingGesture = new PossibleTap(changedTouches[0], this.trackedElement.dispatchEvent.bind(this.trackedElement));
+
+        } else if(this.ongoingGesture instanceof PossibleTap || this.ongoingGesture instanceof OngoingPan) {
+            this.ongoingGesture = new OngoingPinch(
+                this.ongoingGesture.pointerId,
+                // start the pinch with the first pointer at the current position
+                // (when the second pointer was added)
+                this.ongoingGesture.lastPosition,
+                changedTouches[0],
+                this.trackedElement.dispatchEvent.bind(this.trackedElement)
+            );
+        }
+    }
+
+    pointerMove(evt, changedTouches) {
+        evt.stopPropagation();
+        evt.preventDefault();
+
+        this.ongoingGesture.updatePointerPosition(changedTouches);
+
+        // Upgrade Tap to a Pan if the movement tolerance is exeeded
+        if(this.ongoingGesture instanceof PossibleTap && this.ongoingGesture.toleranceExeeded()) {
+            this.ongoingGesture = new OngoingPan(
+                this.ongoingGesture.pointerId,
+                this.ongoingGesture.pointerDownPosition,
+                this.ongoingGesture.lastPosition,
+                this.trackedElement.dispatchEvent.bind(this.trackedElement)
+            )
+        }
+    }
+
+    pointerUp(evt, changedTouches) {
+        evt.stopPropagation();
+        evt.preventDefault();
+
+        this.ongoingGesture = this.ongoingGesture.removePointer(changedTouches[0]);
+    }
+}
\ No newline at end of file
diff --git a/client/zone/js-modules/vacuum-map.js b/client/zone/js-modules/vacuum-map.js
index 6e9b972741c..67e7e99ed27 100644
--- a/client/zone/js-modules/vacuum-map.js
+++ b/client/zone/js-modules/vacuum-map.js
@@ -3,6 +3,7 @@ import { PathDrawer } from "./path-drawer.js";
 import { trackTransforms } from "./tracked-canvas.js";
 import { transformFromMeter, flipX, noTransform } from "./coordinate-transforms.js";
 import { GotoPoint, Zone } from "./locations.js";
+import { TouchHandler } from "./touch-handling.js";
 
 /**
  * Represents the map and handles all the userinteractions
@@ -19,7 +20,7 @@ export function VacuumMap(canvasElement) {
     canvas.width = canvas.clientWidth;
     canvas.height = canvas.clientHeight;
 
-    let location = null;
+    let locations = [];
 
     let redrawCanvas = null;
 
@@ -55,77 +56,6 @@ export function VacuumMap(canvasElement) {
         return { 'x': x1Real, 'y': y1Real };
     }
 
-    /**
-     * Displays the coordinates of the given location
-     * @param {Zone|GotoPoint} location
-     */
-    function displayLocationCoordinates(location) {
-        if(location instanceof Zone) {
-            const p1 = convertToRealCoords(new DOMPoint(location.x1, location.y1));
-            const p2 = convertToRealCoords(new DOMPoint(location.x2, location.y2));
-
-            document.getElementById("x1").value = p1.x;
-            document.getElementById("y1").value = p1.y;
-            document.getElementById("x2").value = p2.x;
-            document.getElementById("y2").value = p2.y;
-        } else if(location instanceof GotoPoint) {
-            const p = convertToRealCoords(new DOMPoint(location.x, location.y));
-
-            document.getElementById("x1").value = p.x;
-            document.getElementById("y1").value = p.y;
-            document.getElementById("x2").value = '';
-            document.getElementById("y2").value = '';
-        }
-    }
-
-    /**
-     * Calls the goto api route with the currently set goto coordinates
-     */
-    function goto_point() {
-        if (location instanceof GotoPoint) {
-            const gotoPoint = convertToRealCoords(location);
-            fetch("../api/go_to", {
-                method: "put",
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(gotoPoint)
-            })
-                .then(res => res.text())
-                .then(console.log);
-        } else {
-            alert("Please select a single point");
-        }
-    }
-
-    /**
-     * Calls the zoned_cleanup api route with the currently set zone
-     */
-    function zoned_cleanup() {
-        if (location instanceof Zone) {
-            const p1Real = convertToRealCoords({x: location.x1, y: location.y1});
-            const p2Real = convertToRealCoords({x: location.x2, y: location.y2});
-
-            fetch("../api/start_cleaning_zone", {
-                method: "put",
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify([[
-                    Math.min(p1Real.x, p2Real.x),
-                    Math.min(p1Real.y, p2Real.y),
-                    Math.max(p1Real.x, p2Real.x),
-                    Math.max(p1Real.y, p2Real.y),
-                    1
-                ]])
-            })
-                .then(res => res.text())
-                .then(console.log);
-        } else {
-            alert("Please select a zone (two taps)");
-        }
-    }
-
     /**
      * Sets up the canvas for tracking taps / pans / zooms and redrawing the map accordingly
      * @param {object} mapData - the json data returned by the "/api/map/latest" route
@@ -189,106 +119,130 @@ export function VacuumMap(canvasElement) {
             ctx.drawImage(pathDrawer.canvas, 0, 0);
             ctx.scale(pathScale, pathScale);
 
-            if(location) {
-                usingOwnTransform(ctx, (ctx, transform) => {
+
+            usingOwnTransform(ctx, (ctx, transform) => {
+                locations.forEach(location => {
                     location.draw(ctx, transform);
                 });
-            }
+            });
         }
         redraw();
         redrawCanvas = redraw;
 
-        const gestureController = new Hammer(canvas);
-        gestureController.get('pan').set({ direction: Hammer.DIRECTION_ALL });
-        gestureController.get('pinch').set({ enable: true });
-
         let lastX = canvas.width / 2, lastY = canvas.height / 2;
 
         let dragStart;
 
         function startTranslate(evt) {
-            const { x, y } = relativeCoordinates(evt.center, canvas);
-            // subtracting the delta leads to the original point where the pan started
-            lastX = x - evt.deltaX;
-            lastY = y - evt.deltaY;
+            const { x, y } = relativeCoordinates(evt.coordinates, canvas);
+            lastX = x
+            lastY = y;
             dragStart = ctx.transformedPoint(lastX, lastY);
         }
 
         function moveTranslate(evt) {
-            const { x, y } = relativeCoordinates(evt.center, canvas);
+            const { x, y } = relativeCoordinates(evt.currentCoordinates, canvas);
             const oldX = lastX;
             const oldY = lastY;
             lastX = x;
             lastY = y;
 
             if (dragStart) {
-                if(location && typeof location.translate === "function") {
-                    const result = location.translate(dragStart.matrixTransform(ctx.getTransform().inverse()), {x: oldX, y: oldY}, {x, y}, ctx.getTransform());
-                    location = result.updatedLocation;
-                    if(result.stopPropagation === true) {
-                        redraw();
-                        return;
+                // Let each location handle the panning event
+                // the location can return a stopPropagation bool which
+                // stops the event handling by other locations / the main canvas
+                for(let i = 0; i < locations.length; ++i) {
+                    const location = locations[i];
+                    if(typeof location.translate === "function") {
+                        const result = location.translate(
+                            dragStart.matrixTransform(ctx.getTransform().inverse()),
+                            {x: oldX, y: oldY},
+                            {x, y},
+                            ctx.getTransform()
+                        );
+                        if(result.updatedLocation) {
+                            locations[i] = result.updatedLocation;
+                        } else {
+                            locations.splice(i, 1);
+                            i--;
+                        }
+                        if(result.stopPropagation === true) {
+                            redraw();
+                            return;
+                        }
                     }
                 }
+                // locations could be removed
+                // not quite nice to handle with the for loop
+                locations = locations.filter(location => location !== null);
 
+                // If no location stopped event handling -> pan the whole map
                 const pt = ctx.transformedPoint(lastX, lastY);
                 ctx.translate(pt.x - dragStart.x, pt.y - dragStart.y);
                 redraw();
             }
         }
 
-        function cancelTranslate(evt) {
-            dragStart = null;
-            displayLocationCoordinates(location);
-        }
-
         function endTranslate(evt) {
             dragStart = null;
-            displayLocationCoordinates(location);
             redraw();
         }
 
         function tap(evt) {
-            const { x, y } = relativeCoordinates(evt.center, canvas);
+            const { x, y } = relativeCoordinates(evt.tappedCoordinates, canvas);
             const tappedX = x;
             const tappedY = y;
             const tappedPoint = ctx.transformedPoint(tappedX, tappedY);
 
-            if(location && typeof location.tap === "function") {
-                const result = location.tap({x: tappedX, y: tappedY}, ctx.getTransform());
-                location = result.updatedLocation;
-                if(result.stopPropagation === true) {
-                    redraw();
-                    return;
+            // Let each location handle the tapping event
+            // the location can return a stopPropagation bool which
+            // stops the event handling by other locations / the main canvas
+            for(let i = 0; i < locations.length; ++i) {
+                const location = locations[i];
+                if(typeof location.translate === "function") {
+                    const result = location.tap({x: tappedX, y: tappedY}, ctx.getTransform());
+                    if(result.updatedLocation) {
+                        locations[i] = result.updatedLocation;
+                    } else {
+                        locations.splice(i, 1);
+                        i--;
+                    }
+                    if(result.stopPropagation === true) {
+                        redraw();
+                        return;
+                    }
                 }
             }
 
-            if(location == null) {
-                location = new GotoPoint(tappedPoint.x, tappedPoint.y);
-            } else if(location instanceof GotoPoint) {
-                location = location.toZone(tappedPoint.x, tappedPoint.y);
+            if(locations.length === 0) {
+                locations.push(new GotoPoint(tappedPoint.x, tappedPoint.y));
+            } else if(locations.length === 1 && locations[0] instanceof GotoPoint) {
+                locations[0] = new GotoPoint(tappedPoint.x, tappedPoint.y);
             }
 
-            displayLocationCoordinates(location);
             redraw();
         }
 
-        gestureController.on('tap', tap);
+        const touchHandler = new TouchHandler(canvas);
 
-        gestureController.on('panstart', startTranslate);
-        gestureController.on('panleft panright panup pandown', moveTranslate);
-        gestureController.on('panend', endTranslate);
-        gestureController.on('pancancel', cancelTranslate);
+        canvas.addEventListener("tap", tap);
+        canvas.addEventListener('panstart', startTranslate);
+        canvas.addEventListener('panmove', moveTranslate);
+        canvas.addEventListener('panend', endTranslate);
+        canvas.addEventListener('pinchstart', startPinch);
+        canvas.addEventListener('pinchmove', scalePinch);
+        canvas.addEventListener('pinchend', endPinch);
 
 
         let lastScaleFactor = 1;
         function startPinch(evt) {
-            startTranslate(evt);
             lastScaleFactor = 1;
-        }
 
-        function movePinch(evt) {
-            moveTranslate(evt);
+            // translate
+            const { x, y } = relativeCoordinates(evt.center, canvas);
+            lastX = x
+            lastY = y;
+            dragStart = ctx.transformedPoint(lastX, lastY);
         }
 
         function endPinch(evt) {
@@ -297,12 +251,6 @@ export function VacuumMap(canvasElement) {
             endTranslate(evt);
         }
 
-        function cancelPinch(evt) {
-            const [scaleX, scaleY] = ctx.getScaleFactor2d();
-            pathDrawer.scale(scaleX);
-            cancelTranslate(evt);
-        }
-
         function scalePinch(evt) {
             const factor = evt.scale / lastScaleFactor;
             lastScaleFactor = evt.scale;
@@ -310,18 +258,16 @@ export function VacuumMap(canvasElement) {
             ctx.translate(pt.x, pt.y);
             ctx.scale(factor, factor);
             ctx.translate(-pt.x, -pt.y);
-            redraw();
-        }
-
-
-        gestureController.on('pinchstart', startPinch);
-        gestureController.on('pinchmove', movePinch);
-        gestureController.on('pinchend', endPinch);
-        gestureController.on('pinchcancel', cancelPinch);
 
+            // translate
+            const { x, y } = relativeCoordinates(evt.center, canvas);
+            lastX = x;
+            lastY = y;
+            const p = ctx.transformedPoint(lastX, lastY);
+            ctx.translate(p.x - dragStart.x, p.y - dragStart.y);
 
-        gestureController.on('pinchin', scalePinch);
-        gestureController.on('pinchout', scalePinch);
+            redraw();
+        }
 
         const scaleFactor = 1.1;
         /**
@@ -349,11 +295,53 @@ export function VacuumMap(canvasElement) {
         canvas.addEventListener('mousewheel', handleScroll, false);
     };
 
+    const prepareGotoCoordinatesForApi = (gotoPoint) => {
+        const point = convertToRealCoords(gotoPoint);
+        return {
+            x: point.x,
+            y: point.y
+        };
+    };
+
+    const prepareZoneCoordinatesForApi = (zone) => {
+        const p1Real = convertToRealCoords({x: zone.x1, y: zone.y1});
+        const p2Real = convertToRealCoords({x: zone.x2, y: zone.y2});
+
+        return [
+            Math.min(p1Real.x, p2Real.x),
+            Math.min(p1Real.y, p2Real.y),
+            Math.max(p1Real.x, p2Real.x),
+            Math.max(p1Real.y, p2Real.y)
+        ];
+    };
+
+    function getLocations() {
+        const zones = locations
+            .filter(location => location instanceof Zone)
+            .map(prepareZoneCoordinatesForApi);
+
+        const gotoPoints = locations
+            .filter(location => location instanceof GotoPoint)
+            .map(prepareGotoCoordinatesForApi);
+
+        return {
+            zones,
+            gotoPoints
+        };
+    }
+
+    function addZone() {
+        const newZone = new Zone(480, 480, 550, 550);
+        locations.forEach(location => location.active = false)
+        locations.push(newZone);
+        if (redrawCanvas) redrawCanvas();
+    }
+
     return {
         initCanvas: initCanvas,
         updateMap: updateMap,
-        goto_point: goto_point,
-        zoned_cleanup: zoned_cleanup
+        getLocations: getLocations,
+        addZone: addZone
     };
 }
 
@@ -370,4 +358,4 @@ function relativeCoordinates({ x, y }, referenceElement) {
         x: x - rect.left,
         y: y - rect.top
     };
-}
\ No newline at end of file
+}
diff --git a/client/zone/main.js b/client/zone/main.js
index 66b81d9e9d1..a8b62a7ac19 100644
--- a/client/zone/main.js
+++ b/client/zone/main.js
@@ -1,8 +1,58 @@
 import { VacuumMap } from "./js-modules/vacuum-map.js"
 const map = new VacuumMap(document.getElementById('experiments'));
 
-document.getElementById("goto").onclick = () => map.goto_point();
-document.getElementById("zone").onclick = () => map.zoned_cleanup();
+/**
+ * Calls the goto api route with the currently set goto coordinates
+ */
+function goto_point(point) {
+    fetch("../api/go_to", {
+        method: "put",
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(point)
+    })
+    .then(res => res.text())
+    .then(console.log);
+}
+
+/**
+ * Calls the zoned_cleanup api route with the currently set zone
+ */
+function zoned_cleanup(zones) {
+    fetch("../api/start_cleaning_zone", {
+        method: "put",
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(zones)
+    })
+    .then(res => res.text())
+    .then(console.log);
+}
+
+document.getElementById("add_zone").onclick = () => {
+    map.addZone();
+}
+document.getElementById("goto").onclick = () => {
+    const gotoPoint = map.getLocations().gotoPoints[0];
+    if(gotoPoint) goto_point(gotoPoint);
+}
+document.getElementById("clean").onclick = () => {
+    const text = document.getElementById("repeat").innerText;
+    const match = /Repeat: (\d+)/g.exec(text);
+    const repeatNumber = parseInt(match[1]);
+
+    const zones = map.getLocations().zones.map(zoneCoordinates => [...zoneCoordinates, repeatNumber]);
+    zoned_cleanup(zones);
+}
+
+document.getElementById("repeat").onclick = () => {
+    const text = document.getElementById("repeat").innerText;
+    const match = /Repeat: (\d+)/g.exec(text);
+    const repeatNumber = parseInt(match[1]);
+    document.getElementById("repeat").innerText = `Repeat: ${repeatNumber % 3 + 1}`;
+}
 
 function fetchmap() {
     fetch("../api/map/latest?doNotTransformPath")