support viewports crossing the antimeridian (mapbox#31)

* also prep for immediate release of v0.5.0

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v0.5.0
+
+* Update viewport method to take an optional `allowAntiMeridian` parameter
+
 ## v0.4.0
 
 * Update viewport method to take an optional `allowFloat` parameter to allow float values (h/t @TeaSeaLancs) [#15](https://github.com/mapbox/geo-viewport/pull/15)

README.md

@@ -72,7 +72,7 @@ console.log(center);
 
 ## api
 
-### `viewport(bounds, dimensions, minzoom, maxzoom, tileSize, allowFloat)`
+### `viewport(bounds, dimensions, minzoom, maxzoom, tileSize, allowFloat, allowAntiMeridian)`
 
 Given a `WSEN` array of bounds and a `[x, y]` array of pixel dimensions, return a `{ center: [lon, lat], zoom: zoom }` viewport. Use `allowFloat` to retain float values in the output.
 

index.js

@@ -11,14 +11,16 @@ var smCache = {};
 module.exports.viewport = viewport;
 module.exports.bounds = bounds;
 
-function fetchMerc(tileSize) {
+function fetchMerc(tileSize, allowAntiMeridian) {
     tileSize = tileSize || 256;
+    antiMeridian = allowAntiMeridian || false;
 
-    if (!smCache[tileSize]) {
-        smCache[tileSize] = new SphericalMercator({ size: tileSize });
+    var cacheKey = tileSize + String(antiMeridian);
+    if (!smCache[cacheKey]) {
+        smCache[cacheKey] = new SphericalMercator({ size: tileSize, antimeridian: antiMeridian });
     }
 
-    return smCache[tileSize];
+    return smCache[cacheKey];
 }
 
 function getAdjusted(base, ratios, allowFloat) {
@@ -29,10 +31,10 @@ function getAdjusted(base, ratios, allowFloat) {
     return allowFloat ? adjusted : Math.floor(adjusted);
 }
 
-function viewport(bounds, dimensions, minzoom, maxzoom, tileSize, allowFloat) {
+function viewport(bounds, dimensions, minzoom, maxzoom, tileSize, allowFloat, allowAntiMeridian) {
     minzoom = (minzoom === undefined) ? 0 : minzoom;
     maxzoom = (maxzoom === undefined) ? 20 : maxzoom;
-    var merc = fetchMerc(tileSize);
+    var merc = fetchMerc(tileSize, allowAntiMeridian);
     var base = maxzoom;
     var bl = merc.px([bounds[0], bounds[1]], base);
     var tr = merc.px([bounds[2], bounds[3]], base);

package.json

@@ -9,9 +9,9 @@
   "bugs": {
     "url": "https://github.com/mapbox/geo-viewport/issues"
   },
-  "version": "0.4.1",
+  "version": "0.5.0",
   "dependencies": {
-    "@mapbox/sphericalmercator": "~1.1.0"
+    "@mapbox/sphericalmercator": "^1.2.0"
   },
   "scripts": {
     "test": "nyc tap test/*.js",
@@ -42,4 +42,4 @@
       "index.js"
     ]
   }
-}
+}

test/viewport.js

@@ -64,6 +64,20 @@ test('viewport in Southern hemisphere', function(t) {
     t.end();
 });
 
+test('viewport across the antimeridian', function(t) {
+    t.ok(areViewportsApproximatelyEqual(
+        viewport.viewport([175, -43, 190, -43], [300, 200], undefined, undefined, 512, true, false),
+        { center: [177.5000001490116, -43.00000017011762], zoom: 5.398743777929521 }
+    ));
+
+    t.ok(areViewportsApproximatelyEqual(
+        viewport.viewport([175, -43, 190, -43], [300, 200], undefined, undefined, 512, true, true),
+        { center: [182.50000018626451, -43.00000017011762], zoom: 3.8137812127148685 }
+    ));
+
+    t.end();
+});
+
 test('bounds for 512px tiles', function(t) {
     var bounds = viewport.bounds([-77.036556, 38.897708], 17, [1080, 350], 512);
     var xMin = bounds[0];