Add support for MLT

.gitattributes

@@ -6,6 +6,7 @@
 # Denote all files that are truly binary and should not be modified.
 *.png binary
 *.mvt binary
+*.mlt binary
 *.pbf binary
 *.tif binary
 

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### ✨ Features and improvements
 - Improve performance of `GeoJSONSource#updateData` when called on small diffs ([#6562](https://github.com/maplibre/maplibre-gl-js/pull/6562))
+- Add support for MapLibre Tiles (MLT) by using `encoding: 'mlt'` in vector source definition ([#6570](https://github.com/maplibre/maplibre-gl-js/pull/6570))
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
@@ -13,10 +14,10 @@
 - Add time control API (`setNow`, `restoreNow`, `isTimeFrozen`) for deterministic rendering, enabling frame-by-frame video export and deterministic testing ([6544](https://github.com/maplibre/maplibre-gl-js/pull/6544))
 - Use styles `isHidden` logic in the worker by adding a new optional `roundMinZoom` parameter ([#6547](https://github.com/maplibre/maplibre-gl-js/pull/6547))
 - Add `transformConstrain` callback to the `Map` options to override the transform's `constrain` with new type `TransformConstrainFunction`; refactor transform constructor options to a `TransformOptions` object ([#6484](https://github.com/maplibre/maplibre-gl-js/issues/6484))
-- Use timeControl.now() instead of browser.now() ([6573](https://github.com/maplibre/maplibre-gl-js/pull/6573))
+- Use timeControl.now() instead of browser.now() ([#6573](https://github.com/maplibre/maplibre-gl-js/pull/6573))
 
 ### 🐞 Bug fixes
-- Contextmenu events not blocked by scrolling ([#5683](https://github.com/maplibre/maplibre-gl-js/issues/5683)
+- Contextmenu events not blocked by scrolling ([#5683](https://github.com/maplibre/maplibre-gl-js/issues/5683))
 - Mousemove events are not blocked by scrolling ([#6302](https://github.com/maplibre/maplibre-gl-js/issues/6302))
 - Dashed lines have blurry rounded caps ([#6554](https://github.com/maplibre/maplibre-gl-js/pull/6554))
 - Preserve flyTo padding when prefers-reduced-motion is enabled ([#6576](https://github.com/maplibre/maplibre-gl-js/issues/6576))

package.json

@@ -25,6 +25,7 @@
     "@mapbox/vector-tile": "^2.0.4",
     "@mapbox/whoots-js": "^3.1.0",
     "@maplibre/maplibre-gl-style-spec": "^24.3.0",
+    "@maplibre/mlt": "^0.0.1-alpha.12",
     "@maplibre/vt-pbf": "^4.0.3",
     "@types/geojson": "^7946.0.16",
     "@types/geojson-vt": "3.2.5",

src/source/mlt_vector_tile.ts

@@ -0,0 +1,86 @@
+import Point from '@mapbox/point-geometry';
+import {type VectorTile, type VectorTileFeature, type VectorTileLayer} from '@mapbox/vector-tile';
+import {type FeatureTable, decodeTile, type Feature as MLTFeature, GEOMETRY_TYPE} from '@maplibre/mlt';
+
+type PublicPart<T> = {[K in keyof T]: T[K]};
+
+class MLTVectorTileFeature implements PublicPart<VectorTileFeature> {
+    _featureData: MLTFeature;
+    properties: {[_: string]: any};
+    type: VectorTileFeature['type'];
+    extent: VectorTileFeature['extent'];
+    id: VectorTileFeature['id'];
+
+    constructor(feature: MLTFeature, extent: number) {
+        this._featureData = feature;
+        this.properties = this._featureData.properties || {};
+        switch (this._featureData.geometry?.type) {
+            case GEOMETRY_TYPE.POINT:
+            case GEOMETRY_TYPE.MULTIPOINT:
+                this.type = 1;
+                break;
+            case GEOMETRY_TYPE.LINESTRING:
+            case GEOMETRY_TYPE.MULTILINESTRING:
+                this.type = 2;
+                break;
+            case GEOMETRY_TYPE.POLYGON:
+            case GEOMETRY_TYPE.MULTIPOLYGON:
+                this.type = 3;
+                break;
+            default:
+                this.type = 0;
+        };
+        this.extent = extent;
+        this.id = Number(this._featureData.id);
+    }
+
+    toGeoJSON(_x: number, _y: number, _z: number): GeoJSON.Feature {
+        throw new Error('MLTVectorTileFeature.toGeoJSON not implemented');
+    }
+
+    loadGeometry(): Point[][] {
+        const points: Point[][] = [];
+        for (const ring of this._featureData.geometry.coordinates) {
+            const pointRing: Point[] = [];
+            for (const coord of ring) {
+                pointRing.push(new Point(coord.x, coord.y));
+            }
+            points.push(pointRing);
+        }
+        return points;
+    }
+    bbox(): number[] {
+        return [0, 0, 0, 0];
+    }
+}
+
+class MLTVectorTileLayer implements PublicPart<VectorTileLayer> {
+    featureTable: FeatureTable;
+    name: string;
+    length: number;
+    version: number;
+    extent: number;
+    features: MLTFeature[] = [];
+
+    constructor(featureTable: FeatureTable) {
+        this.featureTable = featureTable;
+        this.name = featureTable.name;
+        this.extent = featureTable.extent;
+        this.version = 2;
+        this.features = featureTable.getFeatures();
+        this.length = this.features.length;
+    }
+
+    feature(i: number): VectorTileFeature {
+        return new MLTVectorTileFeature(this.features[i], this.extent) as unknown as VectorTileFeature;
+    }
+}
+
+export class MLTVectorTile implements VectorTile {
+    layers: Record<string, VectorTileLayer> = {};
+
+    constructor(buffer: ArrayBuffer) {
+        const features = decodeTile(new Uint8Array(buffer));
+        this.layers = features.reduce((acc, f) => ({...acc, [f.name]: new MLTVectorTileLayer(f)}), {});
+    }
+}

src/source/vector_tile_source.ts

@@ -20,7 +20,7 @@ export type VectorTileSourceOptions = VectorSourceSpecification & {
 };
 
 /**
- * A source containing vector tiles in [Mapbox Vector Tile format](https://docs.mapbox.com/vector-tiles/reference/).
+ * A source containing vector tiles in [Maplibre Vector Tile format](https://maplibre.org/maplibre-tile-spec/) or [Mapbox Vector Tile format](https://docs.mapbox.com/vector-tiles/reference/).
  * (See the [Style Specification](https://maplibre.org/maplibre-style-spec/) for detailed documentation of options.)
  *
  * @group Sources
@@ -61,6 +61,7 @@ export class VectorTileSource extends Evented implements Source {
     maxzoom: number;
     url: string;
     scheme: string;
+    encoding: string;
     tileSize: number;
     promoteId: PromoteIdSpecification;
 
@@ -90,7 +91,7 @@ export class VectorTileSource extends Evented implements Source {
         this.isTileClipped = true;
         this._loaded = false;
 
-        extend(this, pick(options, ['url', 'scheme', 'tileSize', 'promoteId']));
+        extend(this, pick(options, ['url', 'scheme', 'tileSize', 'promoteId', 'encoding']));
         this._options = extend({type: 'vector'}, options);
 
         this._collectResourceTiming = options.collectResourceTiming;
@@ -202,7 +203,8 @@ export class VectorTileSource extends Evented implements Source {
             pixelRatio: this.map.getPixelRatio(),
             showCollisionBoxes: this.map.showCollisionBoxes,
             promoteId: this.promoteId,
-            subdivisionGranularity: this.map.style.projection.subdivisionGranularity
+            subdivisionGranularity: this.map.style.projection.subdivisionGranularity,
+            encoding: this.encoding
         };
         params.request.collectResourceTiming = this._collectResourceTiming;
         let messageType: MessageType.loadTile | MessageType.reloadTile = MessageType.reloadTile;

src/source/vector_tile_worker_source.ts

@@ -15,6 +15,7 @@
 import type {IActor} from '../util/actor';
 import type {StyleLayerIndex} from '../style/style_layer_index';
 import {VectorTile} from '@mapbox/vector-tile';
+import {MLTVectorTile} from './mlt_vector_tile';
 
 export type LoadVectorTileResult = {
     vectorTile: VectorTile;
@@ -66,7 +67,9 @@
     async loadVectorTile(params: WorkerTileParameters, abortController: AbortController): Promise<LoadVectorTileResult> {
         const response = await getArrayBuffer(params.request, abortController);
         try {
-            const vectorTile = new VectorTile(new Protobuf(response.data));
+            const vectorTile = params.encoding !== 'mlt' 
+                ? new VectorTile(new Protobuf(response.data)) 
+                : new MLTVectorTile(response.data);
             return {
                 vectorTile,
                 rawData: response.data,

src/source/worker_source.ts

@@ -40,6 +40,7 @@ export type WorkerTileParameters = TileParameters & {
     collectResourceTiming?: boolean;
     returnDependencies?: boolean;
     subdivisionGranularity: SubdivisionGranularitySetting;
+    encoding?: string;
 };
 
 /**

test/build/min.test.ts

@@ -38,7 +38,7 @@ describe('test min build', () => {
         const decreaseQuota = 4096;
 
         // feel free to update this value after you've checked that it has changed on purpose :-)
-        const expectedBytes = 956986;
+        const expectedBytes = 1024126;
 
         expect(actualBytes).toBeLessThan(expectedBytes + increaseQuota);
         expect(actualBytes).toBeGreaterThan(expectedBytes - decreaseQuota);

test/integration/render/tests/mlt/render-layers/render-building/style.json

@@ -0,0 +1,33 @@
+{
+    "version": 8,
+    "metadata": {
+        "test": {
+            "debug": true,
+            "height": 256
+        }
+    },
+    "center": [
+        11.525101,
+        48.144716
+    ],
+    "zoom": 14.92,
+    "sources": {
+        "openmaptiles": {
+            "type": "vector",
+            "encoding": "mlt",
+            "tiles": ["local://tiles/mlt/{z}/{x}/{y}.mlt"]
+        }
+    },
+    "sprite": "local://sprites/sprite",
+    "layers": [
+        {
+            "id": "building",
+            "type": "fill",
+            "source": "openmaptiles",
+            "source-layer": "building",
+            "paint": {
+                "fill-color": "#c86432"
+            }
+        }
+    ]
+}

test/integration/render/tests/mlt/render-layers/render-housenr/style.json

@@ -0,0 +1,40 @@
+{
+    "version": 8,
+    "metadata": {
+        "test": {
+            "debug": true,
+            "height": 256
+        }
+    },
+    "center": [
+        11.529107,
+        48.146443
+    ],
+    "zoom": 17.81,
+    "sources": {
+        "openmaptiles": {
+            "type": "vector",
+            "encoding": "mlt",
+            "tiles": ["local://tiles/mlt/{z}/{x}/{y}.mlt"],
+            "maxzoom": 14
+        }
+    },
+    "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
+    "sprite": "local://sprites/sprite",
+    "layers": [
+        {
+            "id": "housenumber",
+            "type": "symbol",
+            "source": "openmaptiles",
+            "source-layer": "housenumber",
+            "layout": {
+                "text-field": "{housenumber}",
+                "text-font": ["Noto Sans Regular"],
+                "text-size": 30
+            },
+            "paint": {
+                "text-color": "#ffffff"
+            }
+        }
+    ]
+}

test/integration/render/tests/mlt/render-layers/render-labels/style.json

@@ -0,0 +1,40 @@
+{
+    "version": 8,
+    "metadata": {
+        "test": {
+            "debug": true,
+            "height": 256
+        }
+    },
+    "center": [
+        15.311276,
+        50.821840
+    ],
+    "zoom": 5.7,
+    "sources": {
+        "openmaptiles": {
+            "type": "vector",
+            "encoding": "mlt",
+            "tiles": ["local://tiles/mlt/{z}/{x}/{y}.mlt"],
+            "maxzoom": 14
+        }
+    },
+    "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
+    "sprite": "local://sprites/sprite",
+    "layers": [
+        {
+            "id": "place_label_other",
+            "type": "symbol",
+            "source": "openmaptiles",
+            "source-layer": "place",
+            "layout": {
+                "text-field": "{name:latin}",
+                "text-font": ["Noto Sans Regular"],
+                "text-size": ["interpolate", ["linear"], ["zoom"], 3, 12, 8, 22]
+            },
+            "paint": {
+                "text-color": "#ffffff"
+            }
+        }
+    ]
+}

test/integration/render/tests/mlt/render-layers/render-landcover/style.json

@@ -0,0 +1,34 @@
+{
+    "version": 8,
+    "metadata": {
+        "test": {
+            "debug": true,
+            "height": 256
+        }
+    },
+    "center": [
+        73,
+        36
+    ],
+    "zoom": 5.99,
+    "sources": {
+        "openmaptiles": {
+            "type": "vector",
+            "encoding": "mlt",
+            "tiles": ["local://tiles/mlt/{z}/{x}/{y}.mlt"],
+            "maxzoom": 14
+        }
+    },
+    "sprite": "local://sprites/sprite",
+    "layers": [
+        {
+            "id": "landcover",
+            "type": "fill",
+            "source": "openmaptiles",
+            "source-layer": "landcover",
+            "paint": {
+                "fill-color": "#008000"
+            }
+        }
+    ]
+}