mapbox · mourner · Jun 12, 2015 · Sep 18, 2014 · Sep 18, 2014 · Jun 11, 2015
diff --git a/debug/index.html b/debug/index.html
@@ -3,7 +3,7 @@
 <head>
     <title>Mapbox GL JS debug page</title>
     <meta charset='utf-8'>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 
     <link rel='stylesheet' href='../dist/mapbox-gl.css' />
     <style>

diff --git a/dist/mapbox-gl.css b/dist/mapbox-gl.css
@@ -11,6 +11,7 @@
     font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
     overflow: hidden;
     position: relative;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 
 .mapboxgl-canvas-container.mapboxgl-interactive,

diff --git a/js/geo/transform.js b/js/geo/transform.js
@@ -160,15 +160,17 @@ Transform.prototype = {
     },
 
     setZoomAround: function(zoom, center) {
-        var p = this.locationPoint(center);
+        var p;
+        if (center) p = this.locationPoint(center);
         this.zoom = zoom;
-        this.setLocationAtPoint(center, p);
+        if (center) this.setLocationAtPoint(center, p);
     },
 
     setBearingAround: function(bearing, center) {
-        var p = this.locationPoint(center);
+        var p;
+        if (center) p = this.locationPoint(center);
         this.bearing = bearing;
-        this.setLocationAtPoint(center, p);
+        if (center) this.setLocationAtPoint(center, p);
     },
 
     /**

diff --git a/js/render/gl_util.js b/js/render/gl_util.js
@@ -18,7 +18,14 @@ exports.extend = function(context) {
         }
 
         var shader = this.createShader(type);
-        this.shaderSource(shader, shaders[name][kind]);
+        var shaderSource = shaders[name][kind];
+
+        if (typeof orientation === 'undefined') {
+            // only use highp precision on mobile browsers
+            shaderSource = shaderSource.replace(/ highp /g, ' ');
+        }
+
+        this.shaderSource(shader, shaderSource);
         this.compileShader(shader);
         if (!this.getShaderParameter(shader, this.COMPILE_STATUS)) {
             throw new Error(this.getShaderInfoLog(shader));

diff --git a/js/ui/camera.js b/js/ui/camera.js
@@ -424,35 +424,37 @@ util.extend(Camera.prototype, /** @lends Map.prototype */{
             from = tr.point,
             startZoom = this.getZoom(),
             startBearing = this.getBearing(),
-            startPitch = this.getPitch();
+            startPitch = this.getPitch(),
 
-        var zoom = 'zoom' in options ? +options.zoom : startZoom;
-        var bearing = 'bearing' in options ? this._normalizeBearing(options.bearing, startBearing) : startBearing;
-        var pitch = 'pitch' in options ? +options.pitch : startPitch;
+            zoom = 'zoom' in options ? +options.zoom : startZoom,
+            bearing = 'bearing' in options ? this._normalizeBearing(options.bearing, startBearing) : startBearing,
+            pitch = 'pitch' in options ? +options.pitch : startPitch,
 
-        var scale = tr.zoomScale(zoom - startZoom),
+            scale = tr.zoomScale(zoom - startZoom),
             to = 'center' in options ? tr.project(LatLng.convert(options.center)).sub(offset.div(scale)) : from,
-            around;
+            around = LatLng.convert(options.around);
 
         if (zoom !== startZoom) {
-            around = tr.pointLocation(tr.centerPoint.add(to.sub(from).div(1 - 1 / scale)));
             this.zooming = true;
         }
-
         if (startBearing !== bearing) {
             this.rotating = true;
         }
 
+        if (this.zooming && !around) {
+            around = tr.pointLocation(tr.centerPoint.add(to.sub(from).div(1 - 1 / scale)));
+        }
+
         this.fire('movestart');
 
         this._ease(function (k) {
-            if (zoom !== startZoom) {
+            if (this.zooming) {
                 tr.setZoomAround(interpolate(startZoom, zoom, k), around);
             } else {
                 tr.center = tr.unproject(from.add(to.sub(from).mult(k)));
             }
 
-            if (bearing !== startBearing) {
+            if (this.rotating) {
                 tr.bearing = interpolate(startBearing, bearing, k);
             }
 

diff --git a/js/ui/handlers.js b/js/ui/handlers.js
@@ -10,11 +10,8 @@ module.exports = Handlers;
 
 function Handlers(map) {
 
-    var rotateEnd;
-
-    var box;
-
-    var inertiaLinearity = 0.2,
+    var rotateEnd, startScale, startBearing, box,
+        inertiaLinearity = 0.2,
         inertiaEasing = util.bezier(0, 0, inertiaLinearity, 1);
 
     function boxzoomFinish() {
@@ -139,13 +136,26 @@ function Handlers(map) {
             if (e.delta < 0 && scale !== 0) scale = 1 / scale;
 
             var fromScale = map.ease && isFinite(e.delta) ? map.ease.to : map.transform.scale,
-                duration = !isFinite(e.delta) ? 800 : 0;
+                duration = !isFinite(e.delta) ? 800 : 0,
+                targetZoom = map.transform.scaleZoom(fromScale * scale);
 
-            map.zoomTo(map.transform.scaleZoom(fromScale * scale), {
+            map.zoomTo(targetZoom, {
                 duration: duration,
                 around: map.unproject(e.point)
             });
         })
+        .on('pinchstart', function() {
+            startScale = map.transform.scale;
+            startBearing = map.transform.bearing;
+        })
+        .on('pinch', function(e) {
+            map.easeTo({
+                zoom: map.transform.scaleZoom(startScale * e.scale),
+                bearing: startBearing + e.bearing,
+                duration: 0,
+                around: map.unproject(e.point)
+            });
+        })
         .on('rotate', function(e) {
             var center = map.transform.centerPoint, // Center of rotation
                 startToCenter = e.start.sub(center),

diff --git a/js/ui/interaction.js b/js/ui/interaction.js
@@ -58,6 +58,7 @@ function Interaction(el) {
 
     function mousePos(e) {
         var rect = el.getBoundingClientRect();
+        e = e.touches ? e.touches[0] : e;
         return new Point(
             e.clientX - rect.left - el.clientLeft,
             e.clientY - rect.top - el.clientTop);
@@ -68,9 +69,16 @@ function Interaction(el) {
         firstPos = pos = mousePos(ev);
         ev.preventDefault();
     }, false);
+
     el.addEventListener('mousedown', onmousedown, false);
+    el.addEventListener('touchstart', ontouchstart, false);
+
     document.addEventListener('mouseup', onmouseup, false);
+    document.addEventListener('touchend', onmouseup, false);
+
     document.addEventListener('mousemove', onmousemove, false);
+    document.addEventListener('touchmove', ontouchmove, false);
+
     el.addEventListener('click', onclick, false);
     scrollwheel(zoom);
     el.addEventListener('dblclick', ondoubleclick, false);
@@ -91,6 +99,16 @@ function Interaction(el) {
         interaction.fire('click', {point: point, originalEvent: ev});
     }
 
+    function pinch(scale, bearing, point) {
+        interaction.fire('pinch', {
+            scale: scale,
+            bearing: bearing,
+            point: point
+        });
+        inertia = null;
+        now = null;
+    }
+
     function mousemove(point, ev) {
         interaction.fire('mousemove', {point: point, originalEvent: ev});
     }
@@ -218,6 +236,44 @@ function Interaction(el) {
         ev.preventDefault();
     }
 
+    var startVec;
+    var tapped;
+
+    function ontouchstart(e) {
+        if (e.touches.length === 1) {
+            onmousedown(e);
+
+            if (!tapped) {
+                tapped = setTimeout(function() {
+                    tapped = null;
+                }, 300);
+            } else {
+                clearTimeout(tapped);
+                tapped = null;
+                ondoubleclick(e);
+            }
+
+        } else if (e.touches.length === 2) {
+            startVec = mousePos(e.touches[0]).sub(mousePos(e.touches[1]));
+            interaction.fire('pinchstart');
+        }
+    }
+
+    function ontouchmove(e) {
+        if (e.touches.length === 1) {
+            onmousemove(e);
+        } else if (e.touches.length === 2) {
+            var p1 = mousePos(e.touches[0]),
+                p2 = mousePos(e.touches[1]),
+                p = p1.add(p2).div(2),
+                vec = p1.sub(p2),
+                scale = vec.mag() / startVec.mag(),
+                bearing = vec.angleWith(startVec) * 180 / Math.PI;
+            pinch(scale, bearing, p);
+        }
+        e.preventDefault();
+    }
+
     function scrollwheel(callback) {
         var firefox = /Firefox/i.test(navigator.userAgent);
         var safari = /Safari/i.test(navigator.userAgent) && !/Chrom(ium|e)/i.test(navigator.userAgent);

diff --git a/shaders/icon.vertex.glsl b/shaders/icon.vertex.glsl
@@ -6,7 +6,7 @@ attribute float a_opacity;
 
 // matrix is for the vertex position, exmatrix is for rotating and projecting
 // the extrusion vector.
-uniform mat4 u_matrix;
+uniform highp mat4 u_matrix;
 uniform mat4 u_exmatrix;
 uniform float u_zoom;
 uniform float u_fadedist;

diff --git a/shaders/line.vertex.glsl b/shaders/line.vertex.glsl
@@ -14,7 +14,7 @@ attribute float a_blur;
 
 // matrix is for the vertex position, exmatrix is for rotating and projecting
 // the extrusion vector.
-uniform mat4 u_matrix;
+uniform highp mat4 u_matrix;
 
 // shared
 uniform float u_ratio;

diff --git a/shaders/linepattern.vertex.glsl b/shaders/linepattern.vertex.glsl
@@ -14,7 +14,7 @@ attribute float a_opacity;
 
 // matrix is for the vertex position, exmatrix is for rotating and projecting
 // the extrusion vector.
-uniform mat4 u_matrix;
+uniform highp mat4 u_matrix;
 uniform mat4 u_exmatrix;
 
 // shared

diff --git a/shaders/linesdfpattern.vertex.glsl b/shaders/linesdfpattern.vertex.glsl
@@ -14,7 +14,7 @@ attribute float a_blur;
 
 // matrix is for the vertex position, exmatrix is for rotating and projecting
 // the extrusion vector.
-uniform mat4 u_matrix;
+uniform highp mat4 u_matrix;
 uniform mat4 u_exmatrix;
 
 uniform float u_ratio;

diff --git a/shaders/outline.vertex.glsl b/shaders/outline.vertex.glsl
@@ -1,7 +1,7 @@
 attribute vec2 a_pos;
 attribute vec4 a_color;
 
-uniform mat4 u_matrix;
+uniform highp mat4 u_matrix;
 uniform vec2 u_world;
 
 varying vec4 v_color;

diff --git a/shaders/sdf.vertex.glsl b/shaders/sdf.vertex.glsl
@@ -8,7 +8,7 @@ attribute float a_gamma;
 
 // matrix is for the vertex position, exmatrix is for rotating and projecting
 // the extrusion vector.
-uniform mat4 u_matrix;
+uniform highp mat4 u_matrix;
 uniform mat4 u_exmatrix;
 
 uniform float u_zoom;