Skip to content

Commit d0f42e4

Browse files
danswickadrianababakaniansamfaderHeyStensonKaty DeCorah
authored
Documentation improvements sprint (#9607)
Various documentation enhancements from the docs sprints: * [docsprint] Clarify meaning of Map#isSourceLoaded (#9589) * [docsprint] Add geolocate trigger example (#9552) * [docsprint] Add inline snippet to marker#addTo (#9592) * [docsprint] Add inline snippet and related examples to popup.setHTML (#9538) * add inline snippet and related examples to popup.setHTML * update see URLs to docs subdomain * Add inline and related example for panTo (#9547) * Add inline snippet to LngLatBounds.contains (#9548) * [docsprint] Add inline snippet and examples to map.jumpTo (#9549) * add inline snippet and examples to map.jumpTo * minor reorder to match options and text * added inline and tutorial examples for map.getCenter (#9551) * add example for Marker class setLngLat (#9553) * added examples to get- and setLayoutProperty (#9554) * add inline snippet and examples to map.triggerRepaint (#9555) * CameraOptions - update pitch and bearing definitions, add inline code example, add example links (#9556) * add inline code snippet to map.showTileBoundaries (#9557) * Mark Debug namespace as private to hide it from the docs (#9558) * [docsprint] Add detail to docs on setFeatureState, removeFeatureState, getFeatureState (#9559) * add detail to docs on setFeatureState, removeFeatureState, getFeatureState * remove trailing spaces * [docsprint] map.on: remove extra on section, link to event types, add code snippet, add related (#9560) * add examples to open and close popup events (#9565) * [docsprint] Clarify how map.moveLayer works (#9566) * clarify how map.moveLayer works * fix id capitalization * [doscprint] add links to EPSG and minor example changes for LngLat (#9570) * add links to EPSG and minor example changes for LngLat * document the layer object's properties in addLayer (#9571) * [docsprint] Add inline snippet and examples to popup.addTo (#9572) * added inline example to popup-addto * added relevant examples to popup.addto * Add inline example for trackPointer (#9575) * Add inline example for Popup#getElement (#9576) * [docsprint] Add inline examples for Point & PointLike types (#9577) * Add inline examples for Point & PointLike types * Correct syntax * [docsprint] Cleanup doc for MapBoxZoomEvent (#9564) * Describe map style object returned by Map#getStyle (#9579) * [docsprint] Add inline example for getClusterLeaves (#9580) * [docsprint] PaddingOptions - update definition, example, and related (#9581) * PaddingOptions - update definition, example, and related * Fixes formatting issues * [docsprint] Add inline snippet to marker#setPopup, marker#getPopup, and marker#togglePopup (#9582) * update setPopup * update togglePopup * update formatting * update setFilter jsdoc (#9586) * add more details to getSource (#9587) * add clearStorage example (#9588) * [docsprint] Add documentation for RequestParameters (#9573) * [docsprint] Add inline example for setZoomRate and setWheelZoomRate of scrollZoomHandler (#9593) * Add inline example for setZoomRate of scrollZoomHandler * add setWheelZoomRate inline example * Add inline examples for map zoom-related methods (#9594) * [docsprint] Add example to MapMouseEvent (#9595) * add example to MapMouseEvent * Add examples for GeolocateControl events (#9596) * [docsprint] Add example to MapDataEvent (#9597) * add example to MapDataEvent * add example for getLngLat (#9591) * suggested edits for clarifying mouse events * Small grammar fix: "optional the `layerId`" -> "the optional `layerId" * Update pitch param definition; add Display buildings in 3D example * remove example object, light formatting and copyediting Co-Authored-By: Dan Swick <dan.swick@gmail.com> Co-authored-by: Adriana Babakanian <adriana.babakanian@mapbox.com> Co-authored-by: Sam Fader <samfader@users.noreply.github.com> Co-authored-by: Heather Stenson <heather.stenson@mapbox.com> Co-authored-by: Katy DeCorah <decorah@mapbox.com> Co-authored-by: jbranigan <john.branigan@mapbox.com> Co-authored-by: Jeremy Stratman <jstratman@users.noreply.github.com> Co-authored-by: Mal Wood-Santoro <mal.wood@mapbox.com> Co-authored-by: Asheem Mamoowala <asheem.mamoowala@mapbox.com> Co-authored-by: Colleen McGinnis <colleen.mcginnis@mapbox.com> Co-authored-by: geografa <geografa@users.noreply.github.com> Co-authored-by: Patrick Leonard <pjleonard37@users.noreply.github.com> Co-authored-by: David Wicks <david.wicks@mapbox.com> Co-authored-by: Deven Diliberto <deven.diliberto@mapbox.com> Co-authored-by: Colleen <colleen.j.mcginnis@gmail.com> Co-authored-by: Karim Naaji <karim.naaji@gmail.com>
1 parent 8d54d00 commit d0f42e4

13 files changed

+1159
-119
lines changed

src/geo/lng_lat.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,10 @@ export const earthRadius = 6371008.8;
1212

1313
/**
1414
* A `LngLat` object represents a given longitude and latitude coordinate, measured in degrees.
15+
* These coordinates are based on the [WGS84 (EPSG:4326) standard](https://en.wikipedia.org/wiki/World_Geodetic_System#WGS84).
1516
*
16-
* Mapbox GL uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match GeoJSON.
17+
* Mapbox GL uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match the
18+
* [GeoJSON specification](https://tools.ietf.org/html/rfc7946).
1719
*
1820
* Note that any Mapbox GL method that accepts a `LngLat` object as an argument or option
1921
* can also accept an `Array` of two numbers and will perform an implicit conversion.
@@ -22,7 +24,8 @@ export const earthRadius = 6371008.8;
2224
* @param {number} lng Longitude, measured in degrees.
2325
* @param {number} lat Latitude, measured in degrees.
2426
* @example
25-
* var ll = new mapboxgl.LngLat(-73.9749, 40.7736);
27+
* var ll = new mapboxgl.LngLat(-123.9749, 40.7736);
28+
* ll.lng; // = -123.9749
2629
* @see [Get coordinates of the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/mouse-position/)
2730
* @see [Display a popup](https://www.mapbox.com/mapbox-gl-js/example/popup/)
2831
* @see [Highlight features within a bounding box](https://www.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/)

src/geo/lng_lat_bounds.js

+9
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,15 @@ class LngLatBounds {
216216
*
217217
* @param {LngLatLike} lnglat geographic point to check against.
218218
* @returns {boolean} True if the point is within the bounding box.
219+
* @example
220+
* var llb = new mapboxgl.LngLatBounds(
221+
* new mapboxgl.LngLat(-73.9876, 40.7661),
222+
* new mapboxgl.LngLat(-73.9397, 40.8002)
223+
* );
224+
*
225+
* var ll = new mapboxgl.LngLat(-73.9567, 40.7789);
226+
*
227+
* console.log(llb.contains(ll)); // = true
219228
*/
220229
contains(lnglat: LngLatLike) {
221230
const {lng, lat} = LngLat.convert(lnglat);

src/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,8 @@ const exported = {
163163
*
164164
* @function clearStorage
165165
* @param {Function} callback Called with an error argument if there is an error.
166+
* @example
167+
* mapboxgl.clearStorage();
166168
*/
167169
clearStorage(callback?: (err: ?Error) => void) {
168170
clearTileCache(callback);

src/source/geojson_source.js

+16
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,22 @@ class GeoJSONSource extends Evented implements Source {
230230
* @param offset The number of features to skip (e.g. for pagination).
231231
* @param callback A callback to be called when the features are retrieved (`(error, features) => { ... }`).
232232
* @returns {GeoJSONSource} this
233+
* @example
234+
* // Retrieve cluster leaves on click
235+
* map.on('click', 'clusters', function(e) {
236+
* var features = map.queryRenderedFeatures(e.point, {
237+
* layers: ['clusters']
238+
* });
239+
*
240+
* var clusterId = features[0].properties.cluster_id;
241+
* var pointCount = features[0].properties.point_count;
242+
* var clusterSource = map.getSource('clusters');
243+
*
244+
* clusterSource.getClusterLeaves(clusterId, pointCount, 0, function(error, features) {
245+
* // Print cluster leaves in the console
246+
* console.log('Cluster leaves:', error, features);
247+
* })
248+
* });
233249
*/
234250
getClusterLeaves(clusterId: number, limit: number, offset: number, callback: Callback<Array<GeoJSONFeature>>) {
235251
this.actor.send('geojson.getClusterLeaves', {

src/ui/camera.js

+78-7
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,28 @@ import type {PaddingOptions} from '../geo/edge_insets';
3333
* @typedef {Object} CameraOptions
3434
* @property {LngLatLike} center The desired center.
3535
* @property {number} zoom The desired zoom level.
36-
* @property {number} bearing The desired bearing, in degrees. The bearing is the compass direction that
37-
* is "up"; for example, a bearing of 90° orients the map so that east is up.
38-
* @property {number} pitch The desired pitch, in degrees.
36+
* @property {number} bearing The desired bearing in degrees. The bearing is the compass direction that
37+
* is "up". For example, `bearing: 90` orients the map so that east is up.
38+
* @property {number} pitch The desired pitch in degrees. The pitch is the angle towards the horizon
39+
* measured in degrees with a range between 0 and 60 degrees. For example, pitch: 0 provides the appearance
40+
* of looking straight down at the map, while pitch: 60 tilts the user's perspective towards the horizon.
41+
* Increasing the pitch value is often used to display 3D objects.
3942
* @property {LngLatLike} around If `zoom` is specified, `around` determines the point around which the zoom is centered.
4043
* @property {PaddingOptions} padding Dimensions in pixels applied on each side of the viewport for shifting the vanishing point.
44+
* @example
45+
* // set the map's initial perspective with CameraOptions
46+
* var map = new mapboxgl.Map({
47+
* container: 'map',
48+
* style: 'mapbox://styles/mapbox/streets-v11',
49+
* center: [-73.5804, 45.53483],
50+
* pitch: 60,
51+
* bearing: -60,
52+
* zoom: 10
53+
* });
54+
* @see [Set pitch and bearing](https://docs.mapbox.com/mapbox-gl-js/example/set-perspective/)
55+
* @see [Jump to a series of locations](https://docs.mapbox.com/mapbox-gl-js/example/jump-to/)
56+
* @see [Fly to a location](https://docs.mapbox.com/mapbox-gl-js/example/flyto/)
57+
* @see [Display buildings in 3D](https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/)
4158
*/
4259
export type CameraOptions = {
4360
center?: LngLatLike,
@@ -71,14 +88,28 @@ export type AnimationOptions = {
7188
};
7289

7390
/**
74-
* Options for setting padding on a call to {@link Map#fitBounds}. All properties of this object must be
91+
* Options for setting padding on calls to methods such as {@link Map#fitBounds}, {@link Map#fitScreenCoordinates}, and {@link Map#setPadding}. Adjust these options to set the amount of padding in pixels added to the edges of the canvas. Set a uniform padding on all edges or individual values for each edge. All properties of this object must be
7592
* non-negative integers.
7693
*
7794
* @typedef {Object} PaddingOptions
7895
* @property {number} top Padding in pixels from the top of the map canvas.
7996
* @property {number} bottom Padding in pixels from the bottom of the map canvas.
8097
* @property {number} left Padding in pixels from the left of the map canvas.
8198
* @property {number} right Padding in pixels from the right of the map canvas.
99+
*
100+
* @example
101+
* var bbox = [[-79, 43], [-73, 45]];
102+
* map.fitBounds(bbox, {
103+
* padding: {top: 10, bottom:25, left: 15, right: 5}
104+
* });
105+
*
106+
* @example
107+
* var bbox = [[-79, 43], [-73, 45]];
108+
* map.fitBounds(bbox, {
109+
* padding: 20
110+
* });
111+
* @see [Fit to the bounds of a LineString](https://docs.mapbox.com/mapbox-gl-js/example/zoomto-linestring/)
112+
* @see [Fit a map to a bounding box](https://docs.mapbox.com/mapbox-gl-js/example/fitbounds/)
82113
*/
83114

84115
class Camera extends Evented {
@@ -119,6 +150,12 @@ class Camera extends Evented {
119150
*
120151
* @memberof Map#
121152
* @returns The map's geographical centerpoint.
153+
* @example
154+
* // return a LngLat object such as {lng: 0, lat: 0}
155+
* var center = map.getCenter();
156+
* // access longitude and latitude values directly
157+
* var {longitude, latitude} = map.getCenter();
158+
* @see Tutorial: [Use Mapbox GL JS in a React app](https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/#store-the-new-coordinates)
122159
*/
123160
getCenter(): LngLat { return new LngLat(this.transform.center.lng, this.transform.center.lat); }
124161

@@ -156,15 +193,21 @@ class Camera extends Evented {
156193
}
157194

158195
/**
159-
* Pans the map to the specified location, with an animated transition.
196+
* Pans the map to the specified location with an animated transition.
160197
*
161198
* @memberof Map#
162199
* @param lnglat The location to pan the map to.
163-
* @param options Options object
200+
* @param options Options describing the destination and animation of the transition.
164201
* @param eventData Additional properties to be added to event objects of events triggered by this method.
165202
* @fires movestart
166203
* @fires moveend
167204
* @returns {Map} `this`
205+
* @example
206+
* map.panTo([-74, 38]);
207+
* @example
208+
* // Specify that the panTo animation should last 5000 milliseconds.
209+
* map.panTo([-74, 38], {duration: 5000});
210+
* @see [Update a feature in realtime](https://docs.mapbox.com/mapbox-gl-js/example/live-update-feature/)
168211
*/
169212
panTo(lnglat: LngLatLike, options?: AnimationOptions, eventData?: Object) {
170213
return this.easeTo(extend({
@@ -177,6 +220,8 @@ class Camera extends Evented {
177220
*
178221
* @memberof Map#
179222
* @returns The map's current zoom level.
223+
* @example
224+
* map.getZoom();
180225
*/
181226
getZoom(): number { return this.transform.zoom; }
182227

@@ -194,7 +239,7 @@ class Camera extends Evented {
194239
* @fires zoomend
195240
* @returns {Map} `this`
196241
* @example
197-
* // zoom the map to 5
242+
* // Zoom to the zoom level 5 without an animated transition
198243
* map.setZoom(5);
199244
*/
200245
setZoom(zoom: number, eventData?: Object) {
@@ -216,6 +261,14 @@ class Camera extends Evented {
216261
* @fires moveend
217262
* @fires zoomend
218263
* @returns {Map} `this`
264+
* @example
265+
* // Zoom to the zoom level 5 without an animated transition
266+
* map.zoomTo(5);
267+
* // Zoom to the zoom level 8 with an animated transition
268+
* map.zoomTo(8, {
269+
* duration: 2000,
270+
* offset: [100, 50]
271+
* });
219272
*/
220273
zoomTo(zoom: number, options: ? AnimationOptions, eventData?: Object) {
221274
return this.easeTo(extend({
@@ -236,6 +289,9 @@ class Camera extends Evented {
236289
* @fires moveend
237290
* @fires zoomend
238291
* @returns {Map} `this`
292+
* @example
293+
* // zoom the map in one level with a custom animation duration
294+
* map.zoomIn({duration: 1000});
239295
*/
240296
zoomIn(options?: AnimationOptions, eventData?: Object) {
241297
this.zoomTo(this.getZoom() + 1, options, eventData);
@@ -255,6 +311,9 @@ class Camera extends Evented {
255311
* @fires moveend
256312
* @fires zoomend
257313
* @returns {Map} `this`
314+
* @example
315+
* // zoom the map out one level with a custom animation offset
316+
* map.zoomOut({offset: [80, 60]});
258317
*/
259318
zoomOut(options?: AnimationOptions, eventData?: Object) {
260319
this.zoomTo(this.getZoom() - 1, options, eventData);
@@ -631,6 +690,18 @@ class Camera extends Evented {
631690
* @fires zoomend
632691
* @fires pitchend
633692
* @returns {Map} `this`
693+
* @example
694+
* // jump to coordinates at current zoom
695+
* map.jumpTo({center: [0, 0]});
696+
* // jump with zoom, pitch, and bearing options
697+
* map.jumpTo({
698+
* center: [0, 0],
699+
* zoom: 8,
700+
* pitch: 45,
701+
* bearing: 90
702+
* });
703+
* @see [Jump to a series of locations](https://docs.mapbox.com/mapbox-gl-js/example/jump-to/)
704+
* @see [Update a feature in realtime](https://docs.mapbox.com/mapbox-gl-js/example/live-update-feature/)
634705
*/
635706
jumpTo(options: CameraOptions, eventData?: Object) {
636707
this.stop();

src/ui/control/geolocate_control.js

+92-4
Original file line numberDiff line numberDiff line change
@@ -406,10 +406,23 @@ class GeolocateControl extends Evented {
406406
}
407407

408408
/**
409-
* Trigger a geolocation
410-
*
411-
* @returns {boolean} Returns `false` if called before control was added to a map, otherwise returns `true`.
412-
*/
409+
* Programmatically request and move the map to the user's location.
410+
*
411+
* @returns {boolean} Returns `false` if called before control was added to a map, otherwise returns `true`.
412+
* @example
413+
* // Initialize the geolocate control.
414+
* var geolocate = new mapboxgl.GeolocateControl({
415+
* positionOptions: {
416+
* enableHighAccuracy: true
417+
* },
418+
* trackUserLocation: true
419+
* });
420+
* // Add the control to the map.
421+
* map.addControl(geolocate);
422+
* map.on('load', function() {
423+
* geolocate.trigger();
424+
* });
425+
*/
413426
trigger() {
414427
if (!this._setup) {
415428
warnOnce('Geolocate control triggered before added to a map');
@@ -552,6 +565,21 @@ export default GeolocateControl;
552565
* @memberof GeolocateControl
553566
* @instance
554567
* @property {Position} data The returned [Position](https://developer.mozilla.org/en-US/docs/Web/API/Position) object from the callback in [Geolocation.getCurrentPosition()](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition) or [Geolocation.watchPosition()](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/watchPosition).
568+
* @example
569+
* // Initialize the geolocate control.
570+
* var geolocate = new mapboxgl.GeolocateControl({
571+
* positionOptions: {
572+
* enableHighAccuracy: true
573+
* },
574+
* trackUserLocation: true
575+
* });
576+
* // Add the control to the map.
577+
* map.addControl(geolocate);
578+
* // Set an event listener that fires
579+
* // when a geolocate event occurs.
580+
* geolocate.on('geolocate', function() {
581+
* console.log('A geolocate event has occurred.')
582+
* });
555583
*
556584
*/
557585

@@ -562,6 +590,21 @@ export default GeolocateControl;
562590
* @memberof GeolocateControl
563591
* @instance
564592
* @property {PositionError} data The returned [PositionError](https://developer.mozilla.org/en-US/docs/Web/API/PositionError) object from the callback in [Geolocation.getCurrentPosition()](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition) or [Geolocation.watchPosition()](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/watchPosition).
593+
* @example
594+
* // Initialize the geolocate control.
595+
* var geolocate = new mapboxgl.GeolocateControl({
596+
* positionOptions: {
597+
* enableHighAccuracy: true
598+
* },
599+
* trackUserLocation: true
600+
* });
601+
* // Add the control to the map.
602+
* map.addControl(geolocate);
603+
* // Set an event listener that fires
604+
* // when an error event occurs.
605+
* geolocate.on('error', function() {
606+
* console.log('An error event has occurred.')
607+
* });
565608
*
566609
*/
567610

@@ -572,6 +615,21 @@ export default GeolocateControl;
572615
* @memberof GeolocateControl
573616
* @instance
574617
* @property {Position} data The returned [Position](https://developer.mozilla.org/en-US/docs/Web/API/Position) object from the callback in [Geolocation.getCurrentPosition()](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition) or [Geolocation.watchPosition()](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/watchPosition).
618+
* @example
619+
* // Initialize the geolocate control.
620+
* var geolocate = new mapboxgl.GeolocateControl({
621+
* positionOptions: {
622+
* enableHighAccuracy: true
623+
* },
624+
* trackUserLocation: true
625+
* });
626+
* // Add the control to the map.
627+
* map.addControl(geolocate);
628+
* // Set an event listener that fires
629+
* // when an outofmaxbounds event occurs.
630+
* geolocate.on('outofmaxbounds', function() {
631+
* console.log('An outofmaxbounds event has occurred.')
632+
* });
575633
*
576634
*/
577635

@@ -581,6 +639,21 @@ export default GeolocateControl;
581639
* @event trackuserlocationstart
582640
* @memberof GeolocateControl
583641
* @instance
642+
* @example
643+
* // Initialize the geolocate control.
644+
* var geolocate = new mapboxgl.GeolocateControl({
645+
* positionOptions: {
646+
* enableHighAccuracy: true
647+
* },
648+
* trackUserLocation: true
649+
* });
650+
* // Add the control to the map.
651+
* map.addControl(geolocate);
652+
* // Set an event listener that fires
653+
* // when a trackuserlocationstart event occurs.
654+
* geolocate.on('trackuserlocationstart', function() {
655+
* console.log('A trackuserlocationstart event has occurred.')
656+
* });
584657
*
585658
*/
586659

@@ -590,5 +663,20 @@ export default GeolocateControl;
590663
* @event trackuserlocationend
591664
* @memberof GeolocateControl
592665
* @instance
666+
* @example
667+
* // Initialize the geolocate control.
668+
* var geolocate = new mapboxgl.GeolocateControl({
669+
* positionOptions: {
670+
* enableHighAccuracy: true
671+
* },
672+
* trackUserLocation: true
673+
* });
674+
* // Add the control to the map.
675+
* map.addControl(geolocate);
676+
* // Set an event listener that fires
677+
* // when a trackuserlocationend event occurs.
678+
* geolocate.on('trackuserlocationend', function() {
679+
* console.log('A trackuserlocationend event has occurred.')
680+
* });
593681
*
594682
*/

0 commit comments

Comments
 (0)