Skip to content

Commit 8920c87

Browse files
author
Molly Lloyd
committed
add PaddingOptions typedef to docs 📝
1 parent 53dad67 commit 8920c87

File tree

2 files changed

+27
-110
lines changed

2 files changed

+27
-110
lines changed

‎debug/index.html

+15-108
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,31 @@
11
<!DOCTYPE html>
22
<html>
3-
43
<head>
54
<title>Mapbox GL JS debug page</title>
65
<meta charset='utf-8'>
76
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
87
<link rel='stylesheet' href='/dist/mapbox-gl.css' />
98
<style>
10-
body {
11-
margin: 0;
12-
padding: 0;
13-
}
14-
15-
#map {
16-
position: absolute;
17-
height: 100%;
18-
left:0;
19-
right:0;
20-
}
21-
22-
#sidebar {
23-
width: 200px;
24-
position: absolute;
25-
top:0;
26-
left:0;
27-
height: 100%;
28-
background-color: white;
29-
opacity: .3;
30-
z-index: 99;
31-
}
9+
body { margin: 0; padding: 0; }
10+
html, body, #map { height: 100%; }
3211
</style>
3312
</head>
3413

3514
<body>
36-
<div id='map'></div>
37-
<div id="sidebar"></div>
38-
<script src='/dist/mapbox-gl-dev.js'></script>
39-
<script src='/debug/access_token_generated.js'></script>
40-
<script>
41-
var map = window.map = new mapboxgl.Map({
42-
container: 'map',
43-
zoom: 5,
44-
center: [-77.01866, 38.888],
45-
bearing: 0,
46-
style: 'mapbox://styles/mapbox/streets-v10',
47-
hash: false
48-
});
15+
<div id='map'></div>
4916

50-
map.on('load', () => {
51-
const boundsSW = [-132.890625,
52-
19.31114335506464],
53-
boundsNE = [-56.953125,
54-
52.05249047600099],
55-
bounds = mapboxgl.LngLatBounds.convert([boundsSW, boundsNE]); // map.fitBounds(bounds);
56-
// [n,e,s,w]
57-
// sw: [w,s] = [x,y]
58-
// ne: [e,n] = [x,y]
59-
const padding = {north: 30, east: 0, south: 0, west: 200};
60-
// var newNE = map.project(bounds.getNorthEast()).add(mapboxgl.Point.convert([padding.east, -padding.north]));
61-
// var newSW = map.project(bounds.getSouthWest()).add(mapboxgl.Point.convert([-padding.west, padding.south]));
17+
<script src='/dist/mapbox-gl-dev.js'></script>
18+
<script src='/debug/access_token_generated.js'></script>
19+
<script>
6220

63-
// const newNEgeo = map.unproject(newNE);
64-
// const newSWgeo = map.unproject(newSW);
65-
map.addSource('original', {
66-
type: 'geojson',
67-
data: {
68-
type: 'FeatureCollection',
69-
features: [{
70-
type: 'Feature',
71-
geometry: {
72-
type: 'Point',
73-
coordinates: boundsNE
74-
},
75-
properties: {}
76-
}, {
77-
type: 'Feature',
78-
geometry: {
79-
type: 'Point',
80-
coordinates: boundsSW
81-
},
82-
properties: {}
83-
}]
84-
}
85-
});
86-
// map.addSource('new', {
87-
// type: 'geojson',
88-
// data: {
89-
// type: 'FeatureCollection',
90-
// features: [{
91-
// type: 'Feature',
92-
// geometry: {
93-
// type: 'Point',
94-
// coordinates: [newNEgeo.lng, newNEgeo.lat]
95-
// },
96-
// properties: {}
97-
// }, {
98-
// type: 'Feature',
99-
// geometry: {
100-
// type: 'Point',
101-
// coordinates: [newSWgeo.lng, newSWgeo.lat]
102-
// },
103-
// properties: {}
104-
// }]
105-
// }
106-
// });
107-
setTimeout(()=>{
108-
map.fitBounds(bounds);
109-
}, 1000);
110-
map.addLayer({
111-
id: 'original',
112-
source: 'original',
113-
type: 'circle',
114-
paint: {
115-
'circle-radius': 5,
116-
'circle-color': 'blue',
117-
'circle-opacity': 0.7
118-
}
119-
})
120-
});
121-
</script>
122-
</body>
21+
var map = window.map = new mapboxgl.Map({
22+
container: 'map',
23+
zoom: 12.5,
24+
center: [-77.01866, 38.888],
25+
style: 'mapbox://styles/mapbox/streets-v10',
26+
hash: true
27+
});
12328

29+
</script>
30+
</body>
12431
</html>

‎js/ui/camera.js

+12-2
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,17 @@ const Evented = require('../util/evented');
3434
* @property {boolean} animate If `false`, no animation will occur.
3535
*/
3636

37+
/**
38+
* Options for setting padding on a call to {@link Map#fitBounds}. All properties of this object must be
39+
* non-negative integers.
40+
*
41+
* @typedef {Object} PaddingOptions
42+
* @property {number} top Padding in pixels from the top of the map canvas.
43+
* @property {number} bottom Padding in pixels from the bottom of the map canvas.
44+
* @property {number} left Padding in pixels from the left of the map canvas.
45+
* @property {number} right Padding in pixels from the right of the map canvas.
46+
*/
47+
3748
class Camera extends Evented {
3849

3950
constructor(transform, options) {
@@ -299,12 +310,11 @@ class Camera extends Evented {
299310
* @memberof Map#
300311
* @param {LngLatBoundsLike} bounds Center these bounds in the viewport and use the highest
301312
* zoom level up to and including `Map#getMaxZoom()` that fits them in the viewport.
302-
* @param {Object} [options]
313+
* @param {AnimationOptions | CameraOptions | PaddingOptions} [options]
303314
* @param {boolean} [options.linear=false] If `true`, the map transitions using
304315
* {@link Map#easeTo}. If `false`, the map transitions using {@link Map#flyTo}. See
305316
* {@link Map#flyTo} for information about the options specific to that animated transition.
306317
* @param {Function} [options.easing] An easing function for the animated transition.
307-
* @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)
308318
* @param {PointLike} [options.offset=[0, 0]] The center of the given bounds relative to the map's center, measured in pixels.
309319
* @param {number} [options.maxZoom] The maximum zoom level to allow when the map view transitions to the specified bounds.
310320
* @param {Object} [eventData] Data to propagate to any event listeners.

0 commit comments

Comments
 (0)