mapbox-gl 1.13.2

package/src/index.js

@@ -0,0 +1,230 @@
+// @flow
+
+import assert from 'assert';
+import supported from '@mapbox/mapbox-gl-supported';
+
+import {version} from '../package.json';
+import Map from './ui/map';
+import NavigationControl from './ui/control/navigation_control';
+import GeolocateControl from './ui/control/geolocate_control';
+import AttributionControl from './ui/control/attribution_control';
+import ScaleControl from './ui/control/scale_control';
+import FullscreenControl from './ui/control/fullscreen_control';
+import Popup from './ui/popup';
+import Marker from './ui/marker';
+import Style from './style/style';
+import LngLat from './geo/lng_lat';
+import LngLatBounds from './geo/lng_lat_bounds';
+import Point from '@mapbox/point-geometry';
+import MercatorCoordinate from './geo/mercator_coordinate';
+import {Evented} from './util/evented';
+import config from './util/config';
+import {Debug} from './util/debug';
+import {isSafari} from './util/util';
+import {setRTLTextPlugin, getRTLTextPluginStatus} from './source/rtl_text_plugin';
+import WorkerPool from './util/worker_pool';
+import {prewarm, clearPrewarmedResources} from './util/global_worker_pool';
+import {clearTileCache} from './util/tile_request_cache';
+import {PerformanceUtils} from './util/performance';
+
+const exported = {
+    version,
+    supported,
+    setRTLTextPlugin,
+    getRTLTextPluginStatus,
+    Map,
+    NavigationControl,
+    GeolocateControl,
+    AttributionControl,
+    ScaleControl,
+    FullscreenControl,
+    Popup,
+    Marker,
+    Style,
+    LngLat,
+    LngLatBounds,
+    Point,
+    MercatorCoordinate,
+    Evented,
+    config,
+    /**
+     * Initializes resources like WebWorkers that can be shared across maps to lower load
+     * times in some situations. `mapboxgl.workerUrl` and `mapboxgl.workerCount`, if being
+     * used, must be set before `prewarm()` is called to have an effect.
+     *
+     * By default, the lifecycle of these resources is managed automatically, and they are
+     * lazily initialized when a Map is first created. By invoking `prewarm()`, these
+     * resources will be created ahead of time, and will not be cleared when the last Map
+     * is removed from the page. This allows them to be re-used by new Map instances that
+     * are created later. They can be manually cleared by calling
+     * `mapboxgl.clearPrewarmedResources()`. This is only necessary if your web page remains
+     * active but stops using maps altogether.
+     *
+     * This is primarily useful when using GL-JS maps in a single page app, wherein a user
+     * would navigate between various views that can cause Map instances to constantly be
+     * created and destroyed.
+     *
+     * @function prewarm
+     * @example
+     * mapboxgl.prewarm()
+     */
+    prewarm,
+    /**
+     * Clears up resources that have previously been created by `mapboxgl.prewarm()`.
+     * Note that this is typically not necessary. You should only call this function
+     * if you expect the user of your app to not return to a Map view at any point
+     * in your application.
+     *
+     * @function clearPrewarmedResources
+     * @example
+     * mapboxgl.clearPrewarmedResources()
+     */
+    clearPrewarmedResources,
+
+    /**
+     * Gets and sets the map's [access token](https://www.mapbox.com/help/define-access-token/).
+     *
+     * @var {string} accessToken
+     * @returns {string} The currently set access token.
+     * @example
+     * mapboxgl.accessToken = myAccessToken;
+     * @see [Display a map](https://www.mapbox.com/mapbox-gl-js/examples/)
+     */
+    get accessToken(): ?string {
+        return config.ACCESS_TOKEN;
+    },
+
+    set accessToken(token: string) {
+        config.ACCESS_TOKEN = token;
+    },
+
+    /**
+     * Gets and sets the map's default API URL for requesting tiles, styles, sprites, and glyphs
+     *
+     * @var {string} baseApiUrl
+     * @returns {string} The current base API URL.
+     * @example
+     * mapboxgl.baseApiUrl = 'https://api.mapbox.com';
+     */
+    get baseApiUrl(): ?string {
+        return config.API_URL;
+    },
+
+    set baseApiUrl(url: string) {
+        config.API_URL = url;
+    },
+
+    /**
+     * Gets and sets the number of web workers instantiated on a page with GL JS maps.
+     * By default, it is set to half the number of CPU cores (capped at 6).
+     * Make sure to set this property before creating any map instances for it to have effect.
+     *
+     * @var {string} workerCount
+     * @returns {number} Number of workers currently configured.
+     * @example
+     * mapboxgl.workerCount = 2;
+     */
+    get workerCount(): number {
+        return WorkerPool.workerCount;
+    },
+
+    set workerCount(count: number) {
+        WorkerPool.workerCount = count;
+    },
+
+    /**
+     * Gets and sets the maximum number of images (raster tiles, sprites, icons) to load in parallel,
+     * which affects performance in raster-heavy maps. 16 by default.
+     *
+     * @var {string} maxParallelImageRequests
+     * @returns {number} Number of parallel requests currently configured.
+     * @example
+     * mapboxgl.maxParallelImageRequests = 10;
+     */
+    get maxParallelImageRequests(): number {
+        return config.MAX_PARALLEL_IMAGE_REQUESTS;
+    },
+
+    set maxParallelImageRequests(numRequests: number) {
+        config.MAX_PARALLEL_IMAGE_REQUESTS = numRequests;
+    },
+
+    /**
+     * Clears browser storage used by this library. Using this method flushes the Mapbox tile
+     * cache that is managed by this library. Tiles may still be cached by the browser
+     * in some cases.
+     *
+     * This API is supported on browsers where the [`Cache` API](https://developer.mozilla.org/en-US/docs/Web/API/Cache)
+     * is supported and enabled. This includes all major browsers when pages are served over
+     * `https://`, except Internet Explorer and Edge Mobile.
+     *
+     * When called in unsupported browsers or environments (private or incognito mode), the
+     * callback will be called with an error argument.
+     *
+     * @function clearStorage
+     * @param {Function} callback Called with an error argument if there is an error.
+     * @example
+     * mapboxgl.clearStorage();
+     */
+    clearStorage(callback?: (err: ?Error) => void) {
+        clearTileCache(callback);
+    },
+
+    workerUrl: ''
+};
+
+//This gets automatically stripped out in production builds.
+Debug.extend(exported, {isSafari, getPerformanceMetrics: PerformanceUtils.getPerformanceMetrics});
+
+/**
+ * The version of Mapbox GL JS in use as specified in `package.json`,
+ * `CHANGELOG.md`, and the GitHub release.
+ *
+ * @var {string} version
+ */
+
+/**
+ * Test whether the browser [supports Mapbox GL JS](https://www.mapbox.com/help/mapbox-browser-support/#mapbox-gl-js).
+ *
+ * @function supported
+ * @param {Object} [options]
+ * @param {boolean} [options.failIfMajorPerformanceCaveat=false] If `true`,
+ *   the function will return `false` if the performance of Mapbox GL JS would
+ *   be dramatically worse than expected (e.g. a software WebGL renderer would be used).
+ * @return {boolean}
+ * @example
+ * // Show an alert if the browser does not support Mapbox GL
+ * 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/)
+ */
+
+/**
+ * Sets the map's [RTL text plugin](https://www.mapbox.com/mapbox-gl-js/plugins/#mapbox-gl-rtl-text).
+ * Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left. Mapbox Studio loads this plugin by default.
+ *
+ * @function setRTLTextPlugin
+ * @param {string} pluginURL URL pointing to the Mapbox RTL text plugin source.
+ * @param {Function} callback Called with an error argument if there is an error.
+ * @param {boolean} lazy If set to `true`, mapboxgl will defer loading the plugin until rtl text is encountered,
+ *    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/)
+ */
+
+/**
+  * Gets the map's [RTL text plugin](https://www.mapbox.com/mapbox-gl-js/plugins/#mapbox-gl-rtl-text) status.
+  * The status can be `unavailable` (i.e. not requested or removed), `loading`, `loaded` or `error`.
+  * If the status is `loaded` and the plugin is requested again, an error will be thrown.
+  *
+  * @function getRTLTextPluginStatus
+  * @example
+  * const pluginStatus = mapboxgl.getRTLTextPluginStatus();
+  */
+
+export default exported;
+
+// canary assert: used to confirm that asserts have been removed from production build
+assert(true, 'canary assert');

