work around circular dependency by using LngLatBoundsLike

mapbox · Dec 6, 2016 · 91ef572 · 91ef572
1 parent bec224d
commit 91ef572
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 10 deletions.
diff --git a/debug/lng-lat-tobounds.html b/debug/lng-lat-tobounds.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel='stylesheet' href='/dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+
+<script src='/dist/mapbox-gl-dev.js'></script>
+<script src='/debug/access_token_generated.js'></script>
+<script src='https://npmcdn.com/@turf/turf@3.5.1/turf.min.js'></script>
+<script>
+
+var center = [-77.01866, 38.888];
+var radius = 1000;
+
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 3,
+    center: center,
+    style: 'mapbox://styles/mapbox/streets-v9',
+    hash: true
+});
+
+map.addControl(new mapboxgl.NavigationControl());
+map.addControl(new mapboxgl.GeolocateControl());
+
+map.on('load', function() {
+    var centerCircle = turf.circle(turf.point(center), radius, 50, 'meters');
+
+    map.addSource('circle', {
+        "type": "geojson",
+        "data": turf.featureCollection([centerCircle])
+    });
+
+    map.addLayer({
+        "id": "circle",
+        "type": "line",
+        "source": "circle",
+        "paint": {
+        }
+    });
+
+    var centerLngLat = new mapboxgl.LngLat(center[0], center[1]);
+    var bounds = centerLngLat.toBounds(radius);
+    map.fitBounds(bounds);
+});
+
+</script>
+</body>
+</html>
diff --git a/js/geo/lng_lat.js b/js/geo/lng_lat.js
@@ -1,7 +1,6 @@
 'use strict';
 
 const wrap = require('../util/util').wrap;
-const LngLatBounds = require('./lng_lat_bounds');
 
 /**
  * A `LngLat` object represents a given longitude and latitude coordinate, measured in degrees.
@@ -71,23 +70,21 @@ class LngLat {
     }
 
     /**
-     * Returns a `LngLatBounds` from the coordinates extended by a given `radius`.
+     * Returns a `LngLatBoundsLike` from the coordinates extended by a given `radius`.
      *
      * @param {number} radius Distance in meters from the coordinates to extend the bounds.
-     * @returns {LngLatBounds} A new `LngLatBounds` object.
+     * @returns {LngLatBoundsLike} A new `LngLatBoundsLike` object representing the coordinates extended by the `radius`.
      * @example
      * var ll = new mapboxgl.LngLat(-73.9749, 40.7736);
-     * ll.toBounds(100).toString(); // = "LngLatBounds(LngLat(XXX), LngLat(XXX))"
+     * ll.toBounds(100); // = [[-73.97501862141328, 40.77351016847229], [-73.97478137858673, 40.77368983152771]]
      */
     toBounds(radius) {
         const latAccuracy = 360 * radius / 40075017,
             lngAccuracy = latAccuracy / Math.cos((Math.PI / 180) * this.lat);
 
-        //return [ [this.lng - lngAccuracy, this.lat - latAccuracy],
-        //    [this.lng + lngAccuracy, this.lat + latAccuracy] ];
-        return new LngLatBounds(
-            new LngLat(this.lng - lngAccuracy, this.lat - latAccuracy),
-            new LngLat(this.lng + lngAccuracy, this.lat + latAccuracy));
+        // returning a LngLatBounds object is troublesome due to the circular dependency hence a simple LngLatBoundsLike object is used
+        return [ [this.lng - lngAccuracy, this.lat - latAccuracy],
+            [this.lng + lngAccuracy, this.lat + latAccuracy] ];
     }
 }
 

diff --git a/test/js/geo/lng_lat.test.js b/test/js/geo/lng_lat.test.js
@@ -51,7 +51,8 @@ test('LngLat', (t) => {
     });
 
     t.test('#toBounds', (t) => {
-        t.deepEqual(new LngLat(0, 0).toBounds(10), { _ne: {lng: 0.000089832, lat: 0.000089832}, _sw: {lng: -0.000089832, lat: -0.000089832}});
+        t.deepEqual(new LngLat(0, 0).toBounds(10), [[-0.00008983152770714982, -0.00008983152770714982], [0.00008983152770714982, 0.00008983152770714982]]);
+        t.deepEqual(new LngLat(-73.9749, 40.7736).toBounds(10), [[-73.97501862141328, 40.77351016847229], [-73.97478137858673, 40.77368983152771]]);
         t.end();
     });