npm - itowns - Versions diffs - 2.44.3-next.30 → 2.44.3-next.31 - Mend

itowns 2.44.3-next.30 → 2.44.3-next.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/itowns.js +1 -1
package/dist/itowns.js.map +1 -1
package/examples/config.json +1 -0
package/examples/source_file_kml_raster_usgs.html +0 -1
package/examples/vector_tile_mapbox_raster.html +91 -0
package/lib/Converter/Feature2Texture.js +3 -0
package/lib/Core/Style.js +57 -39
package/lib/Layer/LabelLayer.js +26 -18
package/lib/Parser/VectorTileParser.js +41 -28
package/lib/Renderer/Label2DRenderer.js +9 -7
package/lib/Source/VectorTilesSource.js +29 -17
package/package.json +1 -1

package/examples/config.json CHANGED Viewed

@@ -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"

package/examples/source_file_kml_raster_usgs.html CHANGED Viewed

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

package/examples/vector_tile_mapbox_raster.html ADDED Viewed

@@ -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>

package/lib/Converter/Feature2Texture.js CHANGED Viewed

@@ -71,6 +71,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) {
         // cross multiplication to know in the extent system the real size of
         // the point

package/lib/Core/Style.js CHANGED Viewed

@@ -90,18 +90,18 @@ async function loadImage(source) {
   }
   return (await promise).image;
 }
-function cropImage(img) {
-  let cropValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    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);
+  ctx.drawImage(img, x, y, width, height, 0, 0, width, height);
+  return ctx.getImageData(0, 0, width, height);
 }
 function replaceWhitePxl(imgd, color, id) {
   if (!color) {
@@ -166,7 +166,7 @@ function defineStyleProperty(style, category, parameter, userValue, defaultValue
         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;
     },
@@ -294,15 +294,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
@@ -460,8 +457,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
@@ -611,14 +606,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() {
     let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     this.isStyle = true;
     this.context = new StyleContext();
-    this.order = params.order || 0;
     params.zoom = params.zoom || {};
     params.fill = params.fill || {};
     params.stroke = params.stroke || {};
@@ -783,14 +777,12 @@ 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) {
-    let order = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-    let symbolToCircle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+    let symbolToCircle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     const style = {
       fill: {},
       stroke: {},
@@ -800,7 +792,6 @@ class Style {
     };
     layer.layout = layer.layout || {};
     layer.paint = layer.paint || {};
-    style.order = order;
     if (layer.type === 'fill') {
       const {
         color,
@@ -832,7 +823,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'], {
@@ -858,6 +850,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') {
@@ -878,7 +872,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']);
@@ -905,6 +899,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) {
@@ -917,9 +917,15 @@ 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];
               })
@@ -927,24 +933,33 @@ class Style {
             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;
@@ -970,28 +985,27 @@ 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;
     }
@@ -1006,7 +1020,9 @@ 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);
       }
@@ -1074,7 +1090,9 @@ 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);

package/lib/Layer/LabelLayer.js CHANGED Viewed

@@ -5,7 +5,6 @@ import GeometryLayer from "./GeometryLayer.js";
 import Coordinates from "../Core/Geographic/Coordinates.js";
 import Extent from "../Core/Geographic/Extent.js";
 import Label from "../Core/Label.js";
-import { FEATURE_TYPES } from "../Core/Feature.js";
 import { readExpression, StyleContext } from "../Core/Style.js";
 import { ScreenGrid } from "../Renderer/Label2DRenderer.js";
 const context = new StyleContext();
