Skip to content

Commit

Permalink
Fix sources (#2795)
Browse files Browse the repository at this point in the history 
* Fix sources

* Added typedoc

* Fix custom style layer
  • Loading branch information
@HarelM
HarelM authored Jul 4, 2023
1 parent 65db4ae commit 280c9d4
Show file tree
Hide file tree
Showing 11 changed files with 166 additions and 155 deletions.
68 changes: 27 additions & 41 deletions src/source/canvas_source.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,33 @@ import type {Map} from '../ui/map';
import type {Dispatcher} from '../util/dispatcher';
import type {Evented} from '../util/evented';

/**
* Options to add a canvas source type to the map.
*/
export type CanvasSourceSpecification = {
/**
* Source type. Must be `"canvas"`.
*/
type: 'canvas';
/**
* Four geographical coordinates denoting where to place the corners of the canvas, specified in `[longitude, latitude]` pairs.
*/
coordinates: [[number, number], [number, number], [number, number], [number, number]];
/**
* Whether the canvas source is animated. If the canvas is static (i.e. pixels do not need to be re-read on every frame), `animate` should be set to `false` to improve performance.
* @defaultValue true
*/
animate?: boolean;
/**
* Canvas source from which to read pixels. Can be a string representing the ID of the canvas element, or the `HTMLCanvasElement` itself.
*/
canvas?: string | HTMLCanvasElement;
};

/**
* Options to add a canvas source type to the map.
* A data source containing the contents of an HTML canvas. See {@link CanvasSourceSpecification} for detailed documentation of options.
*
* @typedef {Object} CanvasSourceOptions
* @property {string} type Source type. Must be `"canvas"`.
* @property {string|HTMLCanvasElement} canvas Canvas source from which to read pixels. Can be a string representing the ID of the canvas element, or the `HTMLCanvasElement` itself.
* @property {Array<Array<number>>} coordinates Four geographical coordinates denoting where to place the corners of the canvas, specified in `[longitude, latitude]` pairs.
* @property {boolean} [animate=true] Whether the canvas source is animated. If the canvas is static (i.e. pixels do not need to be re-read on every frame), `animate` should be set to `false` to improve performance.
*/

/**
* A data source containing the contents of an HTML canvas. See {@link CanvasSourceOptions} for detailed documentation of options.
* @group Sources
*
* @example
* // add to map
Expand Down Expand Up @@ -61,12 +69,18 @@ export class CanvasSource extends ImageSource {
canvas: HTMLCanvasElement;
width: number;
height: number;
/**
* Enables animation. The image will be copied from the canvas to the map on each frame.
*/
play: () => void;
/**
* Disables animation. The map will display a static copy of the canvas image.
*/
pause: () => void;
_playing: boolean;

/**
* @private
* @hidden
*/
constructor(id: string, options: CanvasSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {
super(id, options, dispatcher, eventedParent);
Expand All @@ -93,20 +107,6 @@ export class CanvasSource extends ImageSource {
this.animate = options.animate !== undefined ? options.animate : true;
}

/**
* Enables animation. The image will be copied from the canvas to the map on each frame.
* @method play
* @instance
* @memberof CanvasSource
*/

/**
* Disables animation. The map will display a static copy of the canvas image.
* @method pause
* @instance
* @memberof CanvasSource
*/

load = () => {
this._loaded = true;
if (!this.canvas) {
Expand Down Expand Up @@ -142,9 +142,9 @@ export class CanvasSource extends ImageSource {
/**
* Returns the HTML `canvas` element.
*
* @returns {HTMLCanvasElement} The HTML `canvas` element.
* @returns The HTML `canvas` element.
*/
getCanvas() {
getCanvas(): HTMLCanvasElement {
return this.canvas;
}

Expand All @@ -160,20 +160,6 @@ export class CanvasSource extends ImageSource {
this.pause();
}

// /**
// * Sets the canvas's coordinates and re-renders the map.
// *
// * @method setCoordinates
// * @instance
// * @memberof CanvasSource
// * @param {Array<Array<number>>} coordinates Four geographical coordinates,
// * represented as arrays of longitude and latitude numbers, which define the corners of the canvas.
// * The coordinates start at the top left corner of the canvas and proceed in clockwise order.
// * They do not have to represent a rectangle.
// * @returns {CanvasSource} this
// */
// setCoordinates inherited from ImageSource

prepare = () => {
let resize = false;
if (this.canvas.width !== this.width) {
Expand Down
51 changes: 24 additions & 27 deletions src/source/geojson_source.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@ import type {Actor} from '../util/actor';
import type {Callback} from '../types/callback';
import type {GeoJSONSourceSpecification, PromoteIdSpecification} from '@maplibre/maplibre-gl-style-spec';
import type {GeoJSONSourceDiff} from './geojson_source_diff';
import type {Options, ClusterProperties} from 'supercluster';

export type GeoJSONSourceOptions = GeoJSONSourceSpecification & {
workerOptions?: any;
workerOptions?: WorkerOptions;
collectResourceTiming?: boolean;
}

Expand All @@ -38,15 +39,8 @@ export type WorkerOptions = {
linemetrics?: boolean;
generateId?: boolean;
};
superclusterOptions?: {
maxZoom?: number;
miniPoints?: number;
extent?: number;
radius?: number;
log?: boolean;
generateId?: boolean;
};
clusterProperties?: any;
superclusterOptions?: Options<any, any>;
clusterProperties?: ClusterProperties;
fliter?: any;
promoteId?: any;
collectResourceTiming?: boolean;
Expand All @@ -62,6 +56,8 @@ export type SetClusterOptions = {
* A source containing GeoJSON.
* (See the [Style Specification](https://maplibre.org/maplibre-style-spec/#sources-geojson) for detailed documentation of options.)
*
* @group Sources
*
* @example
* map.addSource('some id', {
* type: 'geojson',
Expand Down Expand Up @@ -125,7 +121,7 @@ export class GeoJSONSource extends Evented implements Source {
_removed: boolean;

/**
* @private
* @hidden
*/
constructor(id: string, options: GeoJSONSourceOptions, dispatcher: Dispatcher, eventedParent: Evented) {
super();
Expand Down Expand Up @@ -204,10 +200,10 @@ export class GeoJSONSource extends Evented implements Source {
/**
* Sets the GeoJSON data and re-renders the map.
*
* @param {Object|string} data A GeoJSON data object or a URL to one. The latter is preferable in the case of large GeoJSON files.
* @returns {GeoJSONSource} this
* @param data A GeoJSON data object or a URL to one. The latter is preferable in the case of large GeoJSON files.
* @returns `this`
*/
setData(data: GeoJSON.GeoJSON | string) {
setData(data: GeoJSON.GeoJSON | string): this {
this._data = data;
this._updateWorkerData();

Expand All @@ -226,25 +222,25 @@ export class GeoJSONSource extends Evented implements Source {
*
* Updates are applied on a best-effort basis, updating an ID that does not exist will not result in an error.
*
* @param {GeoJSONSourceDiff} diff The changes that need to be applied.
* @returns {GeoJSONSource} this
* @param diff The changes that need to be applied.
* @returns `this`
*/
updateData(diff: GeoJSONSourceDiff) {
updateData(diff: GeoJSONSourceDiff): this {
this._updateWorkerData(diff);

return this;
}

/**
* To disable/enable clustering on the source options
* @param {SetClusterOptions} options The options to set
* @returns {GeoJSONSource} this
* @param options The options to set
* @returns `this`
* @example
* map.getSource('some id').setClusterOptions({cluster: false});
* map.getSource('some id').setClusterOptions({cluster: false, clusterRadius: 50, clusterMaxZoom: 14});
*
*/
setClusterOptions(options:SetClusterOptions) {
setClusterOptions(options: SetClusterOptions): this {
this.workerOptions.cluster = options.cluster;
if (options) {
if (options.clusterRadius !== undefined) this.workerOptions.superclusterOptions.radius = options.clusterRadius;
Expand All @@ -259,9 +255,9 @@ export class GeoJSONSource extends Evented implements Source {
*
* @param clusterId The value of the cluster's `cluster_id` property.
* @param callback A callback to be called when the zoom value is retrieved (`(error, zoom) => { ... }`).
* @returns {GeoJSONSource} this
* @returns `this`
*/
getClusterExpansionZoom(clusterId: number, callback: Callback<number>) {
getClusterExpansionZoom(clusterId: number, callback: Callback<number>): this {
this.actor.send('geojson.getClusterExpansionZoom', {clusterId, source: this.id}, callback);
return this;
}
Expand All @@ -271,9 +267,9 @@ export class GeoJSONSource extends Evented implements Source {
*
* @param clusterId The value of the cluster's `cluster_id` property.
* @param callback A callback to be called when the features are retrieved (`(error, features) => { ... }`).
* @returns {GeoJSONSource} this
* @returns `this`
*/
getClusterChildren(clusterId: number, callback: Callback<Array<GeoJSON.Feature>>) {
getClusterChildren(clusterId: number, callback: Callback<Array<GeoJSON.Feature>>): this {
this.actor.send('geojson.getClusterChildren', {clusterId, source: this.id}, callback);
return this;
}
Expand All @@ -285,7 +281,7 @@ export class GeoJSONSource extends Evented implements Source {
* @param limit The maximum number of features to return.
* @param offset The number of features to skip (e.g. for pagination).
* @param callback A callback to be called when the features are retrieved (`(error, features) => { ... }`).
* @returns {GeoJSONSource} this
* @returns `this`
* @example
* // Retrieve cluster leaves on click
* map.on('click', 'clusters', function(e) {
Expand All @@ -303,7 +299,7 @@ export class GeoJSONSource extends Evented implements Source {
* })
* });
*/
getClusterLeaves(clusterId: number, limit: number, offset: number, callback: Callback<Array<GeoJSON.Feature>>) {
getClusterLeaves(clusterId: number, limit: number, offset: number, callback: Callback<Array<GeoJSON.Feature>>): this {
this.actor.send('geojson.getClusterLeaves', {
source: this.id,
clusterId,
Expand All @@ -313,10 +309,11 @@ export class GeoJSONSource extends Evented implements Source {
return this;
}

/*
/**
* Responsible for invoking WorkerSource's geojson.loadData target, which
* handles loading the geojson data and preparing to serve it up as tiles,
* using geojson-vt or supercluster as appropriate.
* @param diff the diff object
*/
_updateWorkerData(diff?: GeoJSONSourceDiff) {
const options = extend({}, this.workerOptions);
Expand Down
8 changes: 4 additions & 4 deletions src/source/geojson_worker_source.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {RequestPerformance} from '../util/performance';
import rewind from '@mapbox/geojson-rewind';
import {GeoJSONWrapper} from './geojson_wrapper';
import vtpbf from 'vt-pbf';
import Supercluster from 'supercluster';
import Supercluster, {type Options, type ClusterProperties} from 'supercluster';
import geojsonvt from 'geojson-vt';
import {VectorTileWorkerSource} from './vector_tile_worker_source';
import {createExpression} from '@maplibre/maplibre-gl-style-spec';
Expand All @@ -29,9 +29,9 @@ export type LoadGeoJSONParameters = {
dataDiff?: GeoJSONSourceDiff;
source: string;
cluster: boolean;
superclusterOptions?: any;
superclusterOptions?: Options<any, any>;
geojsonVtOptions?: any;
clusterProperties?: any;
clusterProperties?: ClusterProperties;
filter?: Array<unknown>;
promoteId?: string;
};
Expand Down Expand Up @@ -297,7 +297,7 @@ export class GeoJSONWorkerSource extends VectorTileWorkerSource {
}
}

function getSuperclusterOptions({superclusterOptions, clusterProperties}: { superclusterOptions?: any; clusterProperties?: any}) {
function getSuperclusterOptions({superclusterOptions, clusterProperties}: LoadGeoJSONParameters) {
if (!clusterProperties || !superclusterOptions) return superclusterOptions;

const mapExpressions = {};
Expand Down
40 changes: 24 additions & 16 deletions src/source/image_source.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,26 @@ import {Cancelable} from '../types/cancelable';

export type Coordinates = [[number, number], [number, number], [number, number], [number, number]];

export type UpdateImageOptions = {
/**
* Required image URL.
*/
url: string;
/**
* Four geographical coordinates,
* represented as arrays of longitude and latitude numbers, which define the corners of the image.
* The coordinates start at the top left corner of the image and proceed in clockwise order.
* They do not have to represent a rectangle.
*/
coordinates?: Coordinates;
}

/**
* A data source containing an image.
* (See the [Style Specification](https://maplibre.org/maplibre-style-spec/#sources-image) for detailed documentation of options.)
*
* @group Sources
*
* @example
* // add to map
* map.addSource('some id', {
Expand Down Expand Up @@ -86,7 +102,7 @@ export class ImageSource extends Evented implements Source {
_request: Cancelable;

/**
* @private
* @hidden
*/
constructor(id: string, options: ImageSourceSpecification | VideoSourceSpecification | CanvasSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {
super();
Expand Down Expand Up @@ -139,18 +155,10 @@ export class ImageSource extends Evented implements Source {
* Updates the image URL and, optionally, the coordinates. To avoid having the image flash after changing,
* set the `raster-fade-duration` paint property on the raster layer to 0.
*
* @param {Object} options Options object.
* @param {string} [options.url] Required image URL.
* @param {Array<Array<number>>} [options.coordinates] Four geographical coordinates,
* represented as arrays of longitude and latitude numbers, which define the corners of the image.
* The coordinates start at the top left corner of the image and proceed in clockwise order.
* They do not have to represent a rectangle.
* @returns {ImageSource} this
* @param options Options object.
* @returns this
*/
updateImage(options: {
url: string;
coordinates?: Coordinates;
}) {
updateImage(options: UpdateImageOptions): this {
if (!options.url) {
return this;
}
Expand Down Expand Up @@ -187,13 +195,13 @@ export class ImageSource extends Evented implements Source {
/**
* Sets the image's coordinates and re-renders the map.
*
* @param {Array<Array<number>>} coordinates Four geographical coordinates,
* @param coordinates Four geographical coordinates,
* represented as arrays of longitude and latitude numbers, which define the corners of the image.
* The coordinates start at the top left corner of the image and proceed in clockwise order.
* They do not have to represent a rectangle.
* @returns {ImageSource} this
* @returns `this`
*/
setCoordinates(coordinates: Coordinates) {
setCoordinates(coordinates: Coordinates): this {
this.coordinates = coordinates;

// Calculate which mercator tile is suitable for rendering the video in
Expand Down Expand Up @@ -301,7 +309,7 @@ export class ImageSource extends Evented implements Source {
* Given a list of coordinates, get their center as a coordinate.
*
* @returns centerpoint
* @private
* @hidden
*/
export function getCoordinatesCenterTileID(coords: Array<MercatorCoordinate>) {
let minX = Infinity;
Expand Down
Loading

0 comments on commit 280c9d4

Please sign in to comment.