package/src/render/draw_background.js

@@ -0,0 +1,57 @@
+// @flow
+
+import StencilMode from '../gl/stencil_mode';
+import DepthMode from '../gl/depth_mode';
+import CullFaceMode from '../gl/cull_face_mode';
+import {
+    backgroundUniformValues,
+    backgroundPatternUniformValues
+} from './program/background_program';
+
+import type Painter from './painter';
+import type SourceCache from '../source/source_cache';
+import type BackgroundStyleLayer from '../style/style_layer/background_style_layer';
+
+export default drawBackground;
+
+function drawBackground(painter: Painter, sourceCache: SourceCache, layer: BackgroundStyleLayer) {
+    const color = layer.paint.get('background-color');
+    const opacity = layer.paint.get('background-opacity');
+
+    if (opacity === 0) return;
+
+    const context = painter.context;
+    const gl = context.gl;
+    const transform = painter.transform;
+    const tileSize = transform.tileSize;
+    const image = layer.paint.get('background-pattern');
+    if (painter.isPatternMissing(image)) return;
+
+    const pass = (!image && color.a === 1 && opacity === 1 && painter.opaquePassEnabledForLayer()) ? 'opaque' : 'translucent';
+    if (painter.renderPass !== pass) return;
+
+    const stencilMode = StencilMode.disabled;
+    const depthMode = painter.depthModeForSublayer(0, pass === 'opaque' ? DepthMode.ReadWrite : DepthMode.ReadOnly);
+    const colorMode = painter.colorModeForRenderPass();
+
+    const program = painter.useProgram(image ? 'backgroundPattern' : 'background');
+
+    const tileIDs = transform.coveringTiles({tileSize});
+
+    if (image) {
+        context.activeTexture.set(gl.TEXTURE0);
+        painter.imageManager.bind(painter.context);
+    }
+
+    const crossfade = layer.getCrossfadeParameters();
+    for (const tileID of tileIDs) {
+        const matrix = painter.transform.calculatePosMatrix(tileID.toUnwrapped());
+        const uniformValues = image ?
+            backgroundPatternUniformValues(matrix, opacity, painter, image, {tileID, tileSize}, crossfade) :
+            backgroundUniformValues(matrix, opacity, color);
+
+        program.draw(context, gl.TRIANGLES, depthMode, stencilMode, colorMode, CullFaceMode.disabled,
+            uniformValues, layer.id, painter.tileExtentBuffer,
+            painter.quadTriangleIndexBuffer, painter.tileExtentSegments);
+    }
+}

