itowns 2.34.0 → 2.36.2

package/lib/Core/View.js

@@ -154,7 +154,8 @@ function _preprocessLayer(view, layer, parentLayer) {
       style: layer.style,
       zoom: layer.zoom,
       crs: source.crs,
-      visible: layer.visible
+      visible: layer.visible,
+      margin: 15
     });
     layer.addEventListener('visible-property-changed', function () {
       labelLayer.visible = layer.visible;
@@ -1191,13 +1192,12 @@ var View = /*#__PURE__*/function (_THREE$EventDispatche) {
       }
 
       this.getPickingPositionFromDepth(mouse, positionVector);
-      var distance = this.camera.camera3D.position.distanceTo(positionVector);
       coordinates.setFromVector3(positionVector); // Get the correct precision; the position variable will be set in this
       // function.
 
       var precision;
       var precisions = {
-        M: this.getPixelsToMetersFromDistance(radius, distance),
+        M: this.getPixelsToMeters(radius, mouse),
         D: 0.001 * radius
       };
 

package/lib/Layer/ElevationLayer.js

@@ -87,22 +87,9 @@ var ElevationLayer = /*#__PURE__*/function (_RasterLayer) {
     var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     (0, _classCallCheck2["default"])(this, ElevationLayer);
     _this = _super.call(this, id, config);
-    _this.isElevationLayer = true; // This is used to add a factor needed to color texture
+    _this.isElevationLayer = true;
 
-    var baseScale = 1.0;
-
-    if (_this.useColorTextureElevation) {
-      baseScale = _this.colorTextureElevationMaxZ - _this.colorTextureElevationMinZ;
-    }
-
-    _this.defineLayerProperty('scale', _this.scale || 1.0, function (self) {
-      self.parent.object3d.traverse(function (obj) {
-        if (obj.layer == self.parent && obj.material) {
-          obj.material.setElevationScale(self.scale * baseScale);
-          obj.obb.updateScaleZ(self.scale);
-        }
-      });
-    });
+    _this.defineLayerProperty('scale', _this.scale || 1.0);
 
     return _this;
   }
@@ -130,7 +117,13 @@ var ElevationLayer = /*#__PURE__*/function (_RasterLayer) {
 
       updateBBox(); // listen elevation updating
 
-      rasterElevationNode.addEventListener('updatedElevation', updateBBox);
+      rasterElevationNode.addEventListener('updatedElevation', updateBBox); // listen scaling elevation updating
+
+      this.addEventListener('scale-property-changed', updateBBox); // remove scaling elevation updating if node is removed
+
+      node.addEventListener('dispose', function () {
+        _this2.removeEventListener('scale-property-changed', updateBBox);
+      });
       return rasterElevationNode;
     }
   }, {

package/lib/Layer/LabelLayer.js

@@ -101,7 +101,12 @@ var LabelLayer = /*#__PURE__*/function (_Layer) {
     });
 
     _this.buildExtent = true;
-    _this.labelDomelement = config.domElement;
+    _this.labelDomelement = config.domElement; // The margin property defines a space around each label that cannot be occupied by another label.
+    // For example, if some labelLayer has a margin value of 5, there will be at least 10 pixels
+    // between each labels of the layer
+    // TODO : this property should be moved to Style after refactoring style properties structure
+
+    _this.margin = config.margin;
     return _this;
   }
   /**
@@ -186,6 +191,7 @@ var LabelLayer = /*#__PURE__*/function (_Layer) {
 
           var label = new _Label["default"](content, coord.clone(), style, _this2.source.sprites);
           label.layerId = _this2.id;
+          label.padding = _this2.margin || label.padding;
 
           if (f.size == 2) {
             label.needsAltitude = true;

package/lib/Main.js

@@ -690,7 +690,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var conf = {
-  version: '2.34.0'
+  version: '2.36.2'
 };
 var REVISION = conf.version; // Geographic tools
 

package/lib/Parser/ShapefileParser.js

@@ -44,7 +44,6 @@ var _Undeprecator = require("../Core/Deprecated/Undeprecator");
  *         },
  *         out: {
  *             crs: view.tileLayer.extent.crs,
- *             buildExtent: true,
  *         }
  *     });
  * }).then(function _(geojson) {
@@ -86,7 +85,7 @@ var _default = {
     }
 
     options["in"] = options["in"] || {};
-    options["in"].crs = data.prj ? (0, _proj["default"])(data.prj).oProj.datumName : undefined;
+    options["in"].crs = data.prj ? (0, _proj["default"])(data.prj).oProj.datumName : options["in"].crs;
     return Promise.resolve(result).then(function (res) {
       return _GeoJsonParser["default"].parse(res, options);
     });

package/lib/Parser/VectorTileParser.js

@@ -25,7 +25,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-var worldDimension3857 = _Extent.globalExtentTMS.get('EPSG:3857').dimensions();
+var worldDimension3857 = _Extent.globalExtentTMS.get('EPSG:3857').planarDimensions();
 
 var globalExtent = new _three.Vector3(worldDimension3857.x, worldDimension3857.y, 1);
 var lastPoint = new _three.Vector2();

package/lib/Process/3dTilesProcessing.js

@@ -80,12 +80,10 @@ function boundingVolumeToExtent(crs, volume, transform) {
     return _Extent["default"].fromBox3(crs, _box);
   } else {
     var sphere = tmpSphere.copy(volume.sphere).applyMatrix4(transform);
-    return new _Extent["default"](crs, {
-      west: sphere.center.x - sphere.radius,
-      east: sphere.center.x + sphere.radius,
-      south: sphere.center.y - sphere.radius,
-      north: sphere.center.y + sphere.radius
-    });
+
+    var _box2 = sphere.getBoundingBox(tmpBox3);
+
+    return _Extent["default"].fromBox3(crs, _box2);
   }
 }
 
@@ -120,7 +118,8 @@ function _subdivideNodeAdditive(context, layer, node, cullingTest) {
 
       child.promise = requestNewTile(context.view, context.scheduler, layer, child, node, true).then(function (tile) {
         node.add(tile);
-        tile.updateMatrixWorld();
+        tile.updateMatrixWorld(); // The extent is calculated but it's never used in 3D tiles process
+
         var extent = boundingVolumeToExtent(layer.extent.crs, tile.boundingVolume, tile.matrixWorld);
         tile.traverse(function (obj) {
           obj.extent = extent;
@@ -379,7 +378,8 @@ function init3dTilesLayer(view, scheduler, layer, rootTile) {
     layer.object3d.add(tile);
     tile.updateMatrixWorld();
     layer.tileset.tiles[tile.tileId].loaded = true;
-    layer.root = tile;
+    layer.root = tile; // The extent is calculated but it's never used in 3D tiles process
+
     layer.extent = boundingVolumeToExtent(layer.crs || view.referenceCrs, tile.boundingVolume, tile.matrixWorld);
     layer.onTileContentLoaded(tile);
   });

package/lib/Process/FeatureProcessing.js

@@ -94,8 +94,7 @@ var _default = {
     var zoomDest = extentsDestination[0].zoom; // check if it's tile level is equal to display level layer.
 
     if (zoomDest != layer.zoom.min || // check if there's data in extent tile.
-    !this.source.extentInsideLimit(node.extent, zoomDest) || // In FileSource case, check if the feature center is in extent tile.
-    layer.source.isFileSource && !node.extent.isPointInside(layer.source.extent.center(coord))) {
+    !this.source.extentInsideLimit(node.extent, zoomDest) || layer.source.isFileSource && !node.extent.isPointInside(layer.source.extent.center(coord))) {
       // if not, there's not data to add at this tile.
       node.layerUpdateState[layer.id].noMoreUpdatePossible();
       return;

package/lib/Process/ObjectRemovalHelper.js

@@ -51,9 +51,12 @@ var _default = {
           }
         } else {
           obj.material.dispose();
-        } // obj.material = null;
-
+        }
       }
+
+      obj.dispatchEvent({
+        type: 'dispose'
+      });
     }
   },
 

package/lib/Renderer/Label2DRenderer.js

@@ -31,8 +31,9 @@ function hasLabelChildren(object) {
       return cc.isLabel;
     });
   });
