Add touch-only pitch adjustment

www/js/map.js

@@ -13,14 +13,49 @@ const map = new mapboxgl.Map({
     container: 'mapbox',
     style: SETTINGS['map_style_json'],
     attributionControl: false,
-    touchZoomRotate: 'center',
+    dragPan: false,
     pitch: 0,
     zoom: 0,
     maxZoom: 20
 });
 
-map.touchZoomRotate.enable({around: 'center'});
-map.dragPan.disable();
+var dpPoint = null;
+var dpPitch = null;
+
+map.on('touchstart', function (data) {
+    if (data.points.length == 2) {
+        var diff = Math.abs(data.points[0].y - data.points[1].y);
+        if (diff <= 50) {
+            dpPoint = data.point;
+            map.touchZoomRotate.disable();
+            dpPitch = map.getPitch();
+        }
+    }
+});
+
+map.on('touchmove', function (data) {
+    if (dpPoint) {
+        data.preventDefault();
+        var pitchdiff = (dpPoint.y - data.point.y) * 0.5;
+        map.setPitch(dpPitch + pitchdiff);
+    }
+});
+
+map.on('touchend', function (data) {
+    if (dpPoint) {
+        map.touchZoomRotate.enable();
+    }
+    dpPoint = null;
+    dpPitch = null;
+});
+
+map.on('touchcancel', function (data) {
+    if (dpPoint) {
+        map.touchZoomRotate.enable();
+    }
+    dpPoint = null;
+    dpPitch = null;
+});
 
 function mapEasing(t) {
     return t * (2 - t);
@@ -98,7 +133,7 @@ function updatePlaceLayer(latitude, longitude) {
 
 function animateMapIn(latitude, longitude, zoom, heading) {
     if (typeof zoom == 'undefined') {
-        zoom = 15;
+        zoom = 17;
     }
     if (typeof heading == 'undefined') {
         heading = 0;
@@ -115,7 +150,7 @@ function animateMapIn(latitude, longitude, zoom, heading) {
     });
     // Set min zoom after some time to fly in
     setTimeout(function () {
-        map.setMinZoom(15);
+        map.setMinZoom(16);
         map.setPitch(45);
     }, 1000);
 }