package/src/render/draw_circle.js

@@ -0,0 +1,113 @@
+// @flow
+
+import StencilMode from '../gl/stencil_mode';
+import DepthMode from '../gl/depth_mode';
+import CullFaceMode from '../gl/cull_face_mode';
+import Program from './program';
+import {circleUniformValues} from './program/circle_program';
+import SegmentVector from '../data/segment';
+import {OverscaledTileID} from '../source/tile_id';
+
+import type Painter from './painter';
+import type SourceCache from '../source/source_cache';
+import type CircleStyleLayer from '../style/style_layer/circle_style_layer';
+import type CircleBucket from '../data/bucket/circle_bucket';
+import type ProgramConfiguration from '../data/program_configuration';
+import type VertexBuffer from '../gl/vertex_buffer';
+import type IndexBuffer from '../gl/index_buffer';
+import type {UniformValues} from './uniform_binding';
+import type {CircleUniformsType} from './program/circle_program';
+
+export default drawCircles;
+
+type TileRenderState = {
+    programConfiguration: ProgramConfiguration,
+    program: Program<*>,
+    layoutVertexBuffer: VertexBuffer,
+    indexBuffer: IndexBuffer,
+    uniformValues: UniformValues<CircleUniformsType>
+};
+
+type SegmentsTileRenderState = {
+    segments: SegmentVector,
+    sortKey: number,
+    state: TileRenderState
+};
+
+function drawCircles(painter: Painter, sourceCache: SourceCache, layer: CircleStyleLayer, coords: Array<OverscaledTileID>) {
+    if (painter.renderPass !== 'translucent') return;
+
+    const opacity = layer.paint.get('circle-opacity');
+    const strokeWidth = layer.paint.get('circle-stroke-width');
+    const strokeOpacity = layer.paint.get('circle-stroke-opacity');
+    const sortFeaturesByKey = layer.layout.get('circle-sort-key').constantOr(1) !== undefined;
+
+    if (opacity.constantOr(1) === 0 && (strokeWidth.constantOr(1) === 0 || strokeOpacity.constantOr(1) === 0)) {
+        return;
+    }
+
+    const context = painter.context;
+    const gl = context.gl;
+
+    const depthMode = painter.depthModeForSublayer(0, DepthMode.ReadOnly);
+    // Turn off stencil testing to allow circles to be drawn across boundaries,
+    // so that large circles are not clipped to tiles
+    const stencilMode = StencilMode.disabled;
+    const colorMode = painter.colorModeForRenderPass();
+
+    const segmentsRenderStates: Array<SegmentsTileRenderState> = [];
+
+    for (let i = 0; i < coords.length; i++) {
+        const coord = coords[i];
+
+        const tile = sourceCache.getTile(coord);
+        const bucket: ?CircleBucket<*> = (tile.getBucket(layer): any);
+        if (!bucket) continue;
+
+        const programConfiguration = bucket.programConfigurations.get(layer.id);
+        const program = painter.useProgram('circle', programConfiguration);
+        const layoutVertexBuffer = bucket.layoutVertexBuffer;
+        const indexBuffer = bucket.indexBuffer;
+        const uniformValues = circleUniformValues(painter, coord, tile, layer);
+
+        const state: TileRenderState = {
+            programConfiguration,
+            program,
+            layoutVertexBuffer,
+            indexBuffer,
+            uniformValues,
+        };
+
+        if (sortFeaturesByKey) {
+            const oldSegments = bucket.segments.get();
+            for (const segment of oldSegments) {
+                segmentsRenderStates.push({
+                    segments: new SegmentVector([segment]),
+                    sortKey: ((segment.sortKey: any): number),
+                    state
+                });
+            }
+        } else {
+            segmentsRenderStates.push({
+                segments: bucket.segments,
+                sortKey: 0,
+                state
+            });
+        }
+
+    }
+
+    if (sortFeaturesByKey) {
+        segmentsRenderStates.sort((a, b) => a.sortKey - b.sortKey);
+    }
+
+    for (const segmentsState of segmentsRenderStates) {
+        const {programConfiguration, program, layoutVertexBuffer, indexBuffer, uniformValues} = segmentsState.state;
+        const segments = segmentsState.segments;
+
+        program.draw(context, gl.TRIANGLES, depthMode, stencilMode, colorMode, CullFaceMode.disabled,
+            uniformValues, layer.id,
+            layoutVertexBuffer, indexBuffer, segments,
+            layer.paint, painter.transform.zoom, programConfiguration);
+    }
+}

