Allow zooming map in/out by clicking.

By simply clicking on screen instead of going to menu to zoom in/out,
navigation can be much quicker.

apps/openstmap/ChangeLog

@@ -16,7 +16,7 @@
       Support for zooming in on map
       Satellite count moved to widget bar to leave more room for the map
 0.15: Make track drawing an option (default off)
-0.16: Draw waypoints, too.
+0.16: Draw waypoints, too
 0.17: With new Recorder app allow track to be drawn in the background
       Switch tile layer URL for faster/more reliable map tiles
 0.18: Prefer map with highest resolution
@@ -28,3 +28,4 @@
       Enable/Disable previous position marker in new setting "Draw cont. position"
 0.22: Replace position marker with direction arrow
 0.23: Bugfix: Enable Compass if needed
+0.24: Allow zooming by clicking the screen

apps/openstmap/README.md

@@ -29,6 +29,7 @@ and marks the path that you've been travelling (if enabled), and
 displays waypoints in the watch (if dependencies exist).
 
 * Drag on the screen to move the map
+* Click bottom left to zoom in, bottom right to zoom out
 * Press the button to bring up a menu, where you can zoom, go to GPS location,
 put the map back in its default location, or choose whether to draw the currently
 recording GPS track (from the `Recorder` app).

apps/openstmap/app.js

@@ -7,6 +7,8 @@ var hasScrolled = false;
 var settings = require("Storage").readJSON("openstmap.json",1)||{};
 var plotTrack;
 let checkMapPos = false; // Do we need to check the if the coordinates we have are valid
+var startDrag = 0;
+
 if (Bangle.setLCDOverlay) {
   // Icon for current location+direction: https://icons8.com/icon/11932/gps 24x24, 1 Bit + transparency + inverted
   var imgLoc = require("heatshrink").decompress(atob("jEYwINLAQk8AQl+AQn/AQcB/+AAQUD//AAQUH//gAQUP//wAQUf//4j8AvA9IA=="));
@@ -235,6 +237,8 @@ function showMap() {
   Bangle.setUI({mode:"custom",drag:e=>{
     if (plotTrack && plotTrack.stop) plotTrack.stop();
     if (e.b) {
+      if (!startDrag)
+        startDrag = getTime();
       g.setClipRect(R.x,R.y,R.x2,R.y2);
       g.scroll(e.dx,e.dy);
       m.scroll(e.dx,e.dy);
@@ -242,7 +246,19 @@ function showMap() {
       hasScrolled = true;
       drawLocation();
     } else if (hasScrolled) {
+      delta = getTime() - startDrag;
+      startDrag = 0;
       hasScrolled = false;
+      if (delta < 0.2) {
+        if (e.y > g.getHeight() / 2) {
+          if (e.x < g.getWidth() / 2) {
+            m.scale /= 2;
+          } else {
+            m.scale *= 2;
+          }
+        }
+        g.reset().clearRect(R);
+      }
       redraw();
     }
   }, btn: () => showMenu() });

apps/openstmap/metadata.json

@@ -2,7 +2,7 @@
   "id": "openstmap",
   "name": "OpenStreetMap",
   "shortName": "OpenStMap",
-  "version": "0.23",
+  "version": "0.24",
   "description": "Loads map tiles from OpenStreetMap onto your Bangle.js and displays a map of where you are. Once installed this also adds map functionality to `GPS Recorder` and `Recorder` apps",
   "readme": "README.md",
   "icon": "app.png",