mapbox · ansis · Oct 19, 2021 · Dec 11, 2020 · May 26, 2021 · May 26, 2021
@@ -53,8 +53,10 @@ EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 --------------------------------------------------------------------------------
 
 Contains a portion of d3-color https://github.com/d3/d3-color
+Contains a portion of d3-geo https://github.com/d3/d3-geo
+Contains a portion of d3-geo-projection https://github.com/d3/d3-geo-projection
 
-Copyright 2010-2016 Mike Bostock
+Copyright 2010-2021 Mike Bostock
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without modification,

@@ -38,6 +38,8 @@ function flowType(property) {
                 return 'TerrainSpecification';
             case 'fog':
                 return 'FogSpecification';
+            case 'projection':
+                return 'ProjectionSpecification';
             case 'sources':
                 return '{[_: string]: SourceSpecification}';
             case '*':
@@ -185,6 +187,8 @@ ${flowObjectDeclaration('TerrainSpecification', spec.terrain)}
 
 ${flowObjectDeclaration('FogSpecification', spec.fog)}
 
+${flowObjectDeclaration('ProjectionSpecification', spec.projection)}
+
 ${spec.source.map(key => flowObjectDeclaration(flowSourceTypeName(key), spec[key])).join('\n\n')}
 
 export type SourceSpecification =

@@ -118,10 +118,10 @@ function camelize (str) {
 global.camelize = camelize;
 
 import posAttributes from '../src/data/pos_attributes.js';
-import rasterBoundsAttributes from '../src/data/raster_bounds_attributes.js';
+import boundsAttributes from '../src/data/bounds_attributes.js';
 
 createStructArrayType('pos', posAttributes);
-createStructArrayType('raster_bounds', rasterBoundsAttributes);
+createStructArrayType('raster_bounds', boundsAttributes);
 
 import circleAttributes from '../src/data/bucket/circle_attributes.js';
 import fillAttributes from '../src/data/bucket/fill_attributes.js';
@@ -130,6 +130,7 @@ import lineAttributesExt from '../src/data/bucket/line_attributes_ext.js';
 import patternAttributes from '../src/data/bucket/pattern_attributes.js';
 import dashAttributes from '../src/data/bucket/dash_attributes.js';
 import skyboxAttributes from '../src/render/skybox_attributes.js';
+import tileBoundsAttributes from '../src/data/bounds_attributes.js';
 import {fillExtrusionAttributes, centroidAttributes} from '../src/data/bucket/fill_extrusion_attributes.js';
 
 // layout vertex arrays
@@ -208,6 +209,9 @@ createStructArrayType('line_strip_index', createLayout([
 // skybox vertex array
 createStructArrayType(`skybox_vertex`, skyboxAttributes);
 
+// tile bounds vertex array
+createStructArrayType(`tile_bounds`, tileBoundsAttributes);
+
 // paint vertex arrays
 
 // used by SourceBinder for float properties
@@ -244,7 +248,6 @@ fs.writeFileSync('src/data/array_types.js',
 import assert from 'assert';
 import {Struct, StructArray} from '../util/struct_array.js';
 import {register} from '../util/web_worker_transfer.js';
-import Point from '@mapbox/point-geometry';
 
 ${layouts.map(structArrayLayoutJs).join('\n')}
 ${arraysWithStructAccessors.map(structArrayJs).join('\n')}

@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel='stylesheet' href='../dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+        .map-overlay {
+            background-color: #fff;
+            border-radius: 3px;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+            font: bold 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+            left: 10px;
+            padding: 10px;
+            position: absolute;
+            top: 10px;
+            width: 150px;
+            z-index: 1;
+        }
+
+        fieldset {
+            border: none;
+            padding: 5px 0;
+        }
+
+        select, input {
+            background-color: transparent;
+            border-radius: 3px;
+            margin: 0;
+        }
+
+        select {
+            width: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="map-overlay top">
+        <fieldset>
+            <label>Projection:</label>
+            <select id="projName">
+                <option value="albers" selected>Albers USA</option>
+                <option value="equalEarth">Equal Earth</option>
+                <option value="equirectangular">Equirectangular</option>
+                <option value="lambertConformalConic">Lambert Conformal Conic</option>
+                <option value="mercator">Mercator</option>
+                <option value="naturalEarth">Natural Earth</option>
+                <option value="winkelTripel">Winkel Tripel</option>
+            </select>
+        </fieldset>
+        <fieldset>
+            <label>Style:</label>
+            <select id="styleName">
+                <option value="streets" selected>Streets</option>
+                <option value="satellite">Satellite</option>
+            </select>
+        </fieldset>
+        <fieldset>
+            <label>Graticule:</label>
+            <input id="graticule" type="checkbox">
+        </fieldset>
+        <fieldset>
+            <label>Show Debug Tiles:</label>
+            <input id="debug" type="checkbox" checked=true>
+        </fieldset>
+    </div>
+    <div id='map'></div>
+
+<script src='../dist/mapbox-gl-dev.js'></script>
+<script src='../debug/access_token_generated.js'></script>
+<script>
+
+let map;
+
+const zooms = {
+    albers: 3,
+    lambertConformalConic: 3,
+    winkelTripel: 1.2
+};
+const centers = {
+    albers: [-122.414, 37.776],
+    lambertConformalConic: [-122.414, 37.776]
+};
+
+makeMap();
+
+function makeMap() {
+    if (map) map.remove();
+    const el = document.getElementById('projName');
+    const projection = el.options[el.selectedIndex].value;
+    const zoom = zooms[projection] || 1;
+    const center = centers[projection] || [0, 0];
+    const styles = {
+        streets: 'mapbox://styles/mapbox/streets-v10',
+        satellite: 'mapbox://styles/mapbox/satellite-streets-v11'
+    };
+    const styleEl = document.getElementById('styleName');
+    const styleName = styleEl.options[styleEl.selectedIndex].value;
+    const style = styles[styleName];
+
+    map = new mapboxgl.Map({
+        projection,
+        container: 'map',
+        zoom,
+        center,
+        style,
+        hash: true
+    });
+    map.showTileBoundaries = true;
+    addGraticule();
+}
+
+map.on('click', function () {
+    console.log('projection', map.getProjection());
+});
+
+document.getElementById('projName').addEventListener('change', (e) => {
+    const el = document.getElementById('projName');
+    const projection = el.options[el.selectedIndex].value;
+    const zoom = zooms[projection] || 1;
+    const center = centers[projection] || [0, 0];
+    map.jumpTo({center, zoom});
+    map.setProjection(el.options[el.selectedIndex].value);
+});
+
+document.getElementById('styleName').addEventListener('change', (e) => {
+    makeMap();
+});
+
+document.getElementById('graticule').addEventListener('change', (e) => {
+    map.setPaintProperty('graticule', 'line-opacity', e.target.checked ? 1 : 0);
+});
+
+document.getElementById('debug').addEventListener('change', (e) => {
+    map.showTileBoundaries = e.target.checked;
+});
+
+function addGraticule() {
+    map.on('style.load', () => {
+        const fc = {
+            type: 'FeatureCollection',
+            features: []
+        };
+
+        for (let i = -170; i < 180; i += 10) {
+            fc.features.push({
+                type: 'Feature',
+                geometry: {
+                    type: 'LineString',
+                    coordinates: [[i, -80], [i, 80]]
+                }
+            });
+        }
+        for (let i = -80; i < 80; i += 10) {
+            fc.features.push({
+                type: 'Feature',
+                geometry: {
+                    type: 'LineString',
+                    coordinates: [[-180, i], [180, i]]
+                }
+            });
+        }
+
+        map.addSource('graticule', {
+            buffer: 0,
+            type: 'geojson',
+            data: fc
+        });
+
+        map.addLayer({
+            id: 'graticule',
+            source: 'graticule',
+            type: 'line',
+            paint: {
+                'line-width': 1,
+                'line-color': '#aaa',
+                'line-opacity': document.getElementById('graticule').checked ? 1 : 0
+            }
+        });
+    });
+}
+
+</script>
+</body>
+</html>
@@ -815,41 +815,6 @@ class StructArrayLayout1ui2 extends StructArray {
 StructArrayLayout1ui2.prototype.bytesPerElement = 2;
 register('StructArrayLayout1ui2', StructArrayLayout1ui2);
 
-/**
- * Implementation of the StructArray layout:
- * [0]: Float32[5]
- *
- * @private
- */
-class StructArrayLayout5f20 extends StructArray {
-    uint8: Uint8Array;
-    float32: Float32Array;
-
-    _refreshViews() {
-        this.uint8 = new Uint8Array(this.arrayBuffer);
-        this.float32 = new Float32Array(this.arrayBuffer);
-    }
-
-    emplaceBack(v0: number, v1: number, v2: number, v3: number, v4: number) {
-        const i = this.length;
-        this.resize(i + 1);
-        return this.emplace(i, v0, v1, v2, v3, v4);
-    }
-
-    emplace(i: number, v0: number, v1: number, v2: number, v3: number, v4: number) {
-        const o4 = i * 5;
-        this.float32[o4 + 0] = v0;
-        this.float32[o4 + 1] = v1;
-        this.float32[o4 + 2] = v2;
-        this.float32[o4 + 3] = v3;
-        this.float32[o4 + 4] = v4;
-        return i;
-    }
-}
-
-StructArrayLayout5f20.prototype.bytesPerElement = 20;
-register('StructArrayLayout5f20', StructArrayLayout5f20);
-
 /**
  * Implementation of the StructArray layout:
  * [0]: Float32[2]
@@ -1227,7 +1192,6 @@ export {
     StructArrayLayout1ul3ui12,
     StructArrayLayout2ui4,
     StructArrayLayout1ui2,
-    StructArrayLayout5f20,
     StructArrayLayout2f8,
     StructArrayLayout4f16,
     StructArrayLayout2i4 as PosArray,
@@ -1251,6 +1215,6 @@ export {
     StructArrayLayout3ui6 as TriangleIndexArray,
     StructArrayLayout2ui4 as LineIndexArray,
     StructArrayLayout1ui2 as LineStripIndexArray,
-    StructArrayLayout5f20 as GlobeVertexArray,
-    StructArrayLayout3f12 as SkyboxVertexArray
+    StructArrayLayout3f12 as SkyboxVertexArray,
+    StructArrayLayout4i8 as TileBoundsArray
 };
@@ -9,6 +9,7 @@ import type {FeatureStates} from '../source/source_state.js';
 import type {ImagePosition} from '../render/image_atlas.js';
 import type LineAtlas from '../render/line_atlas.js';
 import type {CanonicalTileID} from '../source/tile_id.js';
+import type {TileTransform} from '../geo/projection/tile_transform.js';
 
 export type BucketParameters<Layer: TypedStyleLayer> = {
     index: number,
@@ -78,7 +79,7 @@ export interface Bucket {
     +layers: Array<any>;
     +stateDependentLayers: Array<any>;
     +stateDependentLayerIds: Array<string>;
-    populate(features: Array<IndexedFeature>, options: PopulateParameters, canonical: CanonicalTileID): void;
+    populate(features: Array<IndexedFeature>, options: PopulateParameters, canonical: CanonicalTileID, tileTransform: TileTransform): void;
     update(states: FeatureStates, vtLayer: VectorTileLayer, availableImages: Array<string>, imagePositions: {[_: string]: ImagePosition}): void;
     isEmpty(): boolean;
 

@@ -28,6 +28,7 @@ import type VertexBuffer from '../../gl/vertex_buffer.js';
 import type Point from '@mapbox/point-geometry';
 import type {FeatureStates} from '../../source/source_state.js';
 import type {ImagePosition} from '../../render/image_atlas.js';
+import type {TileTransform} from '../../geo/projection/tile_transform.js';
 
 function addCircleVertex(layoutVertexArray, x, y, extrudeX, extrudeY) {
     layoutVertexArray.emplaceBack(
@@ -77,7 +78,7 @@ class CircleBucket<Layer: CircleStyleLayer | HeatmapStyleLayer> implements Bucke
         this.stateDependentLayerIds = this.layers.filter((l) => l.isStateDependent()).map((l) => l.id);
     }
 
-    populate(features: Array<IndexedFeature>, options: PopulateParameters, canonical: CanonicalTileID) {
+    populate(features: Array<IndexedFeature>, options: PopulateParameters, canonical: CanonicalTileID, tileTransform: TileTransform) {
         const styleLayer = this.layers[0];
         const bucketFeatures = [];
         let circleSortKey = null;
@@ -103,7 +104,7 @@ class CircleBucket<Layer: CircleStyleLayer | HeatmapStyleLayer> implements Bucke
                 type: feature.type,
                 sourceLayerIndex,
                 index,
-                geometry: needGeometry ? evaluationFeature.geometry : loadGeometry(feature),
+                geometry: needGeometry ? evaluationFeature.geometry : loadGeometry(feature, canonical, tileTransform),
                 patterns: {},
                 sortKey
             };

@@ -31,6 +31,7 @@ import type VertexBuffer from '../../gl/vertex_buffer.js';
 import type Point from '@mapbox/point-geometry';
 import type {FeatureStates} from '../../source/source_state.js';
 import type {ImagePosition} from '../../render/image_atlas.js';
+import type {TileTransform} from '../../geo/projection/tile_transform.js';
 
 class FillBucket implements Bucket {
     index: number;
@@ -75,7 +76,7 @@ class FillBucket implements Bucket {
         this.stateDependentLayerIds = this.layers.filter((l) => l.isStateDependent()).map((l) => l.id);
     }
 
-    populate(features: Array<IndexedFeature>, options: PopulateParameters, canonical: CanonicalTileID) {
+    populate(features: Array<IndexedFeature>, options: PopulateParameters, canonical: CanonicalTileID, tileTransform: TileTransform) {
         this.hasPattern = hasPattern('fill', this.layers, options);
         const fillSortKey = this.layers[0].layout.get('fill-sort-key');
         const bucketFeatures = [];
@@ -96,7 +97,7 @@ class FillBucket implements Bucket {
                 type: feature.type,
                 sourceLayerIndex,
                 index,
-                geometry: needGeometry ? evaluationFeature.geometry : loadGeometry(feature),
+                geometry: needGeometry ? evaluationFeature.geometry : loadGeometry(feature, canonical, tileTransform),
                 patterns: {},
                 sortKey
             };