package/src/render/draw_collision_debug.js

@@ -0,0 +1,172 @@
+// @flow
+
+import type Painter from './painter';
+import type SourceCache from '../source/source_cache';
+import type StyleLayer from '../style/style_layer';
+import type {OverscaledTileID} from '../source/tile_id';
+import type SymbolBucket from '../data/bucket/symbol_bucket';
+import DepthMode from '../gl/depth_mode';
+import StencilMode from '../gl/stencil_mode';
+import CullFaceMode from '../gl/cull_face_mode';
+import {collisionUniformValues, collisionCircleUniformValues} from './program/collision_program';
+
+import {QuadTriangleArray, CollisionCircleLayoutArray} from '../data/array_types';
+import {collisionCircleLayout} from '../data/bucket/symbol_attributes';
+import SegmentVector from '../data/segment';
+import {mat4} from 'gl-matrix';
+import VertexBuffer from '../gl/vertex_buffer';
+import IndexBuffer from '../gl/index_buffer';
+
+export default drawCollisionDebug;
+
+type TileBatch = {
+    circleArray: Array<number>,
+    circleOffset: number,
+    transform: mat4,
+    invTransform: mat4
+};
+
+let quadTriangles: ?QuadTriangleArray;
+
+function drawCollisionDebug(painter: Painter, sourceCache: SourceCache, layer: StyleLayer, coords: Array<OverscaledTileID>, translate: [number, number], translateAnchor: 'map' | 'viewport', isText: boolean) {
+    const context = painter.context;
+    const gl = context.gl;
+    const program = painter.useProgram('collisionBox');
+    const tileBatches: Array<TileBatch> = [];
+    let circleCount = 0;
+    let circleOffset = 0;
+
+    for (let i = 0; i < coords.length; i++) {
+        const coord = coords[i];
+        const tile = sourceCache.getTile(coord);
+        const bucket: ?SymbolBucket = (tile.getBucket(layer): any);
+        if (!bucket) continue;
+        let posMatrix = coord.posMatrix;
+        if (translate[0] !== 0 || translate[1] !== 0) {
+            posMatrix = painter.translatePosMatrix(coord.posMatrix, tile, translate, translateAnchor);
+        }
+        const buffers = isText ? bucket.textCollisionBox : bucket.iconCollisionBox;
+        // Get collision circle data of this bucket
+        const circleArray: Array<number> = bucket.collisionCircleArray;
+        if (circleArray.length > 0) {
+            // We need to know the projection matrix that was used for projecting collision circles to the screen.
+            // This might vary between buckets as the symbol placement is a continous process. This matrix is
+            // required for transforming points from previous screen space to the current one
+            const invTransform = mat4.create();
+            const transform = posMatrix;
+
+            mat4.mul(invTransform, bucket.placementInvProjMatrix, painter.transform.glCoordMatrix);
+            mat4.mul(invTransform, invTransform, bucket.placementViewportMatrix);
+
+            tileBatches.push({
+                circleArray,
+                circleOffset,
+                transform,
+                invTransform
+            });
+
+            circleCount += circleArray.length / 4;  // 4 values per circle
+            circleOffset = circleCount;
+        }
+        if (!buffers) continue;
+        program.draw(context, gl.LINES,
+            DepthMode.disabled, StencilMode.disabled,
+            painter.colorModeForRenderPass(),
+            CullFaceMode.disabled,
+            collisionUniformValues(
+                posMatrix,
+                painter.transform,
+                tile),
+            layer.id, buffers.layoutVertexBuffer, buffers.indexBuffer,
+            buffers.segments, null, painter.transform.zoom, null, null,
+            buffers.collisionVertexBuffer);
+    }
+
+    if (!isText || !tileBatches.length) {
+        return;
+    }
+
+    // Render collision circles
+    const circleProgram = painter.useProgram('collisionCircle');
+
+    // Construct vertex data
+    const vertexData = new CollisionCircleLayoutArray();
+    vertexData.resize(circleCount * 4);
+    vertexData._trim();
+
+    let vertexOffset = 0;
+
+    for (const batch of tileBatches) {
+        for (let i = 0; i < batch.circleArray.length / 4; i++) {
+            const circleIdx = i * 4;
+            const x = batch.circleArray[circleIdx + 0];
+            const y = batch.circleArray[circleIdx + 1];
+            const radius = batch.circleArray[circleIdx + 2];
+            const collision = batch.circleArray[circleIdx + 3];
+
+            // 4 floats per vertex, 4 vertices per quad
+            vertexData.emplace(vertexOffset++, x, y, radius, collision, 0);
+            vertexData.emplace(vertexOffset++, x, y, radius, collision, 1);
+            vertexData.emplace(vertexOffset++, x, y, radius, collision, 2);
+            vertexData.emplace(vertexOffset++, x, y, radius, collision, 3);
+        }
+    }
+    if (!quadTriangles || quadTriangles.length < circleCount * 2) {
+        quadTriangles = createQuadTriangles(circleCount);
+    }
+
+    const indexBuffer: IndexBuffer = context.createIndexBuffer(quadTriangles, true);
+    const vertexBuffer: VertexBuffer = context.createVertexBuffer(vertexData, collisionCircleLayout.members, true);
+
+    // Render batches
+    for (const batch of tileBatches) {
+        const uniforms = collisionCircleUniformValues(
+            batch.transform,
+            batch.invTransform,
+            painter.transform
+        );
+
+        circleProgram.draw(
+            context,
+            gl.TRIANGLES,
+            DepthMode.disabled,
+            StencilMode.disabled,
+            painter.colorModeForRenderPass(),
+            CullFaceMode.disabled,
+            uniforms,
+            layer.id,
+            vertexBuffer,
+            indexBuffer,
+            SegmentVector.simpleSegment(0, batch.circleOffset * 2, batch.circleArray.length, batch.circleArray.length / 2),
+            null,
+            painter.transform.zoom,
+            null,
+            null,
+            null);
+    }
+
+    vertexBuffer.destroy();
+    indexBuffer.destroy();
+}
+
+function createQuadTriangles(quadCount: number): QuadTriangleArray {
+    const triCount = quadCount * 2;
+    const array = new QuadTriangleArray();
+
+    array.resize(triCount);
+    array._trim();
+
+    // Two triangles and 4 vertices per quad.
+    for (let i = 0; i < triCount; i++) {
+        const idx = i * 6;
+
+        array.uint16[idx + 0] = i * 4 + 0;
+        array.uint16[idx + 1] = i * 4 + 1;
+        array.uint16[idx + 2] = i * 4 + 2;
+        array.uint16[idx + 3] = i * 4 + 2;
+        array.uint16[idx + 4] = i * 4 + 3;
+        array.uint16[idx + 5] = i * 4 + 0;
+    }
+
+    return array;
+}