@@ -238,9 +237,10 @@ class LabelLayer extends GeometryLayer {
     coord.crs = data.crs;
     context.setZoom(extentOrTile.zoom);
     data.features.forEach(f => {
-      // TODO: add support for LINE and POLYGON
-      if (f.type !== FEATURE_TYPES.POINT) {
-        return;
+      if (f.style.text) {
+        if (Object.keys(f.style.text).length === 0) {
+          return;
+        }
       }
       context.setFeature(f);
       const featureField = f.style?.text?.field;
@@ -252,19 +252,11 @@ class LabelLayer extends GeometryLayer {
       // determine if the altitude needs update with ElevationLayer
       labels.needsAltitude = labels.needsAltitude || this.forceClampToTerrain === true || isDefaultElevationStyle && !f.hasRawElevationData;
       f.geometries.forEach(g => {
-        // NOTE: this only works because only POINT is supported, it
-        // needs more work for LINE and POLYGON
-        coord.setFromArray(f.vertices, g.size * g.indices[0].offset);
-        // Transform coordinate to data.crs projection
-        coord.applyMatrix4(data.matrixWorld);
-        if (!_extent.isPointInside(coord)) {
-          return;
-        }
-        const geometryField = g.properties.style && g.properties.style.text && g.properties.style.text.field;
         context.setGeometry(g);
-        let content;
         this.style.setContext(context);
         const layerField = this.style.text && this.style.text.field;
+        const geometryField = g.properties.style && g.properties.style.text && g.properties.style.text.field;
+        let content;
         if (this.labelDomelement) {
           content = readExpression(this.labelDomelement, context);
         } else if (!geometryField && !featureField && !layerField) {
@@ -273,10 +265,26 @@ class LabelLayer extends GeometryLayer {
             return;
           }
         }
-        const label = new Label(content, coord.clone(), this.style);
-        label.layerId = this.id;
-        label.padding = this.margin || label.padding;
-        labels.push(label);
+        if (this.style.zoom.min > this.style.context.zoom || this.style.zoom.max <= this.style.context.zoom) {
+          return;
+        }
+        // NOTE: this only works fine for POINT.
+        // It needs more work for LINE and POLYGON as we currently only use the first point of the entity
+        g.indices.forEach(i => {
+          coord.setFromArray(f.vertices, g.size * i.offset);
+          // Transform coordinate to data.crs projection
+          coord.applyMatrix4(data.matrixWorld);
+          if (!_extent.isPointInside(coord)) {
+            return;
+          }
+          const label = new Label(content, coord.clone(), this.style);
+          label.layerId = this.id;
+          label.order = f.order;
+          label.padding = this.margin || label.padding;
+          labels.push(label);
+        });
       });
     });
     return labels;

package/lib/Parser/VectorTileParser.js CHANGED Viewed

@@ -105,9 +105,10 @@ function vtFeatureToFeatureGeometry(vtFeature, feature) {
 function readPBF(file, options) {
   options.out = options.out || {};
   const vectorTile = new VectorTile(new Protobuf(file));
-  const sourceLayers = Object.keys(vectorTile.layers);
-  if (sourceLayers.length < 1) {
-    return;
+  const vtLayerNames = Object.keys(vectorTile.layers);
+  const collection = new FeatureCollection(options.out);
+  if (vtLayerNames.length < 1) {
+    return Promise.resolve(collection);
   }
   // x,y,z tile coordinates
@@ -117,44 +118,56 @@ function readPBF(file, options) {
   // https://alastaira.wordpress.com/2011/07/06/converting-tms-tile-coordinates-to-googlebingosm-tile-coordinates/
   // 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];
-    for (let i = sourceLayer.length - 1; i >= 0; i--) {
-      const vtFeature = sourceLayer.feature(i);
+    const vectorTileLayer = vectorTile.layers[vtLayerName];
+    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({
+      // Find layers where this vtFeature is used
+      const layers = options.in.layers[vtLayerName].filter(l => l.filterExpression.filter({
         zoom: z
-      }, vtFeature) && z >= l.zoom.min && z < l.zoom.max);
+      }, vtFeature));
+      for (const layer of layers) {
+        const feature = collection.requestFeatureById(layer.id, vtFeature.type - 1);
+        feature.id = layer.id;
+        feature.order = layer.order;
+        feature.style = options.in.styles[feature.id];
+        vtFeatureToFeatureGeometry(vtFeature, feature);
+      }
+      /*
+      // This optimization is not fully working and need to be reassessed
+      // (see https://github.com/iTowns/itowns/pull/2469/files#r1861802136)
       let feature;
       for (const layer of layers) {
-        if (!feature) {
-          feature = collection.requestFeatureById(layer.id, vtFeature.type - 1);
-          feature.id = layer.id;
-          feature.order = layer.order;
-          feature.style = options.in.styles[feature.id];
-          vtFeatureToFeatureGeometry(vtFeature, feature);
-        } else if (!collection.features.find(f => f.id === layer.id)) {
-          feature = collection.newFeatureByReference(feature);
-          feature.id = layer.id;
-          feature.order = layer.order;
-          feature.style = options.in.styles[feature.id];
-        }
+          if (!feature) {
+              feature = collection.requestFeatureById(layer.id, vtFeature.type - 1);
+              feature.id = layer.id;
+              feature.order = layer.order;
+              feature.style = options.in.styles[feature.id];
+              vtFeatureToFeatureGeometry(vtFeature, feature);
+          } else if (!collection.features.find(f => f.id === layer.id)) {
+              feature = collection.newFeatureByReference(feature);
+              feature.id = layer.id;
+              feature.order = layer.order;
+              feature.style = options.in.styles[feature.id];
+          }
       }
+      */
     }
   });
   collection.removeEmptyFeature();

package/lib/Renderer/Label2DRenderer.js CHANGED Viewed

@@ -167,13 +167,15 @@ class Label2DRenderer {
     if (!frustum.containsPoint(worldPosition.applyMatrix4(camera.matrixWorldInverse)) ||
     // Check if globe horizon culls the label
     // Do some horizon culling (if possible) if the tiles level is small enough.
-    label.horizonCullingPoint && GlobeLayer.horizonCulling(label.horizonCullingPoint) ||
-    // Check if content isn't present in visible labels
-    this.grid.visible.some(l => {
-      // TODO for icon without text filter by position
-      const textContent = label.content.textContent;
-      return textContent !== '' && l.content.textContent.toLowerCase() == textContent.toLowerCase();
-    })) {
+    label.horizonCullingPoint && GlobeLayer.horizonCulling(label.horizonCullingPoint)
+    // Why do we might need this part ?
+    // || // Check if content isn't present in visible labels
+    // this.grid.visible.some((l) => {
+    //     // TODO for icon without text filter by position
+    //     const textContent = label.content.textContent;
+    //     return textContent !== '' && l.content.textContent.toLowerCase() == textContent.toLowerCase();
+    // })
+    ) {
       label.visible = false;
     } else {
       // projecting world position label