jump back to world zero when crossing the antimeridian in flyTo or other

camera operations mapbox#2071

src/geo/transform.js

@@ -230,7 +230,7 @@ class Transform {
 
     setLocationAtPoint(lnglat, point) {
         const translate = this.pointCoordinate(point)._sub(this.pointCoordinate(this.centerPoint));
-        this.center = this.coordinateLocation(this.locationCoordinate(lnglat)._sub(translate));
+        this.center = this.coordinateLocation(this.locationCoordinate(lnglat)._sub(translate)).wrap();
     }
 
     /**

src/ui/camera.js

@@ -768,7 +768,7 @@ class Camera extends Evented {
 
             const scale = 1 / w(s);
             tr.zoom = startZoom + tr.scaleZoom(scale);
-            tr.center = tr.unproject(from.add(to.sub(from).mult(us)).mult(scale));
+            tr.center = tr.unproject(from.add(to.sub(from).mult(us)).mult(scale)).wrap();
 
             if (this.rotating) {
                 tr.bearing = interpolate(startBearing, bearing, k);

test/unit/ui/camera.test.js

@@ -1046,6 +1046,24 @@ test('camera', (t) => {
             camera.flyTo({ center: [170, 0], duration: 10 });
         });
 
+        t.test('jumps back to world 0 when crossing the antimeridian', (t) => {
+            const camera = createCamera();
+            camera.setCenter([-170, 0]);
+
+            let leftWorld0 = false;
+
+            camera.on('move', () => {
+                leftWorld0 = leftWorld0 || (camera.getCenter().lng < -180);
+            });
+
+            camera.on('moveend', () => {
+                t.false(leftWorld0);
+                t.end();
+            });
+
+            camera.flyTo({ center: [170, 0], duration: 10 });
+        });
+
         t.test('peaks at the specified zoom level', (t) => {
             const camera = createCamera({zoom: 20});
             const minZoom = 1;