MapBox VectorTile: bug fixes using an official MapBox stream

examples/source_file_kml_raster_usgs.html

@@ -69,7 +69,6 @@
             }
 
             var kmlStyle = {
-                zoom: { min: 10, max: 20 },
                 text: {
                     field: '{name}',
                     haloColor: 'black',

src/Converter/Feature2Texture.js

@@ -70,6 +70,9 @@ function drawFeature(ctx, feature, extent, invCtxScale) {
     for (const geometry of feature.geometries) {
         if (Extent.intersectsExtent(geometry.extent, extent)) {
             context.setGeometry(geometry);
+            if (style.zoom.min > style.context.zoom || style.zoom.max <= style.context.zoom) {
+                return;
+            }
 
             if (
                 feature.type === FEATURE_TYPES.POINT && style.point

src/Core/Style.js

@@ -87,14 +87,18 @@ async function loadImage(source) {
     return (await promise).image;
 }
 
-function cropImage(img, cropValues = { width: img.naturalWidth, height: img.naturalHeight }) {
-    canvas.width = cropValues.width;
-    canvas.height = cropValues.height;
+function cropImage(img, cropValues) {
+    const x = cropValues.x || 0;
+    const y = cropValues.y || 0;
+    const width = cropValues.width || img.naturalWidth;
+    const height = cropValues.height || img.naturalHeight;
+    canvas.width = width;
+    canvas.height = height;
     const ctx = canvas.getContext('2d', { willReadFrequently: true });
     ctx.drawImage(img,
-        cropValues.x || 0, cropValues.y || 0, cropValues.width, cropValues.height,
-        0, 0, cropValues.width, cropValues.height);
-    return ctx.getImageData(0, 0, cropValues.width, cropValues.height);
+        x, y, width, height,
+        0, 0, width, height);
+    return ctx.getImageData(0, 0, width, height);
 }
 
 function replaceWhitePxl(imgd, color, id) {
@@ -765,10 +769,11 @@ class Style {
      * @param {Object} sprites vector tile layer.
      * @param {Number} [order=0]
      * @param {Boolean} [symbolToCircle=false]
+     * @param {Set} warn Set storing all warnings encountered by the source.
      *
      * @returns {StyleOptions} containing all properties for itowns.Style
      */
-    static setFromVectorTileLayer(layer, sprites, order = 0, symbolToCircle = false) {
+    static setFromVectorTileLayer(layer, sprites, order = 0, symbolToCircle = false, warn) {
         const style = {
             fill: {},
             stroke: {},
@@ -861,6 +866,12 @@ class Style {
             // additional icon
             const iconImg = readVectorProperty(layer.layout['icon-image']);
             if (iconImg) {
+                const cropValueDefault = {
+                    x: 0,
+                    y: 0,
+                    width: 1,
+                    height: 1,
+                };
                 try {
                     style.icon.id = iconImg;
                     if (iconImg.stops) {
@@ -871,22 +882,50 @@ class Style {
                                 if (stop[1].includes('{')) {
                                     cropValues = function _(p) {
                                         const id = stop[1].replace(/\{(.+?)\}/g, (a, b) => (p[b] || '')).trim();
-                                        cropValues = sprites[id];
+                                        if (cropValues === undefined) {
+                                            const warning = `WARNING: "${id}" not found in sprite file`;
+                                            if (!warn.has(warning)) {
+                                                warn.add(warning);
+                                                console.warn(warning);
+                                            }
+                                            sprites[id] = cropValueDefault;// or return cropValueDefault;
+                                        }
                                         return sprites[id];
                                     };
+                                } else if (cropValues === undefined) {
+                                    const warning = `WARNING: "${stop[1]}" not found in sprite file`;
+                                    if (!warn.has(warning)) {
+                                        warn.add(warning);
+                                        console.warn(warning);
+                                    }
+                                    cropValues = cropValueDefault;
                                 }
                                 return [stop[0], cropValues];
                             }),
                         };
                         style.icon.cropValues = iconCropValue;
                     } else {
                         style.icon.cropValues = sprites[iconImg];
-                        if (iconImg[0].includes('{')) {
+                        if (iconImg.includes('{')) {
                             style.icon.cropValues = function _(p) {
                                 const id = iconImg.replace(/\{(.+?)\}/g, (a, b) => (p[b] || '')).trim();
-                                style.icon.cropValues = sprites[id];
+                                if (sprites[id] === undefined) {
+                                    const warning = `WARNING: "${id}" not found in sprite file`;
+                                    if (!warn.has(warning)) {
+                                        warn.add(warning);
+                                        console.warn(warning);
+                                    }
+                                    sprites[id] = cropValueDefault;// or return cropValueDefault;
+                                }
                                 return sprites[id];
                             };
+                        } else if (sprites[iconImg] === undefined) {
+                            const warning = `WARNING: "${iconImg}" not found in sprite file`;
+                            if (!warn.has(warning)) {
+                                warn.add(warning);
+                                console.warn(warning);
+                            }
+                            style.icon.cropValues = cropValueDefault;
                         }
                     }
                     style.icon.source = sprites.source;
@@ -919,17 +958,16 @@ class Style {
      * @param {Boolean} canBeFilled - true if feature.type == FEATURE_TYPES.POLYGON.
      */
     applyToCanvasPolygon(txtrCtx, polygon, invCtxScale, canBeFilled) {
-        const context = this.context;
         // draw line or edge of polygon
         if (this.stroke) {
             // TO DO add possibility of using a pattern (https://github.com/iTowns/itowns/issues/2210)
-            this._applyStrokeToPolygon(txtrCtx, invCtxScale, polygon, context);
+            this._applyStrokeToPolygon(txtrCtx, invCtxScale, polygon);
         }
 
         // fill inside of polygon
-        if (canBeFilled && this.fill) {
+        if (canBeFilled && (this.fill.pattern || this.fill.color)) {
             // canBeFilled can be move to StyleContext in the later PR
-            this._applyFillToPolygon(txtrCtx, invCtxScale, polygon, context);
+            this._applyFillToPolygon(txtrCtx, invCtxScale, polygon);
         }
     }
 
@@ -957,7 +995,7 @@ class Style {
         // need doc for the txtrCtx.fillStyle.src that seems to always be undefined
         if (this.fill.pattern) {
             let img = this.fill.pattern;
-            const cropValues = this.fill.pattern.cropValues;
+            const cropValues = { ...this.fill.pattern.cropValues };
             if (this.fill.pattern.source) {
                 img = await loadImage(this.fill.pattern.source);
             }
@@ -1032,7 +1070,7 @@ class Style {
         if (!this.icon.cropValues && !this.icon.color) {
             icon.src = this.icon.source;
         } else {
-            const cropValues = this.icon.cropValues;
+            const cropValues = { ...this.icon.cropValues };
             const color = this.icon.color;
             const id = this.icon.id || this.icon.source;
             const img = await loadImage(this.icon.source);

src/Layer/LabelLayer.js

@@ -250,6 +250,11 @@ class LabelLayer extends GeometryLayer {
         data.features.forEach((f) => {
             // TODO: add support for LINE and POLYGON
             if (f.type !== FEATURE_TYPES.POINT) {
+                const warn = `Type label ${Object.keys(FEATURE_TYPES).filter(ft => FEATURE_TYPES[ft] === f.type)} not supported`;
+                if (!this.source.warn.has(warn)) {
+                    this.source.warn.add(warn);
+                    console.warn(warn);
+                }
                 return;
             }
             context.setFeature(f);
@@ -288,6 +293,10 @@ class LabelLayer extends GeometryLayer {
                     }
                 }
 
+                if (this.style.zoom.min > this.style.context.zoom || this.style.zoom.max <= this.style.context.zoom) {
+                    return;
+                }
+
                 const label = new Label(content, coord.clone(), this.style);
 
                 label.layerId = this.id;

src/Parser/VectorTileParser.js

@@ -116,10 +116,11 @@ function vtFeatureToFeatureGeometry(vtFeature, feature, classify = false) {
 function readPBF(file, options) {
     options.out = options.out || {};
     const vectorTile = new VectorTile(new Protobuf(file));
-    const sourceLayers = Object.keys(vectorTile.layers);
+    const vtLayerNames = Object.keys(vectorTile.layers);
 
-    if (sourceLayers.length < 1) {
-        return;
+    const collection = new FeatureCollection(options.out);
+    if (vtLayerNames.length < 1) {
+        return Promise.resolve(collection);
     }
 
     // x,y,z tile coordinates
@@ -130,26 +131,27 @@ function readPBF(file, options) {
     // Only if the layer.origin is top
     const y = options.in.isInverted ? options.extent.row : (1 << z) - options.extent.row - 1;
 
-    const collection = new FeatureCollection(options.out);
-
-    const vFeature = vectorTile.layers[sourceLayers[0]];
-    // TODO: verify if size is correct because is computed with only one feature (vFeature).
-    const size = vFeature.extent * 2 ** z;
+    const vFeature0 = vectorTile.layers[vtLayerNames[0]];
+    // TODO: verify if size is correct because is computed with only one feature (vFeature0).
+    const size = vFeature0.extent * 2 ** z;
     const center = -0.5 * size;
 
     collection.scale.set(globalExtent.x / size, -globalExtent.y / size, 1);
-    collection.position.set(vFeature.extent * x + center, vFeature.extent * y + center, 0).multiply(collection.scale);
+    collection.position.set(vFeature0.extent * x + center, vFeature0.extent * y + center, 0).multiply(collection.scale);
     collection.updateMatrixWorld();
 
-    sourceLayers.forEach((layer_id) => {
-        if (!options.in.layers[layer_id]) { return; }
+    vtLayerNames.forEach((vtLayerName) => {
+        if (!options.in.layers[vtLayerName]) { return Promise.resolve(collection); }
 
-        const sourceLayer = vectorTile.layers[layer_id];
+        const vectorTileLayer = vectorTile.layers[vtLayerName];
 
-        for (let i = sourceLayer.length - 1; i >= 0; i--) {
-            const vtFeature = sourceLayer.feature(i);
+        for (let i = vectorTileLayer.length - 1; i >= 0; i--) {
+            const vtFeature = vectorTileLayer.feature(i);
             vtFeature.tileNumbers = { x, y: options.extent.row, z };
-            const layers = options.in.layers[layer_id].filter(l => l.filterExpression.filter({ zoom: z }, vtFeature) && z >= l.zoom.min && z < l.zoom.max);
+            // Find layers where this vtFeature is used
+            const layers = options.in.layers[vtLayerName]
+                .filter(l => l.filterExpression.filter({ zoom: z }, vtFeature));
+
             let feature;
 
             for (const layer of layers) {

src/Source/Source.js

@@ -108,6 +108,7 @@ class Source extends InformationsData {
     constructor(source) {
         super(source);
         this.isSource = true;
+        this.warn = new Set();
 
         if (!source.url) {
             throw new Error('New Source: url is required');

src/Source/VectorTilesSource.js

@@ -71,38 +71,47 @@ class VectorTilesSource extends TMSSource {
 
         this.accessToken = source.accessToken;
 
+        let mvtStyleUrl;
         if (source.style) {
             if (typeof source.style == 'string') {
-                const styleUrl = urlParser.normalizeStyleURL(source.style, this.accessToken);
-                promise = Fetcher.json(styleUrl, this.networkOptions);
+                mvtStyleUrl = urlParser.normalizeStyleURL(source.style, this.accessToken);
+                promise = Fetcher.json(mvtStyleUrl, this.networkOptions);
             } else {
                 promise = Promise.resolve(source.style);
             }
         } else {
             throw new Error('New VectorTilesSource: style is required');
         }
 
-        this.whenReady = promise.then((style) => {
-            this.jsonStyle = style;
-            const baseurl = source.sprite || style.sprite;
+        this.whenReady = promise.then((mvtStyle) => {
+            this.jsonStyle = mvtStyle;
+            let baseurl = source.sprite || mvtStyle.sprite;
             if (baseurl) {
+                baseurl = new URL(baseurl, mvtStyleUrl).toString();
                 const spriteUrl = urlParser.normalizeSpriteURL(baseurl, '', '.json', this.accessToken);
                 return Fetcher.json(spriteUrl, this.networkOptions).then((sprites) => {
                     this.sprites = sprites;
                     const imgUrl = urlParser.normalizeSpriteURL(baseurl, '', '.png', this.accessToken);
                     this.sprites.source = imgUrl;
-                    return style;
+                    return mvtStyle;
                 });
             }
 
-            return style;
-        }).then((style) => {
-            style.layers.forEach((layer, order) => {
+            return mvtStyle;
+        }).then((mvtStyle) => {
+            mvtStyle.layers.forEach((layer, order) => {
                 layer.sourceUid = this.uid;
                 if (layer.type === 'background') {
                     this.backgroundLayer = layer;
                 } else if (ffilter(layer)) {
-                    const style = Style.setFromVectorTileLayer(layer, this.sprites, order, this.symbolToCircle);
+                    if (layer['source-layer'] === undefined) {
+                        const refProperties = ['type', 'source', 'source-layer', 'minzoom', 'maxzoom', 'filter', 'layout'];
+                        const refLayer = mvtStyle.layers.filter(l => l.id === layer.ref)[0];
+                        refProperties.forEach((prop) => {
+                            layer[prop] = refLayer[prop];
+                        });
+                    }
+                    const style = Style.setFromVectorTileLayer(layer, this.sprites, order, this.symbolToCircle, this.warn);
                     this.styles[layer.id] = style;
 
                     if (!this.layers[layer['source-layer']]) {
@@ -112,20 +121,18 @@ class VectorTilesSource extends TMSSource {
                         id: layer.id,
                         order,
                         filterExpression: featureFilter(layer.filter),
-                        zoom: {
-                            min: layer.minzoom || 0,
-                            max: layer.maxzoom || 24,
-                        },
                     });
                 }
             });
 
             if (this.url == '.') {
-                const TMSUrlList = Object.values(style.sources).map((sourceVT) => {
+                const TMSUrlList = Object.values(mvtStyle.sources).map((sourceVT) => {
                     if (sourceVT.url) {
+                        sourceVT.url = new URL(sourceVT.url, mvtStyleUrl).toString();
                         const urlSource = urlParser.normalizeSourceURL(sourceVT.url, this.accessToken);
                         return Fetcher.json(urlSource, this.networkOptions).then((tileJSON) => {
                             if (tileJSON.tiles[0]) {
+                                tileJSON.tiles[0] = decodeURIComponent(new URL(tileJSON.tiles[0], urlSource).toString());
                                 return toTMSUrl(tileJSON.tiles[0]);
                             }
                         });
@@ -136,7 +143,7 @@ class VectorTilesSource extends TMSSource {
                 });
                 return Promise.all(TMSUrlList);
             }
-            return (Promise.resolve([this.url]));
+            return (Promise.resolve([toTMSUrl(this.url)]));
         }).then((TMSUrlList) => {
             this.urls = Array.from(new Set(TMSUrlList));
         });

test/data/vectortiles/style.json

@@ -19,7 +19,8 @@
             "maxzoom": 13,
             "paint": {
                 "fill-color": "rgb(255, 0, 0)"
-            }
+            },
+            "source-layer": "source_layer"
         }
     ]
 }