add PaddingOptions typedef to docs 📝

mapbox · Feb 1, 2017 · 8920c87 · 8920c87
1 parent 53dad67
commit 8920c87
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 110 deletions.
diff --git a/debug/index.html b/debug/index.html
@@ -1,124 +1,31 @@
 <!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;
-    }
-
-    #map {
-        position: absolute;
-        height: 100%;
-        left:0;
-        right:0;
-    }
-
-    #sidebar {
-        width: 200px;
-        position: absolute;
-        top:0;
-        left:0;
-        height: 100%;
-        background-color: white;
-        opacity: .3;
-        z-index: 99;
-    }
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
     </style>
 </head>
 
 <body>
-    <div id='map'></div>
-    <div id="sidebar"></div>
-    <script src='/dist/mapbox-gl-dev.js'></script>
-    <script src='/debug/access_token_generated.js'></script>
-    <script>
-    var map = window.map = new mapboxgl.Map({
-        container: 'map',
-        zoom: 5,
-        center: [-77.01866, 38.888],
-        bearing: 0,
-        style: 'mapbox://styles/mapbox/streets-v10',
-        hash: false
-    });
+<div id='map'></div>
 
-    map.on('load', () => {
-        const boundsSW = [-132.890625,
-          19.31114335506464],
-            boundsNE = [-56.953125,
-          52.05249047600099],
-            bounds = mapboxgl.LngLatBounds.convert([boundsSW, boundsNE]);        // map.fitBounds(bounds);
-        // [n,e,s,w]
-        // sw: [w,s] = [x,y]
-        // ne: [e,n] = [x,y]
-        const padding = {north: 30, east: 0, south: 0, west: 200};
-        // var newNE = map.project(bounds.getNorthEast()).add(mapboxgl.Point.convert([padding.east, -padding.north]));
-        // var newSW = map.project(bounds.getSouthWest()).add(mapboxgl.Point.convert([-padding.west, padding.south]));
+<script src='/dist/mapbox-gl-dev.js'></script>
+<script src='/debug/access_token_generated.js'></script>
+<script>
 
-        // const newNEgeo = map.unproject(newNE);
-        // const newSWgeo = map.unproject(newSW);
-        map.addSource('original', {
-            type: 'geojson',
-            data: {
-                type: 'FeatureCollection',
-                features: [{
-                    type: 'Feature',
-                    geometry: {
-                        type: 'Point',
-                        coordinates: boundsNE
-                    },
-                    properties: {}
-                }, {
-                    type: 'Feature',
-                    geometry: {
-                        type: 'Point',
-                        coordinates: boundsSW
-                    },
-                    properties: {}
-                }]
-            }
-        });
-        // map.addSource('new', {
-        //     type: 'geojson',
-        //     data: {
-        //         type: 'FeatureCollection',
-        //         features: [{
-        //             type: 'Feature',
-        //             geometry: {
-        //                 type: 'Point',
-        //                 coordinates: [newNEgeo.lng, newNEgeo.lat]
-        //             },
-        //             properties: {}
-        //         }, {
-        //             type: 'Feature',
-        //             geometry: {
-        //                 type: 'Point',
-        //                 coordinates: [newSWgeo.lng, newSWgeo.lat]
-        //             },
-        //             properties: {}
-        //         }]
-        //     }
-        // });
-        setTimeout(()=>{
-            map.fitBounds(bounds);
-        }, 1000);
-        map.addLayer({
-            id: 'original',
-            source: 'original',
-            type: 'circle',
-            paint: {
-                'circle-radius': 5,
-                'circle-color': 'blue',
-                'circle-opacity': 0.7
-            }
-        })
-    });
-    </script>
-</body>
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 12.5,
+    center: [-77.01866, 38.888],
+    style: 'mapbox://styles/mapbox/streets-v10',
+    hash: true
+});
 
+</script>
+</body>
 </html>
diff --git a/js/ui/camera.js b/js/ui/camera.js
@@ -34,6 +34,17 @@ const Evented = require('../util/evented');
  * @property {boolean} animate If `false`, no animation will occur.
  */
 
+/**
+ * Options for setting padding on a call to {@link Map#fitBounds}. All properties of this object must be
+ * non-negative integers.
+ *
+ * @typedef {Object} PaddingOptions
+ * @property {number} top Padding in pixels from the top of the map canvas.
+ * @property {number} bottom Padding in pixels from the bottom of the map canvas.
+ * @property {number} left Padding in pixels from the left of the map canvas.
+ * @property {number} right Padding in pixels from the right of the map canvas.
+ */
+
 class Camera extends Evented {
 
     constructor(transform, options) {
@@ -299,12 +310,11 @@ class Camera extends Evented {
      * @memberof Map#
      * @param {LngLatBoundsLike} bounds Center these bounds in the viewport and use the highest
      *      zoom level up to and including `Map#getMaxZoom()` that fits them in the viewport.
-     * @param {Object} [options]
+     * @param {AnimationOptions | CameraOptions | PaddingOptions} [options]
      * @param {boolean} [options.linear=false] If `true`, the map transitions using
      *     {@link Map#easeTo}. If `false`, the map transitions using {@link Map#flyTo}. See
      *     {@link Map#flyTo} for information about the options specific to that animated transition.
      * @param {Function} [options.easing] An easing function for the animated transition.
-     * @param {number|Object} [options.padding] Sets padding around the given bounds on each side in pixels. Accepts a number for all padding edges or an object with padding for each compass direction (north, south, east, and west)
      * @param {PointLike} [options.offset=[0, 0]] The center of the given bounds relative to the map's center, measured in pixels.
      * @param {number} [options.maxZoom] The maximum zoom level to allow when the map view transitions to the specified bounds.
      * @param {Object} [eventData] Data to propagate to any event listeners.