diff --git a/.eslintrc b/.eslintrc index 338a301c65d..c0e51ac4ff2 100644 --- a/.eslintrc +++ b/.eslintrc @@ -82,12 +82,6 @@ "no-multiple-empty-lines": [ "error", { "max": 1 }], - "jsdoc/check-param-names": "warn", - "jsdoc/require-param": "warn", - "jsdoc/require-param-description": "warn", - "jsdoc/require-param-name": "warn", - "jsdoc/require-returns": "warn", - "jsdoc/require-returns-description": "warn" }, "settings": { "jsdoc":{ @@ -160,7 +154,7 @@ "jsdoc/require-returns": "error", "jsdoc/require-returns-description": "error", "jsdoc/require-property": "warn", - "jsdoc/require-description-complete-sentence": "error", + "jsdoc/require-description-complete-sentence": "warn", "jsdoc/check-access": "warn", "jsdoc/check-alignment": "warn", "jsdoc/check-examples": ["error", { diff --git a/src/geo/lng_lat.js b/src/geo/lng_lat.js index 92912a01c07..1315243fe75 100644 --- a/src/geo/lng_lat.js +++ b/src/geo/lng_lat.js @@ -26,10 +26,10 @@ export const earthRadius = 6371008.8; * @example * const ll = new mapboxgl.LngLat(-123.9749, 40.7736); * console.log(ll.lng); // = -123.9749 - * @see [Get coordinates of the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/mouse-position/) - * @see [Display a popup](https://www.mapbox.com/mapbox-gl-js/example/popup/) - * @see [Highlight features within a bounding box](https://www.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/) - * @see [Create a timeline animation](https://www.mapbox.com/mapbox-gl-js/example/timeline-animation/) + * @see [Example: Get coordinates of the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/mouse-position/) + * @see [Example: Display a popup](https://www.mapbox.com/mapbox-gl-js/example/popup/) + * @see [Example: Highlight features within a bounding box](https://www.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/) + * @see [Example: Create a timeline animation](https://www.mapbox.com/mapbox-gl-js/example/timeline-animation/) */ class LngLat { lng: number; diff --git a/src/geo/mercator_coordinate.js b/src/geo/mercator_coordinate.js index 53f545f1610..cb952ce89aa 100644 --- a/src/geo/mercator_coordinate.js +++ b/src/geo/mercator_coordinate.js @@ -74,7 +74,7 @@ export function mercatorScale(lat: number) { * @example * const nullIsland = new mapboxgl.MercatorCoordinate(0.5, 0.5, 0); * - * @see [Add a custom style layer](https://www.mapbox.com/mapbox-gl-js/example/custom-style-layer/) + * @see [Example: Add a custom style layer](https://www.mapbox.com/mapbox-gl-js/example/custom-style-layer/) */ class MercatorCoordinate { x: number; diff --git a/src/index.js b/src/index.js index 136ea78e43e..da12780ca7d 100644 --- a/src/index.js +++ b/src/index.js @@ -92,7 +92,7 @@ const exported = { * @returns {string} The currently set access token. * @example * mapboxgl.accessToken = myAccessToken; - * @see [Display a map](https://www.mapbox.com/mapbox-gl-js/examples/) + * @see [Example: Display a map](https://www.mapbox.com/mapbox-gl-js/example/simple-map/) */ get accessToken(): ?string { return config.ACCESS_TOKEN; @@ -247,7 +247,7 @@ Debug.extend(exported, {isSafari, getPerformanceMetrics: PerformanceUtils.getPer * if (!mapboxgl.supported()) { * alert('Your browser does not support Mapbox GL'); * } - * @see [Check for browser support](https://www.mapbox.com/mapbox-gl-js/example/check-for-support/) + * @see [Example: Check for browser support](https://www.mapbox.com/mapbox-gl-js/example/check-for-support/) */ /** @@ -261,7 +261,7 @@ Debug.extend(exported, {isSafari, getPerformanceMetrics: PerformanceUtils.getPer * rtl text will then be rendered only after the plugin finishes loading. * @example * mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.0/mapbox-gl-rtl-text.js'); - * @see [Add support for right-to-left scripts](https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-rtl-text/) + * @see [Example: Add support for right-to-left scripts](https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-rtl-text/) */ /** diff --git a/src/source/canvas_source.js b/src/source/canvas_source.js index 8d987690618..49f11c3dae6 100644 --- a/src/source/canvas_source.js +++ b/src/source/canvas_source.js @@ -57,7 +57,7 @@ export type CanvasSourceSpecification = {| * ]); * * map.removeSource('some id'); // remove - * @see [Add a canvas source](https://docs.mapbox.com/mapbox-gl-js/example/canvas-source/) + * @see [Example: Add a canvas source](https://docs.mapbox.com/mapbox-gl-js/example/canvas-source/) */ class CanvasSource extends ImageSource { options: CanvasSourceSpecification; diff --git a/src/source/geojson_source.js b/src/source/geojson_source.js index 752c2a305f9..e47f7c8a3a6 100644 --- a/src/source/geojson_source.js +++ b/src/source/geojson_source.js @@ -58,10 +58,10 @@ import type {Cancelable} from '../types/cancelable.js'; * } * }] * }); - * @see [Draw GeoJSON points](https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/) - * @see [Add a GeoJSON line](https://www.mapbox.com/mapbox-gl-js/example/geojson-line/) - * @see [Create a heatmap from points](https://www.mapbox.com/mapbox-gl-js/example/heatmap/) - * @see [Create and style clusters](https://www.mapbox.com/mapbox-gl-js/example/cluster/) + * @see [Example: Draw GeoJSON points](https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/) + * @see [Example: Add a GeoJSON line](https://www.mapbox.com/mapbox-gl-js/example/geojson-line/) + * @see [Example: Create a heatmap from points](https://www.mapbox.com/mapbox-gl-js/example/heatmap/) + * @see [Example: Create and style clusters](https://www.mapbox.com/mapbox-gl-js/example/cluster/) */ class GeoJSONSource extends Evented implements Source { type: 'geojson'; diff --git a/src/source/image_source.js b/src/source/image_source.js index 8e970d1e532..733182d5df9 100644 --- a/src/source/image_source.js +++ b/src/source/image_source.js @@ -63,7 +63,7 @@ type Coordinates = [[number, number], [number, number], [number, number], [numbe * }); * * map.removeSource('some id'); // remove - * @see [Add an image](https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/) + * @see [Example: Add an image](https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/) */ class ImageSource extends Evented implements Source { type: string; diff --git a/src/source/vector_tile_source.js b/src/source/vector_tile_source.js index 3a40ddfd014..381bf0c0889 100644 --- a/src/source/vector_tile_source.js +++ b/src/source/vector_tile_source.js @@ -45,8 +45,8 @@ import type {LoadVectorTileResult} from './vector_tile_worker_source.js'; * * @example * map.getSource('some id').setTiles(['https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt']); - * @see [Add a vector tile source](https://docs.mapbox.com/mapbox-gl-js/example/vector-source/) - * @see [Add a third party vector tile source](https://docs.mapbox.com/mapbox-gl-js/example/third-party/) + * @see [Example: Add a vector tile source](https://docs.mapbox.com/mapbox-gl-js/example/vector-source/) + * @see [Example: Add a third party vector tile source](https://docs.mapbox.com/mapbox-gl-js/example/third-party/) */ class VectorTileSource extends Evented implements Source { type: 'vector'; diff --git a/src/source/video_source.js b/src/source/video_source.js index a9d592a9e85..ab13cc468d7 100644 --- a/src/source/video_source.js +++ b/src/source/video_source.js @@ -44,7 +44,7 @@ import type {VideoSourceSpecification} from '../style-spec/types.js'; * ]); * * map.removeSource('some id'); // remove - * @see [Add a video](https://www.mapbox.com/mapbox-gl-js/example/video-on-a-map/) + * @see [Example: Add a video](https://www.mapbox.com/mapbox-gl-js/example/video-on-a-map/) */ class VideoSource extends ImageSource { options: VideoSourceSpecification; diff --git a/src/style-spec/reference/v8.json b/src/style-spec/reference/v8.json index cf66788b242..a00d6e9f508 100644 --- a/src/style-spec/reference/v8.json +++ b/src/style-spec/reference/v8.json @@ -616,7 +616,9 @@ "doc": "A spherical dome around the map that is always rendered behind all other layers.", "sdk-support": { "basic functionality": { - "js": "2.0.0" + "js": "2.0.0", + "ios": "10.0.0", + "android": "10.0.0" } } } @@ -712,7 +714,9 @@ "doc": "Whether this layer is displayed.", "sdk-support": { "basic functionality": { - "js": "2.0.0" + "js": "2.0.0", + "ios": "10.0.0", + "android": "10.0.0" } }, "property-type": "constant" @@ -1831,7 +1835,12 @@ "units": "ems", "doc": "The maximum line width for text wrapping.", "requires": [ - "text-field" + "text-field", + { + "symbol-placement": [ + "point" + ] + } ], "sdk-support": { "basic functionality": { @@ -2966,7 +2975,10 @@ "group": "Types", "sdk-support": { "basic functionality": { - "js": "0.54.0" + "js": "0.54.0", + "android" : "8.4.0", + "ios": "5.4.0", + "macos": "0.15.0" } } }, @@ -3112,7 +3124,7 @@ } }, "geometry-type": { - "doc": "Gets the feature's geometry type: `Point`, `MultiPoint`, `LineString`, `MultiLineString`, `Polygon`, `MultiPolygon`.", + "doc": "Gets the feature's geometry type: `Point`, `MultiPoint`, `LineString`, `MultiLineString`, `Polygon`, `MultiPolygon`. `Multi*` feature types are only returned in GeoJSON sources. When working with vector tile sources, use the singular forms.", "group": "Feature data", "sdk-support": { "basic functionality": { @@ -3176,7 +3188,9 @@ "group": "sky", "sdk-support": { "basic functionality": { - "js": "2.0.0" + "js": "2.0.0", + "ios": "10.0.0", + "android": "10.0.0" } } }, @@ -3185,7 +3199,10 @@ "group": "Feature data", "sdk-support": { "basic functionality": { - "js": "0.53.0" + "js": "0.53.0", + "android": "8.4.0", + "ios": "5.5.0", + "macos": "0.15.0" } } }, @@ -3864,7 +3881,9 @@ "required": true, "sdk-support": { "basic functionality": { - "js": "2.0.0" + "js": "2.0.0", + "ios": "10.0.0", + "android": "10.0.0" } } }, @@ -3884,7 +3903,9 @@ "doc": "Exaggerates the elevation of the terrain by multiplying the data from the DEM with this value.", "sdk-support": { "basic functionality": { - "js": "2.0.0" + "js": "2.0.0", + "ios": "10.0.0", + "android": "10.0.0" } } } @@ -4325,6 +4346,7 @@ "sdk-support": { "basic functionality": { "js": "0.50.0", + "android": "7.0.0", "ios": "4.7.0", "macos": "0.13.0" } @@ -6033,7 +6055,9 @@ "doc": "The type of the sky", "sdk-support": { "basic functionality": { - "js": "2.0.0" + "js": "2.0.0", + "ios": "10.0.0", + "android": "10.0.0" } }, "expression": { @@ -6055,7 +6079,9 @@ "doc": "Position of the sun center [a azimuthal angle, p polar angle]. The azimuthal angle indicates the position of the sun relative to 0° north, where degrees proceed clockwise. The polar angle indicates the height of the sun, where 0° is directly above, at zenith, and 90° at the horizon. When this property is ommitted, the sun center is directly inherited from the light position.", "sdk-support": { "basic functionality": { - "js": "2.0.0" + "js": "2.0.0", + "ios": "10.0.0", + "android": "10.0.0" } }, "requires": [ @@ -6085,7 +6111,9 @@ "doc": "Intensity of the sun as a light source in the atmosphere (on a scale from 0 to a 100). Setting higher values will brighten up the sky.", "sdk-support": { "basic functionality": { - "js": "2.0.0" + "js": "2.0.0", + "ios": "10.0.0", + "android": "10.0.0" } }, "property-type": "data-constant" @@ -6110,7 +6138,9 @@ "doc": "Position of the gradient center [a azimuthal angle, p polar angle]. The azimuthal angle indicates the position of the gradient center relative to 0° north, where degrees proceed clockwise. The polar angle indicates the height of the gradient center, where 0° is directly above, at zenith, and 90° at the horizon.", "sdk-support": { "basic functionality": { - "js": "2.0.0" + "js": "2.0.0", + "ios": "10.0.0", + "android": "10.0.0" } }, "expression": { @@ -6135,7 +6165,9 @@ "doc": "The angular distance (measured in degrees) from `sky-gradient-center` up to which the gradient extends. A value of 180 causes the gradient to wrap around to the opposite direction from `sky-gradient-center`.", "sdk-support": { "basic functionality": { - "js": "2.0.0" + "js": "2.0.0", + "ios": "10.0.0", + "android": "10.0.0" } }, "expression": { @@ -6170,7 +6202,9 @@ ], "sdk-support": { "basic functionality": { - "js": "2.0.0" + "js": "2.0.0", + "ios": "10.0.0", + "android": "10.0.0" }, "data-driven styling": {} }, @@ -6194,7 +6228,9 @@ ], "sdk-support": { "basic functionality": { - "js": "2.0.0" + "js": "2.0.0", + "ios": "10.0.0", + "android": "10.0.0" } }, "property-type": "data-constant" @@ -6211,7 +6247,9 @@ ], "sdk-support": { "basic functionality": { - "js": "2.0.0" + "js": "2.0.0", + "ios": "10.0.0", + "android": "10.0.0" } }, "property-type": "data-constant" @@ -6225,7 +6263,9 @@ "transition": true, "sdk-support": { "basic functionality": { - "js": "2.0.0" + "js": "2.0.0", + "ios": "10.0.0", + "android": "10.0.0" } }, "expression": { diff --git a/src/style/style_image.js b/src/style/style_image.js index c715067b423..a33ec1a4474 100644 --- a/src/style/style_image.js +++ b/src/style/style_image.js @@ -56,7 +56,7 @@ export function renderStyleImage(image: StyleImage) { * @property {number} height * @property {Uint8Array | Uint8ClampedArray} data * - * @see [Add an animated icon to the map.](https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/) + * @see [Example: Add an animated icon to the map.](https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/) * * @example * const flashingSquare = { diff --git a/src/style/style_layer/custom_style_layer.js b/src/style/style_layer/custom_style_layer.js index 41fd754fb9e..7d9144603ca 100644 --- a/src/style/style_layer/custom_style_layer.js +++ b/src/style/style_layer/custom_style_layer.js @@ -73,8 +73,8 @@ type CustomRenderMethod = (gl: WebGLRenderingContext, matrix: Array) => * map.on('load', () => { * map.addLayer(new NullIslandLayer()); * }); - * @see [Add a custom style layer](https://docs.mapbox.com/mapbox-gl-js/example/custom-style-layer/) - * @see [Add a 3D model](https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/) + * @see [Example: Add a custom style layer](https://docs.mapbox.com/mapbox-gl-js/example/custom-style-layer/) + * @see [Example: Add a 3D model](https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/) */ /** diff --git a/src/ui/camera.js b/src/ui/camera.js index a5f1042b589..a84ff06f517 100644 --- a/src/ui/camera.js +++ b/src/ui/camera.js @@ -55,10 +55,10 @@ import type {PaddingOptions} from '../geo/edge_insets.js'; * bearing: -60, * zoom: 10 * }); - * @see [Set pitch and bearing](https://docs.mapbox.com/mapbox-gl-js/example/set-perspective/) - * @see [Jump to a series of locations](https://docs.mapbox.com/mapbox-gl-js/example/jump-to/) - * @see [Fly to a location](https://docs.mapbox.com/mapbox-gl-js/example/flyto/) - * @see [Display buildings in 3D](https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/) + * @see [Example: Set pitch and bearing](https://docs.mapbox.com/mapbox-gl-js/example/set-perspective/) + * @see [Example: Jump to a series of locations](https://docs.mapbox.com/mapbox-gl-js/example/jump-to/) + * @see [Example: Fly to a location](https://docs.mapbox.com/mapbox-gl-js/example/flyto/) + * @see [Example: Display buildings in 3D](https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/) */ export type CameraOptions = { center?: LngLatLike, @@ -82,9 +82,9 @@ export type CameraOptions = { * @property {boolean} animate If `false`, no animation will occur. * @property {boolean} essential If `true`, then the animation is considered essential and will not be affected by * [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion). - * @see [Slowly fly to a location](https://docs.mapbox.com/mapbox-gl-js/example/flyto-options/) - * @see [Customize camera animations](https://docs.mapbox.com/mapbox-gl-js/example/camera-animation/) - * @see [Navigate the map with game-like controls](https://docs.mapbox.com/mapbox-gl-js/example/game-controls/) + * @see [Example: Slowly fly to a location](https://docs.mapbox.com/mapbox-gl-js/example/flyto-options/) + * @see [Example: Customize camera animations](https://docs.mapbox.com/mapbox-gl-js/example/camera-animation/) + * @see [Example: Navigate the map with game-like controls](https://docs.mapbox.com/mapbox-gl-js/example/game-controls/) */ export type AnimationOptions = { duration?: number, @@ -122,8 +122,8 @@ export type ElevationBoxRaycast = { * map.fitBounds(bbox, { * padding: 20 * }); - * @see [Fit to the bounds of a LineString](https://docs.mapbox.com/mapbox-gl-js/example/zoomto-linestring/) - * @see [Fit a map to a bounding box](https://docs.mapbox.com/mapbox-gl-js/example/fitbounds/) + * @see [Example: Fit to the bounds of a LineString](https://docs.mapbox.com/mapbox-gl-js/example/zoomto-linestring/) + * @see [Example: Fit a map to a bounding box](https://docs.mapbox.com/mapbox-gl-js/example/fitbounds/) */ class Camera extends Evented { @@ -162,13 +162,13 @@ class Camera extends Evented { * Returns the map's geographical centerpoint. * * @memberof Map# - * @returns The map's geographical centerpoint. + * @returns {LngLat} The map's geographical centerpoint. * @example - * // return a LngLat object such as {lng: 0, lat: 0} + * // Return a LngLat object such as {lng: 0, lat: 0}. * const center = map.getCenter(); - * // access longitude and latitude values directly + * // Access longitude and latitude values directly. * const {longitude, latitude} = map.getCenter(); - * @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) + * @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) */ getCenter(): LngLat { return new LngLat(this.transform.center.lng, this.transform.center.lat); } @@ -203,7 +203,7 @@ class Camera extends Evented { * @example * // panBy with an animation of 5 seconds. * map.panBy([-74, 38], {duration: 5000}); - * @see [Navigate the map with game-like controls](https://www.mapbox.com/mapbox-gl-js/example/game-controls/) + * @see [Example: Navigate the map with game-like controls](https://www.mapbox.com/mapbox-gl-js/example/game-controls/) */ panBy(offset: PointLike, options?: AnimationOptions, eventData?: Object) { offset = Point.convert(offset).mult(-1); @@ -225,7 +225,7 @@ class Camera extends Evented { * @example * // Specify that the panTo animation should last 5000 milliseconds. * map.panTo([-74, 38], {duration: 5000}); - * @see [Update a feature in realtime](https://docs.mapbox.com/mapbox-gl-js/example/live-update-feature/) + * @see [Example: Update a feature in realtime](https://docs.mapbox.com/mapbox-gl-js/example/live-update-feature/) */ panTo(lnglat: LngLatLike, options?: AnimationOptions, eventData?: Object) { return this.easeTo(extend({ @@ -237,7 +237,7 @@ class Camera extends Evented { * Returns the map's current zoom level. * * @memberof Map# - * @returns The map's current zoom level. + * @returns {number} The map's current zoom level. * @example * map.getZoom(); */ @@ -343,10 +343,10 @@ class Camera extends Evented { * of 90° orients the map so that east is up. * * @memberof Map# - * @returns The map's current bearing. - * @see [Navigate the map with game-like controls](https://www.mapbox.com/mapbox-gl-js/example/game-controls/) + * @returns {number} The map's current bearing. * @example * const bearing = map.getBearing(); + * @see [Example: Navigate the map with game-like controls](https://www.mapbox.com/mapbox-gl-js/example/game-controls/) */ getBearing(): number { return this.transform.bearing; } @@ -363,7 +363,7 @@ class Camera extends Evented { * @fires moveend * @returns {Map} Returns itself to allow for method chaining. * @example - * // rotate the map to 90 degrees + * // Rotate the map to 90 degrees. * map.setBearing(90); */ setBearing(bearing: number, eventData?: Object) { @@ -375,7 +375,7 @@ class Camera extends Evented { * Returns the current padding applied around the map viewport. * * @memberof Map# - * @returns The current padding around the map viewport. + * @returns {PaddingOptions} The current padding around the map viewport. * @example * const padding = map.getPadding(); */ @@ -486,17 +486,17 @@ class Camera extends Evented { } /** - * Returns the map's current pitch (tilt). + * Returns the map's current [pitch](https://docs.mapbox.com/help/glossary/camera/) (tilt). * * @memberof Map# - * @returns The map's current pitch, measured in degrees away from the plane of the screen. + * @returns {number} The map's current pitch, measured in degrees away from the plane of the screen. * @example * const pitch = map.getPitch(); */ getPitch(): number { return this.transform.pitch; } /** - * Sets the map's pitch (tilt). Equivalent to `jumpTo({pitch: pitch})`. + * Sets the map's [pitch](https://docs.mapbox.com/help/glossary/camera/) (tilt). Equivalent to `jumpTo({pitch: pitch})`. * * @memberof Map# * @param pitch The pitch to set, measured in degrees away from the plane of the screen (0-60). @@ -515,6 +515,10 @@ class Camera extends Evented { } /** + * Returns a {@link CameraOptions} object for the highest zoom level + * up to and including `Map#getMaxZoom()` that fits the bounds + * in the viewport at the specified bearing. + * * @memberof Map# * @param {LngLatBoundsLike} bounds Calculate the center for these bounds in the viewport and use * the highest zoom level up to and including `Map#getMaxZoom()` that fits @@ -756,7 +760,7 @@ class Camera extends Evented { * map.fitBounds(bbox, { * padding: {top: 10, bottom:25, left: 15, right: 5} * }); - * @see [Fit a map to a bounding box](https://www.mapbox.com/mapbox-gl-js/example/fitbounds/) + * @see [Example: Fit a map to a bounding box](https://www.mapbox.com/mapbox-gl-js/example/fitbounds/) */ fitBounds(bounds: LngLatBoundsLike, options?: AnimationOptions & CameraOptions, eventData?: Object) { return this._fitInternal( @@ -915,8 +919,8 @@ class Camera extends Evented { * pitch: 45, * bearing: 90 * }); - * @see [Jump to a series of locations](https://docs.mapbox.com/mapbox-gl-js/example/jump-to/) - * @see [Update a feature in realtime](https://docs.mapbox.com/mapbox-gl-js/example/live-update-feature/) + * @see [Example: Jump to a series of locations](https://docs.mapbox.com/mapbox-gl-js/example/jump-to/) + * @see [Example: Update a feature in realtime](https://docs.mapbox.com/mapbox-gl-js/example/live-update-feature/) */ jumpTo(options: CameraOptions, eventData?: Object) { this.stop(); @@ -1088,13 +1092,12 @@ class Camera extends Evented { * @fires moveend * @fires zoomend * @fires pitchend - * @returns {Map} Returns itself to allow for method chaining. - * @see [Navigate the map with game-like controls](https://www.mapbox.com/mapbox-gl-js/example/game-controls/) + * @returns {Map} `this` Returns itself to allow for method chaining. * @example - * // Ease with default options to null island for 5 seconds + * // Ease with default options to null island for 5 seconds. * map.easeTo({center: [0, 0], zoom: 9, duration: 5000}); * @example - * // Using easeTo options + * // Using easeTo options. * map.easeTo({ * center: [0, 0], * zoom: 9, @@ -1105,6 +1108,7 @@ class Camera extends Evented { * return t; * } * }); + * @see [Example: Navigate the map with game-like controls](https://www.mapbox.com/mapbox-gl-js/example/game-controls/) */ easeTo(options: CameraOptions & AnimationOptions & {easeId?: string}, eventData?: Object) { this._stop(false, options.easeId); @@ -1315,9 +1319,9 @@ class Camera extends Evented { * return t; * } * }); - * @see [Fly to a location](https://www.mapbox.com/mapbox-gl-js/example/flyto/) - * @see [Slowly fly to a location](https://www.mapbox.com/mapbox-gl-js/example/flyto-options/) - * @see [Fly to a location based on scroll position](https://www.mapbox.com/mapbox-gl-js/example/scroll-fly-to/) + * @see [Example: Fly to a location](https://www.mapbox.com/mapbox-gl-js/example/flyto/) + * @see [Example: Slowly fly to a location](https://www.mapbox.com/mapbox-gl-js/example/flyto-options/) + * @see [Example: Fly to a location based on scroll position](https://www.mapbox.com/mapbox-gl-js/example/scroll-fly-to/) */ flyTo(options: Object, eventData?: Object) { // Fall through to jumpTo if user has set prefers-reduced-motion diff --git a/src/ui/control/fullscreen_control.js b/src/ui/control/fullscreen_control.js index 1e008c91658..c7be9eaf0c9 100644 --- a/src/ui/control/fullscreen_control.js +++ b/src/ui/control/fullscreen_control.js @@ -21,7 +21,7 @@ type Options = { * * @example * map.addControl(new mapboxgl.FullscreenControl({container: document.querySelector('body')})); - * @see [View a fullscreen map](https://www.mapbox.com/mapbox-gl-js/example/fullscreen/) + * @see [Example: View a fullscreen map](https://www.mapbox.com/mapbox-gl-js/example/fullscreen/) */ class FullscreenControl { diff --git a/src/ui/control/geolocate_control.js b/src/ui/control/geolocate_control.js index 082d3d57fa4..2afc7903e6f 100644 --- a/src/ui/control/geolocate_control.js +++ b/src/ui/control/geolocate_control.js @@ -107,7 +107,7 @@ let noTimeout = false; * trackUserLocation: true, * showUserHeading: true * })); - * @see [Locate the user](https://www.mapbox.com/mapbox-gl-js/example/locate-user/) + * @see [Example: Locate the user](https://www.mapbox.com/mapbox-gl-js/example/locate-user/) */ class GeolocateControl extends Evented { _map: Map; diff --git a/src/ui/control/navigation_control.js b/src/ui/control/navigation_control.js index d15d210dba6..8b04acc4828 100644 --- a/src/ui/control/navigation_control.js +++ b/src/ui/control/navigation_control.js @@ -36,8 +36,8 @@ const defaultOptions: Options = { * visualizePitch: true * }); * map.addControl(nav, 'bottom-right'); - * @see [Display map navigation controls](https://www.mapbox.com/mapbox-gl-js/example/navigation/) - * @see [Add a third party vector tile source](https://www.mapbox.com/mapbox-gl-js/example/third-party/) + * @see [Example: Display map navigation controls](https://www.mapbox.com/mapbox-gl-js/example/navigation/) + * @see [Example: Add a third party vector tile source](https://www.mapbox.com/mapbox-gl-js/example/third-party/) */ class NavigationControl { _map: Map; diff --git a/src/ui/events.js b/src/ui/events.js index 44c40dd91d4..4d77a50755a 100644 --- a/src/ui/events.js +++ b/src/ui/events.js @@ -33,9 +33,9 @@ import type LngLat from '../geo/lng_lat.js'; * // type: "click" * // } * }); - * @see [`Map` events documentation](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-events) - * @see [Display popup on click](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/) - * @see [Display popup on hover](https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/) + * @see [Reference: `Map` events API documentation](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-events) + * @see [Example: Display popup on click](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/) + * @see [Example: Display popup on hover](https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/) */ export class MapMouseEvent extends Event { /** @@ -143,6 +143,7 @@ export class MapMouseEvent extends Event { * For a full list of available events, see [`Map` events](/mapbox-gl-js/api/map/#map-events). * * @extends {Object} + * * @example * // Example of a MapTouchEvent of type "touch" * map.on('touchstart', (e) => { @@ -174,8 +175,8 @@ export class MapMouseEvent extends Event { * // type: "touchstart" * // } * }); - * @see [`Map` events documentation](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-events) - * @see [Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) + * @see [Reference: `Map` events API documentation](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-events) + * @see [Example: Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) */ export class MapTouchEvent extends Event { /** @@ -292,12 +293,19 @@ export class MapTouchEvent extends Event { * * @extends {Object} * @example - * // Example of a MapWheelEvent of type "wheel" + * // Example event trigger for a MapWheelEvent of type "wheel" * map.on('wheel', (e) => { * console.log('event type:', e.type); * // event type: wheel * }); -* @see [`Map` events documentation](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-events) + * @example + * // Example of a MapWheelEvent of type "wheel" + * // { + * // originalEvent: WheelEvent {...}, + * // target: Map {...}, + * // type: "wheel" + * // } + * @see [Reference: `Map` events API documentation](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-events) */ export class MapWheelEvent extends Event { /** @@ -317,7 +325,6 @@ export class MapWheelEvent extends Event { /** * Prevents subsequent default processing of the event by the map. - * * Calling this method will prevent the the behavior of {@link ScrollZoomHandler}. * * @example @@ -359,13 +366,20 @@ export class MapWheelEvent extends Event { * @property {string} type The type of originating event. For a full list of available events, see [`Map` events](/mapbox-gl-js/api/map/#map-events). * @property {Map} target The `Map` instance that triggered the event. * @example - * // Example of a BoxZoomEvent of type "boxzoomstart" + * // Example trigger of a BoxZoomEvent of type "boxzoomstart" * map.on('boxzoomstart', (e) => { * console.log('event type:', e.type); * // event type: boxzoomstart * }); - * @see [`Map` events documentation](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-events) - * @see [Highlight features within a bounding box](https://docs.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/) + * @example + * // Example of a BoxZoomEvent of type "boxzoomstart" + * // { + * // originalEvent: {...}, + * // type: "boxzoomstart", + * // target: {...} + * // } + * @see [Reference: `Map` events API documentation](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-events) + * @see [Example: Highlight features within a bounding box](https://docs.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/) */ export type MapBoxZoomEvent = { type: 'boxzoomstart' @@ -385,6 +399,7 @@ export type MapBoxZoomEvent = { * @property {string} dataType The type of data that has changed. One of `'source'` or `'style'`, where `'source'` refers to the data associated with any source, and `'style'` refers to the entire [style](https://docs.mapbox.com/help/glossary/style/) used by the map. * @property {boolean} [isSourceLoaded] True if the event has a `dataType` of `source` and the source has no outstanding network requests. * @property {Object} [source] The [style spec representation of the source](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/) if the event has a `dataType` of `source`. + * @property {string} [sourceId] The `id` of the [`source`](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/) that triggered the event, if the event has a `dataType` of `source`. Same as the `id` of the object in the `source` property. * @property {string} [sourceDataType] Included if the event has a `dataType` of `source` and the event signals * that internal data has been received or changed. Possible values are `metadata`, `content` and `visibility`. * @property {Object} [tile] The tile being loaded or changed, if the event has a `dataType` of `source` and @@ -409,9 +424,9 @@ export type MapBoxZoomEvent = { * // type: "sourcedata" * // } * }); - * @see [`Map` events documentation](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-events) - * @see [Change a map's style](https://docs.mapbox.com/mapbox-gl-js/example/setstyle/) - * @see [Add a GeoJSON line](https://docs.mapbox.com/mapbox-gl-js/example/geojson-line/) + * @see [Reference: `Map` events API documentation](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-events) + * @see [Example: Change a map's style](https://docs.mapbox.com/mapbox-gl-js/example/setstyle/) + * @see [Example: Add a GeoJSON line](https://docs.mapbox.com/mapbox-gl-js/example/geojson-line/) */ export type MapDataEvent = { type: 'data' @@ -455,8 +470,8 @@ export type MapEvent = * map.on('mousedown', 'poi-label', () => { * console.log('A mousedown event has occurred on a visible portion of the poi-label layer.'); * }); - * @see [Highlight features within a bounding box](https://docs.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/) - * @see [Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) + * @see [Example: Highlight features within a bounding box](https://docs.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/) + * @see [Example: Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) */ | 'mousedown' @@ -485,8 +500,8 @@ export type MapEvent = * map.on('mouseup', 'poi-label', () => { * console.log('A mouseup event has occurred on a visible portion of the poi-label layer.'); * }); - * @see [Highlight features within a bounding box](https://docs.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/) - * @see [Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) + * @see [Example: Highlight features within a bounding box](https://docs.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/) + * @see [Example: Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) */ | 'mouseup' @@ -517,9 +532,9 @@ export type MapEvent = * map.on('mouseover', 'poi-label', () => { * console.log('A mouseover event has occurred on a visible portion of the poi-label layer.'); * }); - * @see [Get coordinates of the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/mouse-position/) - * @see [Highlight features under the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/hover-styles/) - * @see [Display a popup on hover](https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/) + * @see [Example: Get coordinates of the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/mouse-position/) + * @see [Example: Highlight features under the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/hover-styles/) + * @see [Example: Display a popup on hover](https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/) */ | 'mouseover' @@ -549,9 +564,9 @@ export type MapEvent = * map.on('mousemove', 'poi-label', () => { * console.log('A mousemove event has occurred on a visible portion of the poi-label layer.'); * }); - * @see [Get coordinates of the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/mouse-position/) - * @see [Highlight features under the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/hover-styles/) - * @see [Display a popup on over](https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/) + * @see [Example: Get coordinates of the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/mouse-position/) + * @see [Example: Highlight features under the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/hover-styles/) + * @see [Example: Display a popup on over](https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/) */ | 'mousemove' @@ -580,8 +595,8 @@ export type MapEvent = * map.on('click', 'poi-label', (e) => { * console.log(`A click event has occurred on a visible portion of the poi-label layer at ${e.lngLat}`); * }); - * @see [Measure distances](https://www.mapbox.com/mapbox-gl-js/example/measure/) - * @see [Center the map on a clicked symbol](https://www.mapbox.com/mapbox-gl-js/example/center-on-symbol/) + * @see [Example: Measure distances](https://www.mapbox.com/mapbox-gl-js/example/measure/) + * @see [Example: Center the map on a clicked symbol](https://www.mapbox.com/mapbox-gl-js/example/center-on-symbol/) */ | 'click' @@ -632,8 +647,8 @@ export type MapEvent = * map.on('mouseenter', 'water', () => { * console.log('A mouseenter event occurred on a visible portion of the water layer.'); * }); - * @see [Center the map on a clicked symbol](https://docs.mapbox.com/mapbox-gl-js/example/center-on-symbol/) - * @see [Display a popup on click](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/) + * @see [Example: Center the map on a clicked symbol](https://docs.mapbox.com/mapbox-gl-js/example/center-on-symbol/) + * @see [Example: Display a popup on click](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/) */ | 'mouseenter' @@ -659,8 +674,8 @@ export type MapEvent = * map.on('mouseleave', 'water', () => { * console.log('A mouseleave event occurred.'); * }); - * @see [Highlight features under the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/hover-styles/) - * @see [Display a popup on click](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/) + * @see [Example: Highlight features under the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/hover-styles/) + * @see [Example: Display a popup on click](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/) */ | 'mouseleave' @@ -735,7 +750,7 @@ export type MapEvent = * map.on('touchstart', () => { * console.log('A touchstart event occurred.'); * }); - * @see [Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) + * @see [Example: Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) */ | 'touchstart' @@ -753,7 +768,7 @@ export type MapEvent = * map.on('touchstart', () => { * console.log('A touchstart event occurred.'); * }); - * @see [Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) + * @see [Example: Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) */ | 'touchend' @@ -771,7 +786,7 @@ export type MapEvent = * map.on('touchmove', () => { * console.log('A touchmove event occurred.'); * }); - * @see [Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) + * @see [Example: Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) */ | 'touchmove' @@ -823,8 +838,8 @@ export type MapEvent = * map.on('move', () => { * console.log('A move event occurred.'); * }); - * @see [Display HTML clusters with custom properties](https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/) - * @see [Filter features within map view](https://docs.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/) + * @see [Example: Display HTML clusters with custom properties](https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/) + * @see [Example: Filter features within map view](https://docs.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/) */ | 'move' @@ -844,9 +859,9 @@ export type MapEvent = * map.on('moveend', () => { * console.log('A moveend event occurred.'); * }); - * @see [Play map locations as a slideshow](https://www.mapbox.com/mapbox-gl-js/example/playback-locations/) - * @see [Filter features within map view](https://www.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/) - * @see [Display HTML clusters with custom properties](https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/) + * @see [Example: Play map locations as a slideshow](https://www.mapbox.com/mapbox-gl-js/example/playback-locations/) + * @see [Example: Filter features within map view](https://www.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/) + * @see [Example: Display HTML clusters with custom properties](https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/) */ | 'moveend' @@ -901,7 +916,7 @@ export type MapEvent = * map.on('dragend', () => { * console.log('A dragend event occurred.'); * }); - * @see [Create a draggable marker](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-marker/) + * @see [Example: Create a draggable marker](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-marker/) */ | 'dragend' @@ -940,7 +955,7 @@ export type MapEvent = * map.on('zoom', () => { * console.log('A zoom event occurred.'); * }); - * @see [Update a choropleth layer by zoom level](https://www.mapbox.com/mapbox-gl-js/example/updating-choropleth/) + * @see [Example: Update a choropleth layer by zoom level](https://www.mapbox.com/mapbox-gl-js/example/updating-choropleth/) */ | 'zoom' @@ -1200,9 +1215,9 @@ export type MapEvent = * map.on('load', () => { * console.log('A load event occurred.'); * }); - * @see [Draw GeoJSON points](https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/) - * @see [Add live realtime data](https://www.mapbox.com/mapbox-gl-js/example/live-geojson/) - * @see [Animate a point](https://www.mapbox.com/mapbox-gl-js/example/animate-point-along-line/) + * @see [Example: Draw GeoJSON points](https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/) + * @see [Example: Add live realtime data](https://www.mapbox.com/mapbox-gl-js/example/live-geojson/) + * @see [Example: Animate a point](https://www.mapbox.com/mapbox-gl-js/example/animate-point-along-line/) */ | 'load' @@ -1304,7 +1319,7 @@ export type MapEvent = * map.on('data', () => { * console.log('A data event occurred.'); * }); - * @see [Display HTML clusters with custom properties](https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/) + * @see [Example: Display HTML clusters with custom properties](https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/) */ | 'data' @@ -1426,7 +1441,7 @@ export type MapEvent = * map.on('styleimagemissing', () => { * console.log('A styleimagemissing event occurred.'); * }); - * @see [Generate and add a missing icon to the map](https://mapbox.com/mapbox-gl-js/example/add-image-missing-generated/) + * @see [Example: Generate and add a missing icon to the map](https://mapbox.com/mapbox-gl-js/example/add-image-missing-generated/) */ | 'styleimagemissing' diff --git a/src/ui/free_camera.js b/src/ui/free_camera.js index 7e339168b1f..1d61774ddc4 100644 --- a/src/ui/free_camera.js +++ b/src/ui/free_camera.js @@ -96,9 +96,7 @@ export function orientationFromFrame(forward: vec3, up: vec3): ?quat { right [1, 0, 0] Orientation can be set freely but certain constraints still apply: - Orientation must be representable with only pitch and bearing. - - Pitch has an upper limit. - * @see [Animate the camera around a point in 3D terrain](https://docs.mapbox.com/mapbox-gl-js/example/free-camera-point/) - * @see [Animate the camera along a path](https://docs.mapbox.com/mapbox-gl-js/example/free-camera-path/) + - Pitch has an upper limit * @example * const camera = map.getFreeCameraOptions(); * @@ -109,6 +107,8 @@ export function orientationFromFrame(forward: vec3, up: vec3): ?quat { * camera.lookAtPoint([138.73036, 35.36197]); * * map.setFreeCameraOptions(camera); + * @see [Example: Animate the camera around a point in 3D terrain](https://docs.mapbox.com/mapbox-gl-js/example/free-camera-point/) + * @see [Example: Animate the camera along a path](https://docs.mapbox.com/mapbox-gl-js/example/free-camera-path/) */ class FreeCameraOptions { orientation: ?quat; diff --git a/src/ui/handler/box_zoom.js b/src/ui/handler/box_zoom.js index dbc54a0287b..96c6dacac87 100644 --- a/src/ui/handler/box_zoom.js +++ b/src/ui/handler/box_zoom.js @@ -10,8 +10,8 @@ import type Map from '../map.js'; * The `BoxZoomHandler` allows the user to zoom the map to fit within a bounding box. * The bounding box is defined by clicking and holding `shift` while dragging the cursor. * - * @see [Toggle interactions](https://docs.mapbox.com/mapbox-gl-js/example/toggle-interaction-handlers/) - * @see [Highlight features within a bounding box](https://docs.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/) + * @see [Example: Toggle interactions](https://docs.mapbox.com/mapbox-gl-js/example/toggle-interaction-handlers/) + * @see [Example: Highlight features within a bounding box](https://docs.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/) */ class BoxZoomHandler { _map: Map; diff --git a/src/ui/handler/keyboard.js b/src/ui/handler/keyboard.js index 69fb0482dcf..eb04f773aae 100644 --- a/src/ui/handler/keyboard.js +++ b/src/ui/handler/keyboard.js @@ -22,9 +22,9 @@ const defaultOptions = { * - `Shift+⇡`: Increase the pitch by 10 degrees. * - `Shift+⇣`: Decrease the pitch by 10 degrees. * - * @see [Toggle interactions](https://docs.mapbox.com/mapbox-gl-js/example/toggle-interaction-handlers/) - * @see [Navigate the map with game-like controls](https://docs.mapbox.com/mapbox-gl-js/example/game-controls/) - * @see [Display map navigation controls](https://docs.mapbox.com/mapbox-gl-js/example/navigation/) + * @see [Example: Toggle interactions](https://docs.mapbox.com/mapbox-gl-js/example/toggle-interaction-handlers/) + * @see [Example: Navigate the map with game-like controls](https://docs.mapbox.com/mapbox-gl-js/example/game-controls/) + * @see [Example: Display map navigation controls](https://docs.mapbox.com/mapbox-gl-js/example/navigation/) */ class KeyboardHandler { _enabled: boolean; diff --git a/src/ui/handler/shim/dblclick_zoom.js b/src/ui/handler/shim/dblclick_zoom.js index 15aaa47b694..96593573b2a 100644 --- a/src/ui/handler/shim/dblclick_zoom.js +++ b/src/ui/handler/shim/dblclick_zoom.js @@ -7,7 +7,7 @@ import type TapZoomHandler from './../tap_zoom.js'; * The `DoubleClickZoomHandler` allows the user to zoom the map at a point by * double clicking or double tapping. * - * @see [Toggle interactions](https://docs.mapbox.com/mapbox-gl-js/example/toggle-interaction-handlers/) + * @see [Example: Toggle interactions](https://docs.mapbox.com/mapbox-gl-js/example/toggle-interaction-handlers/) */ export default class DoubleClickZoomHandler { diff --git a/src/ui/handler/shim/drag_pan.js b/src/ui/handler/shim/drag_pan.js index 786341cebce..b7a42ac5c7b 100644 --- a/src/ui/handler/shim/drag_pan.js +++ b/src/ui/handler/shim/drag_pan.js @@ -14,8 +14,8 @@ export type DragPanOptions = { * The `DragPanHandler` allows the user to pan the map by clicking and dragging * the cursor. * - * @see [Toggle interactions](https://docs.mapbox.com/mapbox-gl-js/example/toggle-interaction-handlers/) - * @see [Highlight features within a bounding box](https://docs.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/) + * @see [Example: Toggle interactions](https://docs.mapbox.com/mapbox-gl-js/example/toggle-interaction-handlers/) + * @see [Example: Highlight features within a bounding box](https://docs.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/) */ export default class DragPanHandler { diff --git a/src/ui/handler/shim/drag_rotate.js b/src/ui/handler/shim/drag_rotate.js index 25177fde8e6..884fc1a5495 100644 --- a/src/ui/handler/shim/drag_rotate.js +++ b/src/ui/handler/shim/drag_rotate.js @@ -6,8 +6,8 @@ import type {MouseRotateHandler, MousePitchHandler} from '../mouse.js'; * The `DragRotateHandler` allows the user to rotate the map by clicking and * dragging the cursor while holding the right mouse button or `ctrl` key. * - * @see [Toggle interactions](https://docs.mapbox.com/mapbox-gl-js/example/toggle-interaction-handlers/) - * @see [Disable map rotation](https://docs.mapbox.com/mapbox-gl-js/example/disable-rotation/) + * @see [Example: Toggle interactions](https://docs.mapbox.com/mapbox-gl-js/example/toggle-interaction-handlers/) + * @see [Example: Disable map rotation](https://docs.mapbox.com/mapbox-gl-js/example/disable-rotation/) */ export default class DragRotateHandler { diff --git a/src/ui/handler/shim/touch_zoom_rotate.js b/src/ui/handler/shim/touch_zoom_rotate.js index e6ecb154f98..cf41d2ba553 100644 --- a/src/ui/handler/shim/touch_zoom_rotate.js +++ b/src/ui/handler/shim/touch_zoom_rotate.js @@ -10,7 +10,7 @@ import type TapDragZoomHandler from '../tap_drag_zoom.js'; * They can zoom with one finger by double tapping and dragging. On the second tap, * hold the finger down and drag up or down to zoom in or out. * - * @see [Toggle interactions](https://docs.mapbox.com/mapbox-gl-js/example/toggle-interaction-handlers/) + * @see [Example: Toggle interactions](https://docs.mapbox.com/mapbox-gl-js/example/toggle-interaction-handlers/) */ export default class TouchZoomRotateHandler { diff --git a/src/ui/handler/touch_zoom_rotate.js b/src/ui/handler/touch_zoom_rotate.js index bb1194104ca..199fd6cec89 100644 --- a/src/ui/handler/touch_zoom_rotate.js +++ b/src/ui/handler/touch_zoom_rotate.js @@ -198,7 +198,7 @@ const ALLOWED_SINGLE_TOUCH_TIME = 100; /** * The `TouchPitchHandler` allows the user to pitch the map by dragging up and down with two fingers. * - * @see [Set pitch and bearing](https://docs.mapbox.com/mapbox-gl-js/example/set-perspective/) + * @see [Example: Set pitch and bearing](https://docs.mapbox.com/mapbox-gl-js/example/set-perspective/) */ export class TouchPitchHandler extends TwoTouchHandler { diff --git a/src/ui/map.js b/src/ui/map.js index 1938b395de5..570402cb9d7 100755 --- a/src/ui/map.js +++ b/src/ui/map.js @@ -233,7 +233,7 @@ const defaultOptions = { * @param {boolean} [options.doubleClickZoom=true] If `true`, the "double click to zoom" interaction is enabled (see {@link DoubleClickZoomHandler}). * @param {boolean|Object} [options.touchZoomRotate=true] If `true`, the "pinch to rotate and zoom" interaction is enabled. An `Object` value is passed as options to {@link TouchZoomRotateHandler#enable}. * @param {boolean|Object} [options.touchPitch=true] If `true`, the "drag to pitch" interaction is enabled. An `Object` value is passed as options to {@link TouchPitchHandler#enable}. - * @param {boolean} [options.trackResize=true] If `true`, the map will automatically resize when the browser window resizes. + * @param {boolean} [options.trackResize=true] If `true`, the map will automatically resize when the browser window resizes. * @param {LngLatLike} [options.center=[0, 0]] The inital geographical centerpoint of the map. If `center` is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `[0, 0]` Note: Mapbox GL uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match GeoJSON. * @param {number} [options.zoom=0] The initial zoom level of the map. If `zoom` is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0`. * @param {number} [options.bearing=0] The initial bearing (rotation) of the map, measured in degrees counter-clockwise from north. If `bearing` is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0`. @@ -241,17 +241,17 @@ const defaultOptions = { * @param {LngLatBoundsLike} [options.bounds] The initial bounds of the map. If `bounds` is specified, it overrides `center` and `zoom` constructor options. * @param {Object} [options.fitBoundsOptions] A {@link Map#fitBounds} options object to use _only_ when fitting the initial `bounds` provided above. * @param {boolean} [options.optimizeForTerrain=true] With terrain on, if `true`, the map will render for performance priority, which may lead to layer reordering allowing to maximize performance (layers that are draped over terrain will be drawn first, including fill, line, background, hillshade and raster). Otherwise, if set to `false`, the map will always be drawn for layer order priority. - * @param {boolean} [options.renderWorldCopies=true] If `true`, multiple copies of the world will be rendered side by side beyond -180 and 180 degrees longitude. If set to `false`: + * @param {boolean} [options.renderWorldCopies=true] If `true`, multiple copies of the world will be rendered side by side beyond -180 and 180 degrees longitude. If set to `false`: * - When the map is zoomed out far enough that a single representation of the world does not fill the map's entire * container, there will be blank space beyond 180 and -180 degrees longitude. * - Features that cross 180 and -180 degrees longitude will be cut in two (with one portion on the right edge of the * map and the other on the left edge of the map) at every zoom level. - * @param {number} [options.maxTileCacheSize=null] The maximum number of tiles stored in the tile cache for a given source. If omitted, the cache will be dynamically sized based on the current viewport. - * @param {string} [options.localIdeographFontFamily='sans-serif'] Defines a CSS + * @param {number} [options.maxTileCacheSize=null] The maximum number of tiles stored in the tile cache for a given source. If omitted, the cache will be dynamically sized based on the current viewport. + * @param {string} [options.localIdeographFontFamily='sans-serif'] Defines a CSS. * font-family for locally overriding generation of glyphs in the 'CJK Unified Ideographs', 'Hiragana', 'Katakana', 'Hangul Syllables' and 'CJK Symbols and Punctuation' ranges. * In these ranges, font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold). - * Set to `false`, to enable font settings from the map's style for these glyph ranges. Note that [Mapbox Studio](https://studio.mapbox.com/) sets this value to `false` by default. - * The purpose of this option is to avoid bandwidth-intensive glyph server requests. (See [Use locally generated ideographs](https://www.mapbox.com/mapbox-gl-js/example/local-ideographs)). + * Set to `false`, to enable font settings from the map's style for these glyph ranges. Note that [Mapbox Studio](https://studio.mapbox.com/) sets this value to `false` by default. + * The purpose of this option is to avoid bandwidth-intensive glyph server requests. (See [Use locally generated ideographs](https://www.mapbox.com/mapbox-gl-js/example/local-ideographs).) * @param {string} [options.localFontFamily=false] Defines a CSS * font-family for locally overriding generation of all glyphs. Font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold). * If set, this option override the setting in localIdeographFontFamily. @@ -282,9 +282,9 @@ const defaultOptions = { * } * } * }); - * @see [Display a map on a webpage](https://docs.mapbox.com/mapbox-gl-js/example/simple-map/) - * @see [Display a map with a custom style](https://docs.mapbox.com/mapbox-gl-js/example/custom-style-id/) - * @see [Check if Mapbox GL JS is supported](https://docs.mapbox.com/mapbox-gl-js/example/check-for-support/) + * @see [Example: Display a map on a webpage](https://docs.mapbox.com/mapbox-gl-js/example/simple-map/) + * @see [Example: Display a map with a custom style](https://docs.mapbox.com/mapbox-gl-js/example/custom-style-id/) + * @see [Example: Check if Mapbox GL JS is supported](https://docs.mapbox.com/mapbox-gl-js/example/check-for-support/) */ class Map extends Camera { style: Style; @@ -552,7 +552,7 @@ class Map extends Camera { * @example * // Add zoom and rotation controls to the map. * map.addControl(new mapboxgl.NavigationControl()); - * @see [Display map navigation controls](https://www.mapbox.com/mapbox-gl-js/example/navigation/) + * @see [Example: Display map navigation controls](https://www.mapbox.com/mapbox-gl-js/example/navigation/) */ addControl(control: IControl, position?: ControlPosition) { if (position === undefined) { @@ -677,7 +677,8 @@ class Map extends Camera { /** * Returns the maximum geographical bounds the map is constrained to, or `null` if none set. * - * @returns The map object. + * @returns {Map} The map object. + * * @example * const maxBounds = map.getMaxBounds(); */ @@ -873,7 +874,7 @@ class Map extends Camera { * @returns {boolean} Returns `renderWorldCopies` boolean. * @example * const worldCopiesRendered = map.getRenderWorldCopies(); - * @see [Render world copies](https://docs.mapbox.com/mapbox-gl-js/example/render-world-copies/) + * @see [Example: Render world copies](https://docs.mapbox.com/mapbox-gl-js/example/render-world-copies/) */ getRenderWorldCopies() { return this.transform.renderWorldCopies; } @@ -890,7 +891,7 @@ class Map extends Camera { * @returns {Map} Returns itself to allow for method chaining. * @example * map.setRenderWorldCopies(true); - * @see [Render world copies](https://docs.mapbox.com/mapbox-gl-js/example/render-world-copies/) + * @see [Example: Render world copies](https://docs.mapbox.com/mapbox-gl-js/example/render-world-copies/) */ setRenderWorldCopies(renderWorldCopies?: ?boolean) { this.transform.renderWorldCopies = renderWorldCopies; @@ -1110,11 +1111,11 @@ class Map extends Camera { * .setHTML(`Country name: ${e.features[0].properties.name}`) * .addTo(map); * }); - * @see [Add 3D terrain to a map](https://docs.mapbox.com/mapbox-gl-js/example/add-terrain/) - * @see [Center the map on a clicked symbol](https://docs.mapbox.com/mapbox-gl-js/example/center-on-symbol/) - * @see [Create a draggable marker](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) - * @see [Create a hover effect](https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/) - * @see [Display popup on click](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/) + * @see [Example: Add 3D terrain to a map](https://docs.mapbox.com/mapbox-gl-js/example/add-terrain/) + * @see [Example: Center the map on a clicked symbol](https://docs.mapbox.com/mapbox-gl-js/example/center-on-symbol/) + * @see [Example: Create a draggable marker](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) + * @see [Example: Create a hover effect](https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/) + * @see [Example: Display popup on click](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/) */ on(type: MapEvent, layerId: any, listener: any) { if (listener === undefined) { @@ -1163,9 +1164,9 @@ class Map extends Camera { * map.once('touchstart', 'my-point-layer', (e) => { * console.log(`The first map touch on the point layer was at: ${e.lnglat}`); * }); - * @see [Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) - * @see [Animate the camera around a point with 3D terrain](https://docs.mapbox.com/mapbox-gl-js/example/free-camera-point/) - * @see [Play map locations as a slideshow](https://docs.mapbox.com/mapbox-gl-js/example/playback-locations/) + * @see [Example: Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) + * @see [Example: Animate the camera around a point with 3D terrain](https://docs.mapbox.com/mapbox-gl-js/example/free-camera-point/) + * @see [Example: Play map locations as a slideshow](https://docs.mapbox.com/mapbox-gl-js/example/playback-locations/) */ once(type: MapEvent, layerId: any, listener: any) { @@ -1205,7 +1206,7 @@ class Map extends Camera { * map.on('mousemove', onMove); * map.once('mouseup', onUp); * }); - * @see [Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) + * @see [Example: Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) */ off(type: MapEvent, layerId: any, listener: any) { if (listener === undefined) { @@ -1309,9 +1310,9 @@ class Map extends Camera { * @example * // Query all rendered features from a single layer * const features = map.queryRenderedFeatures({layers: ['my-layer-name']}); - * @see [Get features under the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures/) - * @see [Highlight features within a bounding box](https://www.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/) - * @see [Filter features within map view](https://www.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/) + * @see [Example: Get features under the mouse pointer](https://www.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures/) + * @see [Example: Highlight features within a bounding box](https://www.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/) + * @see [Example: Filter features within map view](https://www.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/) */ queryRenderedFeatures(geometry?: PointLike | [PointLike, PointLike], options?: Object) { // The first parameter can be omitted entirely, making this effectively an overloaded method @@ -1373,7 +1374,7 @@ class Map extends Camera { * sourceLayer: 'your-source-layer' * }); * - * @see [Highlight features containing similar data](https://www.mapbox.com/mapbox-gl-js/example/query-similar-features/) + * @see [Example: Highlight features containing similar data](https://www.mapbox.com/mapbox-gl-js/example/query-similar-features/) */ querySourceFeatures(sourceId: string, parameters: ?{sourceLayer: ?string, filter: ?Array, validate?: boolean}) { return this.style.querySourceFeatures(sourceId, parameters); @@ -1403,7 +1404,7 @@ class Map extends Camera { * @example * map.setStyle("mapbox://styles/mapbox/streets-v11"); * - * @see [Change a map's style](https://www.mapbox.com/mapbox-gl-js/example/setstyle/) + * @see [Example: Change a map's style](https://www.mapbox.com/mapbox-gl-js/example/setstyle/) */ setStyle(style: StyleSpecification | string | null, options?: {diff?: boolean} & StyleOptions) { options = extend({}, {localIdeographFontFamily: this._localIdeographFontFamily, localFontFamily: this._localFontFamily}, options); @@ -1546,9 +1547,9 @@ class Map extends Camera { * } * } * }); - * @see Vector source: [Show and hide layers](https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/) - * @see GeoJSON source: [Add live realtime data](https://docs.mapbox.com/mapbox-gl-js/example/live-geojson/) - * @see Raster DEM source: [Add hillshading](https://docs.mapbox.com/mapbox-gl-js/example/hillshade/) + * @see Example: Vector source: [Show and hide layers](https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/) + * @see Example: GeoJSON source: [Add live realtime data](https://docs.mapbox.com/mapbox-gl-js/example/live-geojson/) + * @see Example: Raster DEM source: [Add hillshading](https://docs.mapbox.com/mapbox-gl-js/example/hillshade/) */ addSource(id: string, source: SourceSpecification) { this._lazyInitEmptyStyle(); @@ -1640,9 +1641,9 @@ class Map extends Camera { * [Sources](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/) page. * @example * const sourceObject = map.getSource('points'); - * @see [Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) - * @see [Animate a point](https://docs.mapbox.com/mapbox-gl-js/example/animate-point-along-line/) - * @see [Add live realtime data](https://docs.mapbox.com/mapbox-gl-js/example/live-geojson/) + * @see [Example: Create a draggable point](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/) + * @see [Example: Animate a point](https://docs.mapbox.com/mapbox-gl-js/example/animate-point-along-line/) + * @see [Example: Add live realtime data](https://docs.mapbox.com/mapbox-gl-js/example/live-geojson/) */ getSource(id: string) { return this.style.getSource(id); @@ -1690,8 +1691,8 @@ class Map extends Camera { * }); * * - * @see Use `HTMLImageElement`: [Add an icon to the map](https://www.mapbox.com/mapbox-gl-js/example/add-image/) - * @see Use `ImageData`: [Add a generated icon to the map](https://www.mapbox.com/mapbox-gl-js/example/add-image-generated/) + * @see Example: Use `HTMLImageElement`: [Add an icon to the map](https://www.mapbox.com/mapbox-gl-js/example/add-image/) + * @see Example: Use `ImageData`: [Add a generated icon to the map](https://www.mapbox.com/mapbox-gl-js/example/add-image-generated/) */ addImage(id: string, image: HTMLImageElement | ImageBitmap | ImageData | {width: number, height: number, data: Uint8Array | Uint8ClampedArray} | StyleImageInterface, @@ -1780,7 +1781,7 @@ class Map extends Camera { * * @param id The ID of the image. * - * @returns {boolean} A Boolean indicating whether the image exists. + * @returns {boolean} A Boolean indicating whether the image exists. * @example * // Check if an image with the ID 'cat' exists in * // the style's sprite. @@ -1826,7 +1827,7 @@ class Map extends Camera { * map.addImage('kitten', image); * }); * - * @see [Add an icon to the map](https://www.mapbox.com/mapbox-gl-js/example/add-image/) + * @see [Example: Add an icon to the map](https://www.mapbox.com/mapbox-gl-js/example/add-image/) */ loadImage(url: string, callback: Function) { getImage(this._requestManager.transformRequest(url, ResourceType.Image), (err, img) => { @@ -1954,9 +1955,9 @@ class Map extends Camera { * // Add the layer before the existing `cities` layer * }, 'cities'); * - * @see [Create and style clusters](https://docs.mapbox.com/mapbox-gl-js/example/cluster/) - * @see [Add a vector tile source](https://docs.mapbox.com/mapbox-gl-js/example/vector-source/) - * @see [Add a WMS source](https://docs.mapbox.com/mapbox-gl-js/example/wms/) + * @see [Example: Create and style clusters](https://docs.mapbox.com/mapbox-gl-js/example/cluster/) + * @see [Example: Add a vector tile source](https://docs.mapbox.com/mapbox-gl-js/example/vector-source/) + * @see [Example: Add a WMS source](https://docs.mapbox.com/mapbox-gl-js/example/wms/) */ addLayer(layer: LayerSpecification | CustomLayerInterface, beforeId?: string) { this._lazyInitEmptyStyle(); @@ -2008,8 +2009,8 @@ class Map extends Camera { * @example * const stateDataLayer = map.getLayer('state-data'); * - * @see [Filter symbols by toggling a list](https://www.mapbox.com/mapbox-gl-js/example/filter-markers/) - * @see [Filter symbols by text input](https://www.mapbox.com/mapbox-gl-js/example/filter-markers-by-input/) + * @see [Example: Filter symbols by toggling a list](https://www.mapbox.com/mapbox-gl-js/example/filter-markers/) + * @see [Example: Filter symbols by text input](https://www.mapbox.com/mapbox-gl-js/example/filter-markers-by-input/) */ getLayer(id: string) { return this.style.getLayer(id); @@ -2068,10 +2069,10 @@ class Map extends Camera { * // remove the filter for the 'bike-docks' style layer * map.setFilter('bike-docks', null); * - * @see [Filter features within map view](https://www.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/) - * @see [Highlight features containing similar data](https://www.mapbox.com/mapbox-gl-js/example/query-similar-features/) - * @see [Create a timeline animation](https://www.mapbox.com/mapbox-gl-js/example/timeline-animation/) - * @see Tutorial: [Show changes over time](https://docs.mapbox.com/help/tutorials/show-changes-over-time/) + * @see [Example: Filter features within map view](https://www.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/) + * @see [Example: Highlight features containing similar data](https://www.mapbox.com/mapbox-gl-js/example/query-similar-features/) + * @see [Example: Create a timeline animation](https://www.mapbox.com/mapbox-gl-js/example/timeline-animation/) + * @see [Tutorial: Show changes over time](https://docs.mapbox.com/help/tutorials/show-changes-over-time/) */ setFilter(layerId: string, filter: ?FilterSpecification, options: StyleSetterOptions = {}) { this.style.setFilter(layerId, filter, options); @@ -2102,9 +2103,9 @@ class Map extends Camera { * @returns {Map} Returns itself to allow for method chaining. * @example * map.setPaintProperty('my-layer', 'fill-color', '#faafee'); - * @see [Change a layer's color with buttons](https://www.mapbox.com/mapbox-gl-js/example/color-switcher/) - * @see [Adjust a layer's opacity](https://www.mapbox.com/mapbox-gl-js/example/adjust-layer-opacity/) - * @see [Create a draggable point](https://www.mapbox.com/mapbox-gl-js/example/drag-a-point/) + * @see [Example: Change a layer's color with buttons](https://www.mapbox.com/mapbox-gl-js/example/color-switcher/) + * @see [Example: Adjust a layer's opacity](https://www.mapbox.com/mapbox-gl-js/example/adjust-layer-opacity/) + * @see [Example: Create a draggable point](https://www.mapbox.com/mapbox-gl-js/example/drag-a-point/) */ setPaintProperty(layerId: string, name: string, value: any, options: StyleSetterOptions = {}) { this.style.setPaintProperty(layerId, name, value, options); @@ -2135,7 +2136,7 @@ class Map extends Camera { * @returns {Map} Returns itself to allow for method chaining. * @example * map.setLayoutProperty('my-layer', 'visibility', 'none'); - * @see [Show and hide layers](https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/) + * @see [Example: Show and hide layers](https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/) */ setLayoutProperty(layerId: string, name: string, value: any, options: StyleSetterOptions = {}) { this.style.setLayoutProperty(layerId, name, value, options); @@ -2164,7 +2165,7 @@ class Map extends Camera { * @returns {Map} Returns itself to allow for method chaining. * @example * const layerVisibility = map.getLayoutProperty('my-layer', 'visibility'); - * @see [Show and hide layers](https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/) + * @see [Example: Show and hide layers](https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/) */ setLight(light: LightSpecification, options: StyleSetterOptions = {}) { this._lazyInitEmptyStyle(); @@ -2230,7 +2231,7 @@ class Map extends Camera { * "color": 'white', * "horizon-blend": 0.1 * }); - * @see [Add fog to a map](https://docs.mapbox.com/mapbox-gl-js/example/add-fog/) + * @see [Example: Add fog to a map](https://docs.mapbox.com/mapbox-gl-js/example/add-fog/) */ setFog(fog: FogSpecification) { this._lazyInitEmptyStyle(); @@ -2280,7 +2281,7 @@ class Map extends Camera { * @example * const coordinate = [-122.420679, 37.772537]; * const elevation = map.queryTerrainElevation(coordinate); - * @see [Query terrain elevation](https://docs.mapbox.com/mapbox-gl-js/example/query-terrain-elevation/) + * @see [Example: Query terrain elevation](https://docs.mapbox.com/mapbox-gl-js/example/query-terrain-elevation/) */ queryTerrainElevation(lnglat: LngLatLike, options: ElevationQueryOptions): number | null { const elevation = this.transform.elevation; @@ -2326,8 +2327,8 @@ class Map extends Camera { * } * }); * - * @see [Create a hover effect](https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/) - * @see Tutorial: [Create interactive hover effects with Mapbox GL JS](https://docs.mapbox.com/help/tutorials/create-interactive-hover-effects-with-mapbox-gl-js/) + * @see [Example: Create a hover effect](https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/) + * @see [Tutorial: Create interactive hover effects with Mapbox GL JS](https://docs.mapbox.com/help/tutorials/create-interactive-hover-effects-with-mapbox-gl-js/) */ setFeatureState(feature: { source: string; sourceLayer?: string; id: string | number; }, state: Object) { this.style.setFeatureState(feature, state); @@ -2442,8 +2443,8 @@ class Map extends Camera { * @returns {HTMLElement} The container of the map's ``. * @example * const canvasContainer = map.getCanvasContainer(); - * @see [Create a draggable point](https://www.mapbox.com/mapbox-gl-js/example/drag-a-point/) - * @see [Highlight features within a bounding box](https://www.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/) + * @see [Example: Create a draggable point](https://www.mapbox.com/mapbox-gl-js/example/drag-a-point/) + * @see [Example: Highlight features within a bounding box](https://www.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/) */ getCanvasContainer() { return this._canvasContainer; @@ -2455,9 +2456,9 @@ class Map extends Camera { * @returns {HTMLCanvasElement} The map's `` element. * @example * const canvas = map.getCanvas(); - * @see [Measure distances](https://www.mapbox.com/mapbox-gl-js/example/measure/) - * @see [Display a popup on hover](https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/) - * @see [Center the map on a clicked symbol](https://www.mapbox.com/mapbox-gl-js/example/center-on-symbol/) + * @see [Example: Measure distances](https://www.mapbox.com/mapbox-gl-js/example/measure/) + * @see [Example: Display a popup on hover](https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/) + * @see [Example: Center the map on a clicked symbol](https://www.mapbox.com/mapbox-gl-js/example/center-on-symbol/) */ getCanvas() { return this._canvas; @@ -3037,8 +3038,8 @@ class Map extends Camera { * * @example * map.triggerRepaint(); - * @see [Add a 3D model](https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/) - * @see [Add an animated icon to the map](https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/) + * @see [Example: Add a 3D model](https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/) + * @see [Example: Add an animated icon to the map](https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/) */ triggerRepaint() { this._triggerFrame(true); @@ -3326,7 +3327,7 @@ function removeNode(node) { * A [`Point` geometry](https://github.com/mapbox/point-geometry) object, which has * `x` and `y` properties representing screen coordinates in pixels. * - * @typedef {Object} Point + * @typedef {Point} Point * @example * const point = new mapboxgl.Point(-77, 38); */ diff --git a/src/ui/marker.js b/src/ui/marker.js index 4cb7e64c475..2935786f44b 100644 --- a/src/ui/marker.js +++ b/src/ui/marker.js @@ -45,18 +45,19 @@ export const TERRAIN_OCCLUDED_OPACITY = 0.2; * @param {string} [options.pitchAlignment='auto'] `map` aligns the `Marker` to the plane of the map. `viewport` aligns the `Marker` to the plane of the viewport. `auto` automatically matches the value of `rotationAlignment`. * @param {string} [options.rotationAlignment='auto'] `map` aligns the `Marker`'s rotation relative to the map, maintaining a bearing as the map rotates. `viewport` aligns the `Marker`'s rotation relative to the viewport, agnostic to map rotations. `auto` is equivalent to `viewport`. * @example + * // Create a new marker. * const marker = new mapboxgl.Marker() * .setLngLat([30.5, 50.5]) * .addTo(map); * @example - * // Set options + * // Set marker options. * const marker = new mapboxgl.Marker({ * color: "#FFFFFF", * draggable: true * }).setLngLat([30.5, 50.5]) * .addTo(map); - * @see [Add custom icons with Markers](https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/) - * @see [Create a draggable Marker](https://www.mapbox.com/mapbox-gl-js/example/drag-a-marker/) + * @see [Example: Add custom icons with Markers](https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/) + * @see [Example: Create a draggable Marker](https://www.mapbox.com/mapbox-gl-js/example/drag-a-marker/) */ export default class Marker extends Evented { _map: Map; @@ -308,7 +309,7 @@ export default class Marker extends Evented { * const lngLat = marker.getLngLat(); * // Print the marker's longitude and latitude values in the console * console.log(`Longitude: ${lngLat.lng}, Latitude: ${lngLat.lat}`); - * @see [Create a draggable Marker](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-marker/) + * @see [Example: Create a draggable Marker](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-marker/) */ getLngLat() { return this._lngLat; @@ -320,13 +321,13 @@ export default class Marker extends Evented { * @param {LngLat} lnglat A {@link LngLat} describing where the marker should be located. * @returns {Marker} Returns itself to allow for method chaining. * @example - * // Create a new marker, set the longitude and latitude, and add it to the map + * // Create a new marker, set the longitude and latitude, and add it to the map. * new mapboxgl.Marker() * .setLngLat([-65.017, -16.457]) * .addTo(map); - * @see [Add custom icons with Markers](https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/) - * @see [Create a draggable Marker](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-marker/) - * @see [Add a marker using a place name](https://docs.mapbox.com/mapbox-gl-js/example/marker-from-geocode/) + * @see [Example: Add custom icons with Markers](https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/) + * @see [Example: Create a draggable Marker](https://docs.mapbox.com/mapbox-gl-js/example/drag-a-marker/) + * @see [Example: Add a marker using a place name](https://docs.mapbox.com/mapbox-gl-js/example/marker-from-geocode/) */ setLngLat(lnglat: LngLatLike) { this._lngLat = LngLat.convert(lnglat); @@ -358,7 +359,7 @@ export default class Marker extends Evented { * .setLngLat([0, 0]) * .setPopup(new mapboxgl.Popup().setHTML("

Hello World!

")) // add popup * .addTo(map); - * @see [Attach a popup to a marker instance](https://docs.mapbox.com/mapbox-gl-js/example/set-popup/) + * @see [Example: Attach a popup to a marker instance](https://docs.mapbox.com/mapbox-gl-js/example/set-popup/) */ setPopup(popup: ?Popup) { if (this._popup) { diff --git a/src/ui/popup.js b/src/ui/popup.js index 450c2238bf5..484a8d9707a 100644 --- a/src/ui/popup.js +++ b/src/ui/popup.js @@ -94,10 +94,10 @@ const focusQuerySelector = [ * .setHTML("

Hello World!

") * .setMaxWidth("300px") * .addTo(map); - * @see [Display a popup](https://www.mapbox.com/mapbox-gl-js/example/popup/) - * @see [Display a popup on hover](https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/) - * @see [Display a popup on click](https://www.mapbox.com/mapbox-gl-js/example/popup-on-click/) - * @see [Attach a popup to a marker instance](https://www.mapbox.com/mapbox-gl-js/example/set-popup/) + * @see [Example: Display a popup](https://www.mapbox.com/mapbox-gl-js/example/popup/) + * @see [Example: Display a popup on hover](https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/) + * @see [Example: Display a popup on click](https://www.mapbox.com/mapbox-gl-js/example/popup-on-click/) + * @see [Example: Attach a popup to a marker instance](https://www.mapbox.com/mapbox-gl-js/example/set-popup/) */ export default class Popup extends Evented { _map: Map; @@ -126,10 +126,10 @@ export default class Popup extends Evented { * .setLngLat([0, 0]) * .setHTML("

Null Island

") * .addTo(map); - * @see [Display a popup](https://docs.mapbox.com/mapbox-gl-js/example/popup/) - * @see [Display a popup on hover](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-hover/) - * @see [Display a popup on click](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/) - * @see [Show polygon information on click](https://docs.mapbox.com/mapbox-gl-js/example/polygon-popup-on-click/) + * @see [Example: Display a popup](https://docs.mapbox.com/mapbox-gl-js/example/popup/) + * @see [Example: Display a popup on hover](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-hover/) + * @see [Example: Display a popup on click](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/) + * @see [Example: Show polygon information on click](https://docs.mapbox.com/mapbox-gl-js/example/polygon-popup-on-click/) */ addTo(map: Map) { if (this._map) this.remove(); @@ -183,6 +183,8 @@ export default class Popup extends Evented { } /** + * Checks if a popup is open. + * * @returns {boolean} `true` if the popup is open, `false` if it is closed. * @example * const isPopupOpen = popup.isOpen(); @@ -366,10 +368,10 @@ export default class Popup extends Evented { * .setLngLat(e.lngLat) * .setHTML("

Hello World!

") * .addTo(map); - * @see [Display a popup](https://docs.mapbox.com/mapbox-gl-js/example/popup/) - * @see [Display a popup on hover](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-hover/) - * @see [Display a popup on click](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/) - * @see [Attach a popup to a marker instance](https://docs.mapbox.com/mapbox-gl-js/example/set-popup/) + * @see [Example: Display a popup](https://docs.mapbox.com/mapbox-gl-js/example/popup/) + * @see [Example: Display a popup on hover](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-hover/) + * @see [Example: Display a popup on click](https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/) + * @see [Example: Attach a popup to a marker instance](https://docs.mapbox.com/mapbox-gl-js/example/set-popup/) */ setHTML(html: string) { const frag = window.document.createDocumentFragment(); diff --git a/src/util/browser.js b/src/util/browser.js index bd9e6497d40..dae97193280 100755 --- a/src/util/browser.js +++ b/src/util/browser.js @@ -15,7 +15,7 @@ let stubTime; const exported = { /** * Returns either performance.now() or a value set by setNow. - * @returns Time value in milliseconds. + * @returns {number} Time value in milliseconds. */ now(): number { if (stubTime !== undefined) { @@ -57,7 +57,7 @@ const exported = { get devicePixelRatio() { return window.devicePixelRatio; }, get prefersReducedMotion(): boolean { if (!window.matchMedia) return false; - //Lazily initialize media query + // Lazily initialize media query. if (reducedMotionQuery == null) { reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); } diff --git a/src/util/dispatcher.js b/src/util/dispatcher.js index a96ca71b804..50c6e118f3e 100644 --- a/src/util/dispatcher.js +++ b/src/util/dispatcher.js @@ -56,7 +56,7 @@ class Dispatcher { /** * Acquires an actor to dispatch messages to. The actors are distributed in round-robin fashion. - * @returns An actor object backed by a web worker for processing messages. + * @returns {Actor} An actor object backed by a web worker for processing messages. */ getActor(): Actor { assert(this.actors.length); diff --git a/src/util/evented.js b/src/util/evented.js index 63538792413..745ebea16de 100644 --- a/src/util/evented.js +++ b/src/util/evented.js @@ -170,7 +170,6 @@ export class Evented { /** * Bubble all events fired by this instance of Evented to this parent instance of Evented. * - * @private * @returns {Object} `this` * @private */ diff --git a/test/release/index.js b/test/release/index.js index 3e85a25cd8a..9f8623dc421 100644 --- a/test/release/index.js +++ b/test/release/index.js @@ -107,6 +107,10 @@ const pages = [ "key": "image-on-a-map", "title": "Image Source" }, + { + "key": "locate-user", + "title": "Locate the user" + }, { "key": "extrusion-query", "url": "./extrusion-query.html",