package/src/render/draw_custom.js

@@ -0,0 +1,49 @@
+// @flow
+
+export default drawCustom;
+
+import DepthMode from '../gl/depth_mode';
+import StencilMode from '../gl/stencil_mode';
+
+import type Painter from './painter';
+import type SourceCache from '../source/source_cache';
+import type CustomStyleLayer from '../style/style_layer/custom_style_layer';
+
+function drawCustom(painter: Painter, sourceCache: SourceCache, layer: CustomStyleLayer) {
+
+    const context = painter.context;
+    const implementation = layer.implementation;
+
+    if (painter.renderPass === 'offscreen') {
+
+        const prerender = implementation.prerender;
+        if (prerender) {
+            painter.setCustomLayerDefaults();
+            context.setColorMode(painter.colorModeForRenderPass());
+
+            prerender.call(implementation, context.gl, painter.transform.customLayerMatrix());
+
+            context.setDirty();
+            painter.setBaseState();
+        }
+
+    } else if (painter.renderPass === 'translucent') {
+
+        painter.setCustomLayerDefaults();
+
+        context.setColorMode(painter.colorModeForRenderPass());
+        context.setStencilMode(StencilMode.disabled);
+
+        const depthMode = implementation.renderingMode === '3d' ?
+            new DepthMode(painter.context.gl.LEQUAL, DepthMode.ReadWrite, painter.depthRangeFor3D) :
+            painter.depthModeForSublayer(0, DepthMode.ReadOnly);
+
+        context.setDepthMode(depthMode);
+
+        implementation.render(context.gl, painter.transform.customLayerMatrix());
+
+        context.setDirty();
+        painter.setBaseState();
+        context.bindFramebuffer.set(null);
+    }
+}