-} // A grid to manage labels on the screen.
+}
 
+var frustum = new THREE.Frustum(); // A grid to manage labels on the screen.
 
 var ScreenGrid = /*#__PURE__*/function () {
   function ScreenGrid() {
@@ -119,8 +120,7 @@ var ScreenGrid = /*#__PURE__*/function () {
   return ScreenGrid;
 }();
 
-var viewProjectionMatrix = new THREE.Matrix4();
-var vector = new THREE.Vector3();
+var worldPosition = new THREE.Vector3();
 /**
  * This renderer is inspired by the
  * [`THREE.CSS2DRenderer`](https://threejs.org/docs/#examples/en/renderers/CSS2DRenderer).
@@ -133,6 +133,7 @@ var Label2DRenderer = /*#__PURE__*/function () {
     this.domElement = document.createElement('div');
     this.domElement.style.overflow = 'hidden';
     this.domElement.style.position = 'absolute';
+    this.domElement.style.top = '0';
     this.domElement.style.height = '100%';
     this.domElement.style.width = '100%';
     this.domElement.style.zIndex = 1; // Used to destroy labels that are not added to the DOM
@@ -175,9 +176,10 @@ var Label2DRenderer = /*#__PURE__*/function () {
         return;
       }
 
-      this.grid.reset();
-      viewProjectionMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
-      this.culling(scene, this.infoTileLayer.displayed.extent); // sort by order, then by visibility inside those subsets
+      this.grid.reset(); // set camera frustum
+
+      frustum.setFromProjectionMatrix(camera.projectionMatrix);
+      this.culling(scene, this.infoTileLayer.displayed.extent, camera); // sort by order, then by visibility inside those subsets
       // https://docs.mapbox.com/help/troubleshooting/optimize-map-label-placement/#label-hierarchy
 
       this.grid.visible.sort(function (a, b) {
@@ -205,7 +207,7 @@ var Label2DRenderer = /*#__PURE__*/function () {
     }
   }, {
     key: "culling",
-    value: function culling(object, extent) {
+    value: function culling(object, extent, camera) {
       var _this2 = this;
 
       if (!object.isLabel) {
@@ -220,17 +222,19 @@ var Label2DRenderer = /*#__PURE__*/function () {
 
         this.showNodeDOM(object);
         object.children.forEach(function (c) {
-          return _this2.culling(c, extent);
+          return _this2.culling(c, extent, camera);
         }); // the presence of the label inside the visible extent and if children has label, we can filter more labels.
       } else if (!extent.isPointInside(object.coordinates) || hasLabelChildren(object)) {
+        this.grid.hidden.push(object); // the presence of the label inside frustum camera.
+      } else if (!frustum.containsPoint(object.getWorldPosition(worldPosition).applyMatrix4(camera.matrixWorldInverse))) {
         this.grid.hidden.push(object); // Do some horizon culling (if possible) if the tiles level is small
         // enough. The chosen value of 4 seems to provide a good result.
       } else if (object.parent.level < 4 && object.parent.layer.horizonCulling && object.parent.layer.horizonCulling(object.horizonCullingPoint)) {
         this.grid.hidden.push(object);
       } else {
-        vector.setFromMatrixPosition(object.matrixWorld);
-        vector.applyMatrix4(viewProjectionMatrix);
-        object.updateProjectedPosition(vector.x * this.halfWidth + this.halfWidth, -vector.y * this.halfHeight + this.halfHeight); // Are considered duplicates, labels that have the same screen
+        // projecting world position object
+        worldPosition.applyMatrix4(camera.projectionMatrix);
+        object.updateProjectedPosition(worldPosition.x * this.halfWidth + this.halfWidth, -worldPosition.y * this.halfHeight + this.halfHeight); // Are considered duplicates, labels that have the same screen
         // coordinates and the same base content.
 
         if (this.grid.visible.some(function (l) {

package/lib/Renderer/LayeredMaterial.js

@@ -91,7 +91,8 @@ var defaultStructLayer = {
   opacity: 0,
   crs: 0,
   effect_parameter: 0,
-  effect_type: colorLayerEffects.noEffect
+  effect_type: colorLayerEffects.noEffect,
+  transparent: false
 };
 
 function _updateLayersUniforms(uniforms, olayers, max) {

package/lib/Renderer/OBB.js

@@ -189,7 +189,7 @@ var OBB = /*#__PURE__*/function (_THREE$Object3D) {
             position = _builder$computeShara.position; // Compute the minimum count of segment to build tile
 
 
-        var segment = Math.max(Math.floor(sharableExtent.dimensions(dimension).x / 90 + 1), 2);
+        var segment = Math.max(Math.floor(sharableExtent.planarDimensions(dimension).x / 90 + 1), 2);
         var geometry = new _TileGeometry["default"]({
           extent: sharableExtent,
           level: 0,
@@ -206,7 +206,7 @@ var OBB = /*#__PURE__*/function (_THREE$Object3D) {
         this.updateMatrixWorld(true);
       } else if (!_Crs["default"].isTms(extent.crs) && _Crs["default"].isMetricUnit(extent.crs)) {
         extent.center(coord).toVector3(this.position);
-        extent.dimensions(dimension);
+        extent.planarDimensions(dimension);
         size.set(dimension.x, dimension.y, Math.abs(maxHeight - minHeight));
         this.box3D.setFromCenterAndSize(center, size);
         this.updateMatrixWorld(true);

package/lib/Renderer/RasterTile.js

@@ -217,6 +217,11 @@ var RasterColorTile = /*#__PURE__*/function (_RasterTile) {
     get: function get() {
       return this.layer.effect_parameter;
     }
+  }, {
+    key: "transparent",
+    get: function get() {
+      return this.layer.transparent;
+    }
   }]);
   return RasterColorTile;
 }(RasterTile);
@@ -235,19 +240,18 @@ var RasterElevationTile = /*#__PURE__*/function (_RasterTile2) {
     _this2 = _super3.call(this, material, layer);
     var defaultEle = {
       bias: 0,
-      scale: 1,
       mode: _LayeredMaterial.ELEVATION_MODES.DATA,
       zmin: 0,
       zmax: Infinity
     };
-    var scaleFactor = 1.0; // Define elevation properties
+    _this2.scaleFactor = 1.0; // Define elevation properties
 
     if (layer.useRgbaTextureElevation) {
       defaultEle.mode = _LayeredMaterial.ELEVATION_MODES.RGBA;
       defaultEle.zmax = 5000;
       throw new Error('Restore this feature');
     } else if (layer.useColorTextureElevation) {
-      scaleFactor = layer.colorTextureElevationMaxZ - layer.colorTextureElevationMinZ;
+      _this2.scaleFactor = layer.colorTextureElevationMaxZ - layer.colorTextureElevationMinZ;
       defaultEle.mode = _LayeredMaterial.ELEVATION_MODES.COLOR;
       defaultEle.bias = layer.colorTextureElevationMinZ;
       _this2.min = _this2.layer.colorTextureElevationMinZ;
@@ -258,14 +262,28 @@ var RasterElevationTile = /*#__PURE__*/function (_RasterTile2) {
     }
 
     _this2.bias = layer.bias || defaultEle.bias;
-    _this2.scale = (layer.scale || defaultEle.scale) * scaleFactor;
     _this2.mode = layer.mode || defaultEle.mode;
     _this2.zmin = layer.zmin || defaultEle.zmin;
     _this2.zmax = layer.zmax || defaultEle.zmax;
+    layer.addEventListener('scale-property-changed', _this2._handlerCBEvent);
     return _this2;
   }
 
   (0, _createClass2["default"])(RasterElevationTile, [{
+    key: "scale",
+    get: function get() {
+      return this.layer.scale * this.scaleFactor;
+    }
+  }, {
+    key: "dispose",
+    value: function dispose(removeEvent) {
+      (0, _get2["default"])((0, _getPrototypeOf2["default"])(RasterElevationTile.prototype), "dispose", this).call(this, removeEvent);
+
+      if (removeEvent) {
+        this.layer.removeEventListener('scale-property-changed', this._handlerCBEvent);
+      }
+    }
+  }, {
     key: "initFromParent",
     value: function initFromParent(parent, extents) {
       (0, _get2["default"])((0, _getPrototypeOf2["default"])(RasterElevationTile.prototype), "initFromParent", this).call(this, parent, extents);

package/lib/Renderer/Shader/ShaderChunk.js

@@ -20,7 +20,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 /* babel-plugin-inline-import './Chunk/color_layers_pars_fragment.glsl' */
-var color_layers_pars_fragment = "struct Layer {\n    int textureOffset;\n    int crs;\n    int effect_type;\n    float effect_parameter;\n    float opacity;\n};\n\n#include <itowns/custom_header_colorLayer>\n\nuniform sampler2D   colorTextures[NUM_FS_TEXTURES];\nuniform vec4        colorOffsetScales[NUM_FS_TEXTURES];\nuniform Layer       colorLayers[NUM_FS_TEXTURES];\nuniform int         colorTextureCount;\n\nvec3 uvs[NUM_CRS];\n\nfloat getBorderDistance(vec2 uv) {\n    vec2 p2 = min(uv, 1. -uv);\n    return min(p2.x, p2.y);\n}\n\nfloat tolerance = 0.99;\n\nvec4 applyWhiteToInvisibleEffect(vec4 color, float intensity) {\n    float a = dot(color.rgb, vec3(0.333333333));\n    if (a >= tolerance) {\n        color.a *= 1.0 - pow(abs(a), intensity);\n    }\n    return color;\n}\n\nvec4 applyLightColorToInvisibleEffect(vec4 color, float intensity) {\n    float a = max(0.05,1. - length(color.xyz - 1.));\n    color.a *= 1.0 - pow(abs(a), intensity);\n    color.rgb *= color.rgb * color.rgb;\n    return color;\n}\n\n#if defined(DEBUG)\nuniform bool showOutline;\nuniform vec3 outlineColors[NUM_CRS];\nuniform float outlineWidth;\n\nvec4 getOutlineColor(vec3 outlineColor, vec2 uv) {\n    float alpha = 1. - clamp(getBorderDistance(uv) / outlineWidth, 0., 1.);\n    return vec4(outlineColor, alpha);\n}\n#endif\n\nuniform float minBorderDistance;\nvec4 getLayerColor(int textureOffset, sampler2D tex, vec4 offsetScale, Layer layer) {\n    if ( textureOffset >= colorTextureCount ) return vec4(0);\n\n    vec3 uv;\n    // #pragma unroll_loop\n    for ( int i = 0; i < NUM_CRS; i ++ ) {\n        if ( i == layer.crs ) uv = uvs[ i ];\n    }\n\n    float borderDistance = getBorderDistance(uv.xy);\n    if (textureOffset != layer.textureOffset + int(uv.z) || borderDistance < minBorderDistance ) return vec4(0);\n    vec4 color = texture2D(tex, pitUV(uv.xy, offsetScale));\n    if (layer.effect_type == 1) {\n        color.rgb /= color.a;\n        color = applyLightColorToInvisibleEffect(color, layer.effect_parameter);\n    } else if (layer.effect_type == 2) {\n        color.rgb /= color.a;\n        color = applyWhiteToInvisibleEffect(color, layer.effect_parameter);\n    } else if (layer.effect_type == 3) {\n        #include <itowns/custom_body_colorLayer>\n    }\n    color.a *= layer.opacity;\n    return color;\n}\n";
+var color_layers_pars_fragment = "struct Layer {\n    int textureOffset;\n    int crs;\n    int effect_type;\n    float effect_parameter;\n    float opacity;\n    bool transparent;\n};\n\n#include <itowns/custom_header_colorLayer>\n\nuniform sampler2D   colorTextures[NUM_FS_TEXTURES];\nuniform vec4        colorOffsetScales[NUM_FS_TEXTURES];\nuniform Layer       colorLayers[NUM_FS_TEXTURES];\nuniform int         colorTextureCount;\n\nvec3 uvs[NUM_CRS];\n\nfloat getBorderDistance(vec2 uv) {\n    vec2 p2 = min(uv, 1. -uv);\n    return min(p2.x, p2.y);\n}\n\nfloat tolerance = 0.99;\n\nvec4 applyWhiteToInvisibleEffect(vec4 color, float intensity) {\n    float a = dot(color.rgb, vec3(0.333333333));\n    if (a >= tolerance) {\n        color.a *= 1.0 - pow(abs(a), intensity);\n    }\n    return color;\n}\n\nvec4 applyLightColorToInvisibleEffect(vec4 color, float intensity) {\n    float a = max(0.05,1. - length(color.xyz - 1.));\n    color.a *= 1.0 - pow(abs(a), intensity);\n    color.rgb *= color.rgb * color.rgb;\n    return color;\n}\n\n#if defined(DEBUG)\nuniform bool showOutline;\nuniform vec3 outlineColors[NUM_CRS];\nuniform float outlineWidth;\n\nvec4 getOutlineColor(vec3 outlineColor, vec2 uv) {\n    float alpha = 1. - clamp(getBorderDistance(uv) / outlineWidth, 0., 1.);\n    return vec4(outlineColor, alpha);\n}\n#endif\n\nuniform float minBorderDistance;\nvec4 getLayerColor(int textureOffset, sampler2D tex, vec4 offsetScale, Layer layer) {\n    if ( textureOffset >= colorTextureCount ) return vec4(0);\n\n    vec3 uv;\n    // #pragma unroll_loop\n    for ( int i = 0; i < NUM_CRS; i ++ ) {\n        if ( i == layer.crs ) uv = uvs[ i ];\n    }\n\n    float borderDistance = getBorderDistance(uv.xy);\n    if (textureOffset != layer.textureOffset + int(uv.z) || borderDistance < minBorderDistance ) return vec4(0);\n    vec4 color = texture2D(tex, pitUV(uv.xy, offsetScale));\n    if (layer.effect_type == 3) {\n        #include <itowns/custom_body_colorLayer>\n    } else {\n        if (layer.transparent && color.a != 0.0) {\n            color.rgb /= color.a;\n        }\n\n        if (layer.effect_type == 1) {\n            color = applyLightColorToInvisibleEffect(color, layer.effect_parameter);\n        } else if (layer.effect_type == 2) {\n            color = applyWhiteToInvisibleEffect(color, layer.effect_parameter);\n        }\n    }\n    color.a *= layer.opacity;\n    return color;\n}\n";
 
 /* babel-plugin-inline-import './Chunk/elevation_pars_vertex.glsl' */
 var elevation_pars_vertex = "#if NUM_VS_TEXTURES > 0\n    struct Layer {\n        float scale;\n        float bias;\n        int mode;\n        float zmin;\n        float zmax;\n    };\n\n    uniform Layer       elevationLayers[NUM_VS_TEXTURES];\n    uniform sampler2D   elevationTextures[NUM_VS_TEXTURES];\n    uniform vec4        elevationOffsetScales[NUM_VS_TEXTURES];\n    uniform int         elevationTextureCount;\n\n    highp float decode32(highp vec4 rgba) {\n        highp float Sign = 1.0 - step(128.0,rgba[0])*2.0;\n        highp float Exponent = 2.0 * mod(rgba[0],128.0) + step(128.0,rgba[1]) - 127.0;\n        highp float Mantissa = mod(rgba[1],128.0)*65536.0 + rgba[2]*256.0 +rgba[3] + float(0x800000);\n        highp float Result =  Sign * exp2(Exponent) * (Mantissa * exp2(-23.0 ));\n        return Result;\n    }\n\n    float getElevationMode(vec2 uv, sampler2D tex, int mode) {\n        if (mode == ELEVATION_RGBA)\n            return decode32(texture2D( tex, uv ).abgr * 255.0);\n        if (mode == ELEVATION_DATA || mode == ELEVATION_COLOR)\n        #if defined(WEBGL2)\n            return texture2D( tex, uv ).r;\n        #else\n            return texture2D( tex, uv ).w;\n        #endif\n        return 0.;\n    }\n\n    float getElevation(vec2 uv, sampler2D tex, vec4 offsetScale, Layer layer) {\n        uv = uv * offsetScale.zw + offsetScale.xy;\n        float d = getElevationMode(uv, tex, layer.mode);\n        if (d < layer.zmin || d > layer.zmax) d = 0.;\n        return d * layer.scale + layer.bias;\n    }\n#endif\n";
@@ -29,10 +29,10 @@ var elevation_pars_vertex = "#if NUM_VS_TEXTURES > 0\n    struct Layer {\n
 var elevation_vertex = "#if NUM_VS_TEXTURES > 0\n    if(elevationTextureCount > 0) {\n        float elevation = getElevation(uv, elevationTextures[0], elevationOffsetScales[0], elevationLayers[0]);\n        transformed += elevation * normal;\n    }\n#endif\n";
 
 /* babel-plugin-inline-import './Chunk/fog_fragment.glsl' */
-var fog_fragment = "#if defined(USE_FOG)\n    float fogFactor = 1. - min( exp(-fogDepth / fogDistance), 1.);\n    gl_FragColor.rgb = mix(gl_FragColor.rgb, fogColor, fogFactor);\n#endif\n";
+var fog_fragment = "#if defined(USE_FOG)\n    float fogFactor = 1. - min( exp(-vFogDepth / fogDistance), 1.);\n    gl_FragColor.rgb = mix(gl_FragColor.rgb, fogColor, fogFactor);\n#endif\n";
 
 /* babel-plugin-inline-import './Chunk/fog_pars_fragment.glsl' */
-var fog_pars_fragment = "#if defined(USE_FOG)\nuniform vec3  fogColor;\nuniform float fogDistance;\nvarying float fogDepth;\n#endif\n";
+var fog_pars_fragment = "#if defined(USE_FOG)\nuniform vec3  fogColor;\nuniform float fogDistance;\nvarying float vFogDepth;\n#endif\n";
 
 /* babel-plugin-inline-import './Chunk/lighting_fragment.glsl' */
 var lighting_fragment = "if (lightingEnabled) {\n    float light = min(2. * dot(vNormal, lightPosition), 1.);\n    gl_FragColor.rgb *= light;\n}\n";

package/lib/Renderer/c3DEngine.js

@@ -54,10 +54,22 @@ var c3DEngine = /*#__PURE__*/function () {
 
     if (options.isWebGL2 === undefined) {
       options.isWebGL2 = true;
+    } // If rendererOrDiv parameter is a domElement, we use it as support to display data.
+    // If it is a renderer, we check the renderer.domElement parameter which can be :
+    //    - a domElement, in this case we use this domElement as a support
+    //    - a canvas, in this case we use the canvas parent (which should be a domElement) as a support
+
+
+    var renderer;
+    var viewerDiv;
+
+    if (rendererOrDiv.domElement) {
+      renderer = rendererOrDiv;
+      viewerDiv = renderer.domElement instanceof HTMLDivElement ? renderer.domElement : renderer.domElement.parentElement;
+    } else {
+      viewerDiv = rendererOrDiv;
     }
 
-    var renderer = rendererOrDiv.domElement ? rendererOrDiv : undefined;
-    var viewerDiv = renderer ? renderer.domElement : rendererOrDiv;
     this.width = viewerDiv.clientWidth;
     this.height = viewerDiv.clientHeight;
     this.positionBuffer = null;

package/lib/Source/FileSource.js

@@ -106,13 +106,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  * itowns.Fetcher.json('https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements/09-ariege/departement-09-ariege.geojson')
  *     .then(function _(geojson) {
  *         return itowns.GeoJsonParser.parse(geojson, {
- *             in: { in: 'EPSG:4326' },
- *             out: {
-     *             crs: view.tileLayer.extent.crs,
-     *             buildExtent: true,
-     *             mergeFeatures: true,
-     *             structure: '2d',
- *             },
+ *             in: { crs: 'EPSG:4326' },
+ *             out: { crs: view.tileLayer.extent.crs },
  *         });
  *     }).then(function _(features) {
  *         ariege.source = new itowns.FileSource({

package/lib/Source/VectorTilesSource.js

@@ -9,6 +9,10 @@ exports["default"] = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -172,6 +176,21 @@ var VectorTilesSource = /*#__PURE__*/function (_TMSSource) {
     return _this;
   }
 
+  (0, _createClass2["default"])(VectorTilesSource, [{
+    key: "onLayerAdded",
+    value: function onLayerAdded(options) {
+      var _this2 = this;
+
+      (0, _get2["default"])((0, _getPrototypeOf2["default"])(VectorTilesSource.prototype), "onLayerAdded", this).call(this, options);
+
+      if (options.out.style) {
+        var keys = Object.keys(this.styles);
+        keys.forEach(function (k) {
+          _this2.styles[k].parent = options.out.style;
+        });
+      }
+    }
+  }]);
   return VectorTilesSource;
 }(_TMSSource2["default"]);