iTowns · ftoromanoff · Jan 15, 2025 · Oct 29, 2024 · Oct 29, 2024 · Nov 25, 2024
diff --git a/examples/config.json b/examples/config.json
@@ -31,6 +31,7 @@
     "Vector tiles": {
         "vector_tile_raster_3d": "Raster on 3D map",
         "vector_tile_raster_2d": "Raster on 2D map",
+        "vector_tile_mapbox_raster": "Mapbox Vector Tiles to raster",
         "vector_tile_3d_mesh": "Vector tile to 3d objects",
         "vector_tile_3d_mesh_mapbox": "Mapbox Vector tile to 3d objects",
         "vector_tile_dragndrop": "Drag and drop a style"

diff --git a/examples/source_file_kml_raster_usgs.html b/examples/source_file_kml_raster_usgs.html
@@ -69,7 +69,6 @@
             }
 
             var kmlStyle = {
-                zoom: { min: 10, max: 20 },
                 text: {
                     field: '{name}',
                     haloColor: 'black',

diff --git a/examples/vector_tile_mapbox_raster.html b/examples/vector_tile_mapbox_raster.html
@@ -0,0 +1,91 @@
+<html>
+  <head>
+    <title>Itowns - vector-tiles 2d </title>
+
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="css/example.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="css/LoadingScreen.css"
+    />
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
+  </head>
+  <body>
+    <div id="viewerDiv"></div>
+
+    <!-- Import iTowns source code -->
+    <script src="../dist/itowns.js"></script>
+    <script src="../dist/debug.js"></script>
+    <!-- Import iTowns LoadingScreen and GuiTools plugins -->
+    <script src="js/GUI/GuiTools.js"></script>
+    <script src="js/GUI/LoadingScreen.js"></script>
+
+    <script>
+      const typeView = 'Planar';
+      // const typeView = 'Globe';
+
+      // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
+      var viewerDiv = document.getElementById('viewerDiv');
+      let view;
+
+      if (typeView === 'Globe') {
+        const coord = new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712); // Paris
+        // const coord = new itowns.Coordinates("EPSG:4326", 60.599525, 56.834341); // Yekaterinburg
+        const placement = {
+          coord,
+          range: 950000,
+        };
+        view = new itowns.GlobeView(viewerDiv, placement);
+      } else if (typeView === 'Planar') {
+        // Define geographic extent: CRS, min/max X, min/max Y
+        var extent = new itowns.Extent(
+            'EPSG:3857',
+            -20037508.342789244, 20037508.342789244,
+            -20037508.342789255, 20037508.342789244);
+
+        // Instanciate PlanarView
+        view = new itowns.PlanarView(viewerDiv, extent, {
+            maxSubdivisionLevel: 20,
+            controls: {
+                // We do not want the user to zoom out too much
+                maxAltitude: 40000000,
+                // We want to keep the rotation disabled, to only have a view from the top
+                enableRotation: false,
+                // Don't zoom too much on smart zoom
+                smartTravelHeightMax: 100000,
+            },
+        });
+      }
+
+      const debugMenu = new GuiTools("menuDiv", view);
+      setupLoadingScreen(viewerDiv, view);
+
+      const source = new itowns.VectorTilesSource({
+        style: "mapbox://styles/mapbox/streets-v8",
+        accessToken:
+          "pk.eyJ1IjoiZnRvcm9tYW5vZmYiLCJhIjoiY2xrc2Zpa2o3MDQxNTNxcG5sczJyaTlncyJ9.5KFKdMLIiy-b_fAjSVhjCQ",
+      });
+
+      const layer = new itowns.ColorLayer("vector-map", {
+        source,
+        noTextureParentOutsideLimit: true,
+        addLabelLayer: true,
+      });
+
+      view.addLayer(layer).then(() => {
+        debugMenu.addLayerGUI.bind(debugMenu);
+        itowns.ColorLayersOrdering.moveLayerToIndex(view, "vector-map", 15);
+      });
+
+      debug.createTileDebugUI(debugMenu.gui, view);
+    </script>
+  </body>
+</html>
diff --git a/src/Converter/Feature2Texture.js b/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

diff --git a/src/Core/Style.js b/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) {
@@ -158,7 +162,7 @@ function defineStyleProperty(style, category, parameter, userValue, defaultValue
                 const dataValue = style.context.featureStyle?.[category]?.[parameter];
                 if (dataValue != undefined) { return readExpression(dataValue, style.context); }
                 if (defaultValue instanceof Function) {
-                    return defaultValue(style.context.properties, style.context);
+                    return defaultValue(style.context.properties, style.context) ?? defaultValue;
                 }
                 return defaultValue;
             },
@@ -298,15 +302,12 @@ function _addIcon(icon, domElement, opt) {
 }
 
 /**
- * An object that can contain any properties (order, zoom, fill, stroke, point,
+ * An object that can contain any properties (zoom, fill, stroke, point,
  * text or/and icon) and sub properties of a Style.<br/>
  * Used for the instanciation of a {@link Style}.
  *
  * @typedef {Object} StyleOptions
  *
- * @property {Number} [order] - Order of the features that will be associated to
- * the style. It can helps sorting and prioritizing features if needed.
- *
  * @property {Object} [zoom] - Level on which to display the feature
  * @property {Number} [zoom.max] - max level
  * @property {Number} [zoom.min] - min level
@@ -464,8 +465,6 @@ function _addIcon(icon, domElement, opt) {
  * The first parameter of functions used to set `Style` properties is always an object containing
  * the properties of the features displayed with the current `Style` instance.
  *
- * @property {Number} order - Order of the features that will be associated to
- * the style. It can helps sorting and prioritizing features if needed.
  * @property {Object} fill - Polygons and fillings style.
  * @property {String|Function|THREE.Color} fill.color - Defines the main color of the filling. Can be
  * any [valid color
@@ -615,15 +614,13 @@ function _addIcon(icon, domElement, opt) {
 class Style {
     /**
      * @param {StyleOptions} [params={}] An object that contain any properties
-     * (order, zoom, fill, stroke, point, text or/and icon)
+     * (zoom, fill, stroke, point, text or/and icon)
      * and sub properties of a Style ({@link StyleOptions}).
      */
     constructor(params = {}) {
         this.isStyle = true;
         this.context = new StyleContext();
 
-        this.order = params.order || 0;
-
         params.zoom = params.zoom || {};
         params.fill = params.fill || {};
         params.stroke = params.stroke || {};
@@ -763,12 +760,11 @@ class Style {
      * set Style from vector tile layer properties.
      * @param {Object} layer vector tile layer.
      * @param {Object} sprites vector tile layer.
-     * @param {Number} [order=0]
      * @param {Boolean} [symbolToCircle=false]
      *
      * @returns {StyleOptions} containing all properties for itowns.Style
      */
-    static setFromVectorTileLayer(layer, sprites, order = 0, symbolToCircle = false) {
+    static setFromVectorTileLayer(layer, sprites, symbolToCircle = false) {
         const style = {
             fill: {},
             stroke: {},
@@ -780,8 +776,6 @@ class Style {
         layer.layout = layer.layout || {};
         layer.paint = layer.paint || {};
 
-        style.order = order;
-
         if (layer.type === 'fill') {
             const { color, opacity } = rgba2rgb(readVectorProperty(layer.paint['fill-color'] || layer.paint['fill-pattern'], { type: 'color' }));
             style.fill.color = color;
@@ -804,7 +798,8 @@ class Style {
                 style.stroke.color = color;
                 style.stroke.opacity = opacity;
                 style.stroke.width = 1.0;
-                style.stroke.dasharray = [];
+            } else {
+                style.stroke.width  = 0.0;
             }
         } else if (layer.type === 'line') {
             const prepare = readVectorProperty(layer.paint['line-color'], { type: 'color' });
@@ -820,6 +815,8 @@ class Style {
             style.point.opacity = opacity;
             style.point.radius = readVectorProperty(layer.paint['circle-radius']);
         } else if (layer.type === 'symbol') {
+            // if symbol we shouldn't draw stroke but defaut value is 1.
+            style.stroke.width = 0.0;
             // overlapping order
             style.text.zOrder = readVectorProperty(layer.layout['symbol-z-order']);
             if (style.text.zOrder == 'auto') {
@@ -840,7 +837,7 @@ class Style {
 
             // content
             style.text.field = readVectorProperty(layer.layout['text-field']);
-            style.text.wrap = readVectorProperty(layer.layout['text-max-width']);
+            style.text.wrap = readVectorProperty(layer.layout['text-max-width']);// Units ems
             style.text.spacing = readVectorProperty(layer.layout['text-letter-spacing']);
             style.text.transform = readVectorProperty(layer.layout['text-transform']);
             style.text.justify = readVectorProperty(layer.layout['text-justify']);
@@ -861,6 +858,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,29 +874,44 @@ 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`;
+                                            sprites[id] = cropValueDefault;// or return cropValueDefault;
+                                        }
                                         return sprites[id];
                                     };
+                                } else if (cropValues === undefined) {
+                                    // const warning = `WARNING: "${stop[1]}" not found in sprite file`;
+                                    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`;
+                                    sprites[id] = cropValueDefault;// or return cropValueDefault;
+                                }
                                 return sprites[id];
                             };
+                        } else if (sprites[iconImg] === undefined) {
+                            // const warning = `WARNING: "${iconImg}" not found in sprite file`;
+                            style.icon.cropValues = cropValueDefault;
                         }
                     }
                     style.icon.source = sprites.source;
-                    style.icon.size = readVectorProperty(layer.layout['icon-size']) || 1;
+                    style.icon.size = readVectorProperty(layer.layout['icon-size']) ?? 1;
                     const { color, opacity } = rgba2rgb(readVectorProperty(layer.paint['icon-color'], { type: 'color' }));
-                    style.icon.color = color;
-                    style.icon.opacity = readVectorProperty(layer.paint['icon-opacity']) || (opacity !== undefined && opacity);
+                    // https://docs.mapbox.com/style-spec/reference/layers/#paint-symbol-icon-color
+                    if (iconImg.sdf) {
+                        style.icon.color = color;
+                    }
+                    style.icon.opacity = readVectorProperty(layer.paint['icon-opacity']) ?? (opacity !== undefined && opacity);
                 } catch (err) {
                     err.message = `VTlayer '${layer.id}': argument sprites must not be null when using layer.layout['icon-image']`;
                     throw err;
@@ -919,29 +937,28 @@ 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) {
+        if (this.stroke.width > 0) {
             // 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);
         }
     }
 
     _applyStrokeToPolygon(txtrCtx, invCtxScale, polygon) {
         if (txtrCtx.strokeStyle !== this.stroke.color) {
             txtrCtx.strokeStyle = this.stroke.color;
         }
-        const width = (this.stroke.width || 2.0) * invCtxScale;
+        const width = this.stroke.width * invCtxScale;
         if (txtrCtx.lineWidth !== width) {
             txtrCtx.lineWidth = width;
         }
-        const alpha = this.stroke.opacity == undefined ? 1.0 : this.stroke.opacity;
+        const alpha = this.stroke.opacity;
         if (alpha !== txtrCtx.globalAlpha && typeof alpha == 'number') {
             txtrCtx.globalAlpha = alpha;
         }
@@ -957,7 +974,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 +1049,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);