mapicgc-gl-js 0.0.38 → 0.0.39

package/src/map/Map.js

@@ -2,6 +2,10 @@ import maplibregl from "maplibre-gl";
 // import flatgeobuf from "flatgeobuf";
 import Pitch3DToggleControl from "../controls/Toggle3DControl.js";
 // import MeasuresControl from 'maplibre-gl-measures';
+import { MapboxLayer } from "@deck.gl/mapbox";
+import { Tile3DLayer } from "@deck.gl/geo-layers";
+import { Tiles3DLoader } from "@loaders.gl/3d-tiles";
+import { AmbientLight, LightingEffect } from "@deck.gl/core";
 import {
   MaplibreExportControl,
   Size,
@@ -52,8 +56,8 @@ export default class Map {
         }
       }
     }
-    // console.log('dseeee', options)
-    options.maxZoom = 18;
+
+    // options.maxZoom = 18;
     options.maxPitch = 85;
     options.maplibreLogo = false;
     options.attributionControl = false;
@@ -66,6 +70,99 @@ export default class Map {
         compact: true,
       })
     );
+
+    this.map.on("load", () => {
+// console.log('sss', this.map.getStyle().name)
+
+      if (window.document.querySelector(".maplibregl-compact-show")) {
+        var element = window.document.querySelector(".maplibregl-compact-show");
+        element.classList.remove("maplibregl-compact-show");
+      }
+
+      this._dealOrto3dStyle(this.map.getStyle().name);
+    });
+  }
+
+  _dealOrto3dStyle(name) {
+    try {
+      if (name == "orto3d") {
+        // console.log('entro', name)
+        const ambientLight = new AmbientLight({
+          intensity: 4,
+        });
+
+        const lightingEffect = new LightingEffect({
+          ambientLight,
+        });
+
+        this.map.setTerrain({
+          source: defaultOptions.map3dOptions.terrainSource,
+          exaggeration: 1,
+        });
+
+        const citiesMapboxLayer = this._createCitiesMapboxLayer();
+
+        if (!this.map.getLayer(defaultOptions.map3dOptions.layerId3d)) {
+          this.map.addLayer(
+            citiesMapboxLayer,
+            defaultOptions.map3dOptions.layerIdOrder
+          );
+          this.map.setLayerZoomRange(
+            defaultOptions.map3dOptions.layerId3d,
+            defaultOptions.map3dOptions.minZoomRange,
+            defaultOptions.map3dOptions.maxZoomRange
+          );
+
+          citiesMapboxLayer.deck.setProps({
+            effects: [lightingEffect],
+          });
+        }
+      } else {
+        if (this.map.getLayer(defaultOptions.map3dOptions.layerId3d)) {
+          this.map.removeLayer(defaultOptions.map3dOptions.layerId3d);
+
+          this.map.setTerrain(null);
+        }
+      }
+    } catch (error) {
+      console.error(`Error dealing orto 3D: ${error.message}`);
+      return null;
+    }
+  }
+
+  _createCitiesMapboxLayer() {
+    try {
+      const citiesMapboxLayer = new MapboxLayer({
+        id: defaultOptions.map3dOptions.layerId3d,
+        type: Tile3DLayer,
+        data: defaultOptions.map3dOptions.urlTilesetCities,
+        loader: Tiles3DLoader,
+
+        loadOptions: {
+          tileset: {
+            viewDistanceScale: 1,
+            updateTransforms: false,
+            maximumScreenSpaceError:
+              defaultOptions.map3dOptions.spaceErrorFactor,
+          },
+        },
+
+        onTilesetLoad: (tileset3d) => {
+          tileset3d.options.maximumScreenSpaceError =
+            defaultOptions.map3dOptions.spaceErrorFactor;
+        },
+        onTileLoad: (tileHeader) => {
+          tileHeader.content.cartographicOrigin.z -=
+            defaultOptions.map3dOptions.zfactor;
+        },
+        operation: "terrain+draw",
+      });
+
+      return citiesMapboxLayer;
+    } catch (error) {
+      console.error(`Error adding MapboxLayer: ${error.message}`);
+      return null;
+    }
   }
 
   /**
@@ -274,7 +371,6 @@ inputsearch[0].addEventListener('input', function(event) {
    * @param {string} name - The geometry name (e.g., 'buildings').
    * @param {Object} options - Additional options for configuring the layer.
    */
-
   async fetchData(url, name, options) {
     try {
       const response = await fetch(url);
@@ -401,6 +497,28 @@ inputsearch[0].addEventListener('input', function(event) {
       const response = await fetch(url);
       const geojson = await response.json();
 
+      const menuGroup = document.getElementById("menu-group");
+
+
+      
+if (featureTree !== 'all'){
+
+
+const nameTitle = document.createElement("div");
+nameTitle.id = "titleDivMenu"
+nameTitle.textContent = name;
+menuGroup.appendChild(nameTitle);
+
+const featureTreeTitle = document.createElement("div");
+featureTreeTitle.id = "titleDivMenuSub"
+featureTreeTitle.textContent = `📂 ${featureTree}`;
+menuGroup.appendChild(featureTreeTitle);
+
+
+}else{
+
+}
+
       let type = geojson.features[0].geometry.type;
 
 if ( featureTree  === 'all'){
@@ -508,21 +626,21 @@ if ( featureTree  === 'all'){
       }
       // geojsonStore  = geojson
       // map.addLayerTree(geojson);
-      map.addMenuItem(name);
 
+      map.addMenuItem(name);
+map.addFeatureQuery(name)
     }else{
 
 let field= featureTree
-// console.log('field', field, geojson.features)
 
-// let lll = geojson.features
 const layers = {};
 geojson.features.forEach(feature => {
     const fieldMarker = feature.properties[field];
-    
-    // Verificar si la capa ya existe
+    // aqui podriem mirar si te simbologia i afegir-la a la capa
+
+
     if (!layers[fieldMarker]) {
-        // Si no existe, crear la capa
+
         if (type.includes("ine")) {
           //line
             if (options !== undefined){
@@ -632,7 +750,6 @@ geojson.features.forEach(feature => {
         }
         }
 
-        // Agregar la nueva capa al objeto de capas
         layers[fieldMarker] = true;
         map.addMenuItem(fieldMarker);
     }
@@ -641,78 +758,68 @@ geojson.features.forEach(feature => {
 
     }
 
-    
-
-
-
-
-
-
-
-      //add feature queries
-      // map.addFeatureQuery(name);
     } catch (error) {
       console.error(`Error fetching data: ${error.message}`);
     }
   }
 
-  async geocodeAddress() {
-    try {
-      var inputElement = document.getElementById("addressInput");
-      var address = inputElement.value;
-      const response = await fetch(url);
-      const geojson = await response.json();
-      var resultsContainer = document.getElementById("results");
-      resultsContainer.innerHTML = ""; // Limpiar resultados anteriores
-
-      function geocode(address) {
-        var result = turf.filter(geojson, "address", address);
-        return result.features.slice(0, 5);
-      }
-
-      var results = geocode(address);
-
-      if (results.length > 0) {
-        results.forEach(function (feature) {
-          var coordinates = feature.geometry.coordinates;
-          var address = feature.properties.address;
-
-          var resultItem = document.createElement("div");
-          resultItem.innerHTML =
-            "<strong>" +
-            address +
-            "</strong><br>Coordenadas: " +
-            coordinates.join(", ");
-
-          resultsContainer.appendChild(resultItem);
-        });
-      } else {
-        resultsContainer.innerHTML =
-          "No se encontraron resultados para la dirección: " + address;
-      }
-    } catch (error) {}
-  }
-  /**
-   * Fetches GeoJSON data from a URL and adds a corresponding layer to the map based on the specified geometry type.
-   * @param {string} url - The URL to fetch GeoJSON data from.
-   * @param {string} type - The geometry type (e.g., 'line', 'polygon', 'point').
-   * @param {string} name - The geometry name (e.g., 'buildings').
-   * @param {Object} options - Additional options for configuring the layer.
-   */
-
-  async fetchDataWithSearchbox(url, type, name, optionsGeo, options) {
-    try {
-      const response = await fetch(url);
-      const geojson = await response.json();
-
-      function geocode(address) {
-        var result = turf.filter(geojson, "address", address);
-        return result.features.slice(0, 5);
-      }
-    } catch (error) {
-      console.error(`Error fetching data: ${error.message}`);
-    }
-  }
+  // async geocodeAddress() {
+  //   try {
+  //     var inputElement = document.getElementById("addressInput");
+  //     var address = inputElement.value;
+  //     const response = await fetch(url);
+  //     const geojson = await response.json();
+  //     var resultsContainer = document.getElementById("results");
+  //     resultsContainer.innerHTML = ""; // Limpiar resultados anteriores
+
+  //     function geocode(address) {
+  //       var result = turf.filter(geojson, "address", address);
+  //       return result.features.slice(0, 5);
+  //     }
+
+  //     var results = geocode(address);
+
+  //     if (results.length > 0) {
+  //       results.forEach(function (feature) {
+  //         var coordinates = feature.geometry.coordinates;
+  //         var address = feature.properties.address;
+
+  //         var resultItem = document.createElement("div");
+  //         resultItem.innerHTML =
+  //           "<strong>" +
+  //           address +
+  //           "</strong><br>Coordenadas: " +
+  //           coordinates.join(", ");
+
+  //         resultsContainer.appendChild(resultItem);
+  //       });
+  //     } else {
+  //       resultsContainer.innerHTML =
+  //         "No se encontraron resultados para la dirección: " + address;
+  //     }
+  //   } catch (error) {}
+  // }
+  // /**
+  //  * Fetches GeoJSON data from a URL and adds a corresponding layer to the map based on the specified geometry type.
+  //  * @param {string} url - The URL to fetch GeoJSON data from.
+  //  * @param {string} type - The geometry type (e.g., 'line', 'polygon', 'point').
+  //  * @param {string} name - The geometry name (e.g., 'buildings').
+  //  * @param {Object} options - Additional options for configuring the layer.
+  //  */
+
+  // async fetchDataWithSearchbox(url, type, name, optionsGeo, options) {
+  //   try {
+  //     const response = await fetch(url);
+  //     const geojson = await response.json();
+
+  //     function geocode(address) {
+  //       var result = turf.filter(geojson, "address", address);
+  //       return result.features.slice(0, 5);
+  //     }
+  //   } catch (error) {
+  //     console.error(`Error fetching data: ${error.message}`);
+  //   }
+  // }
 
   /**
    * Adds an event listener to the map.
@@ -763,6 +870,7 @@ geojson.features.forEach(feature => {
   setStyle(style, options) {
     try {
       console.log("kk", style);
+      /*
       for (const key of Styles) {
         if (Styles.hasOwnProperty(key)) {
           const styl = Styles[key];
@@ -772,6 +880,7 @@ geojson.features.forEach(feature => {
           }
         }
       }
+      */
       console.log("base", style);
 
       if (options !== undefined) {
@@ -779,6 +888,20 @@ geojson.features.forEach(feature => {
       } else {
         this.map.setStyle(style);
       }
+
+      this.map.on("styledata", () => {
+        if (window.document.querySelector(".maplibregl-compact-show")) {
+          var element = window.document.querySelector(
+            ".maplibregl-compact-show"
+          );
+          element.classList.remove("maplibregl-compact-show");
+        }
+
+        this._dealOrto3dStyle(this.map.getStyle().name);
+        //init test3d
+
+        //end test 3d
+      });
     } catch (error) {
       console.error(`Error setting style: ${error.message}`);
     }
@@ -813,15 +936,33 @@ geojson.features.forEach(feature => {
   /**
    * Sets layout property for a layer on the map.
    * @function setLayoutProperty
-   * @param {Object} object - Object containing layer ID and property to set.
+   * @param {Object} object - Object containing layer ID.
+   * @param {Object} property - Object containing property to set.
+   * @param {Object} value - Object containing value.
    */
-  setLayoutProperty(object) {
+  setLayoutProperty(object, property, value) {
     try {
-      this.map.setLayoutProperty(object);
+      this.map.setLayoutProperty(object, property, value);
     } catch (error) {
       console.error(`Error setting layout property: ${error.message}`);
     }
   }
+
+  /**
+   * Sets layout property for a layer on the map.
+   * @function setPaintProperty
+   * @param {Object} object - Object containing layer ID.
+   * @param {Object} property - Object containing property to set.
+   * @param {Object} value - Object containing value.
+   */
+  setPaintProperty(object, property, value) {
+    try {
+      this.map.setPaintProperty(object, property, value);
+    } catch (error) {
+      console.error(`Error setting paint property: ${error.message}`);
+    }
+  }
+
   /**
    * Adds a control to the map with the specified position.
    * @function addControl
@@ -940,14 +1081,21 @@ geojson.features.forEach(feature => {
    */
   setTerrain(options) {
     try {
-      this.map.on("load", () => {
-        return this.map.setTerrain(options);
-      });
+      //this.map.on("load", () => {
+      return this.map.setTerrain(options);
+      //});
       //  this.map.getZoom();
     } catch (error) {
       console.error(`Error setting terrain: ${error.message}`);
     }
   }
+  setLayerZoomRange(layerId, nimZoom, maxZoom) {
+    try {
+      return this.map.setLayerZoomRange(layerId, nimZoom, maxZoom);
+    } catch (error) {
+      console.error(`Error setting terrain: ${error.message}`);
+    }
+  }
 
   /**
    * Retrieves the canvas of the map.
@@ -978,10 +1126,11 @@ geojson.features.forEach(feature => {
    * Adds a layer to the map.
    * @function addLayer
    * @param {Object} layer - Options for the layer to add.
+   * @param {string} layerIdOrder - Optional layer Id draw position.
    */
-  addLayer(layer) {
+  addLayer(layer, layerIdOrder) {
     try {
-      this.map.addLayer(layer);
+      this.map.addLayer(layer, layerIdOrder);
     } catch (error) {
       console.error(`Error adding layer: ${error.message}`);
     }
@@ -1115,7 +1264,7 @@ geojson.features.forEach(feature => {
   /**
    * Adds base layers to the map.
    * @function addBasemapsICGC
-   * @param {Object[]} baseLayers - Array of base layer objects.
+   * @param {Object[]} basesArray - Array of base layer objects.
    */
   addBasemapsICGC(basesArray) {
     try {
@@ -1570,6 +1719,7 @@ geojson.features.forEach(feature => {
   /**
    * Adds a fullscreen control to the map.
    * @function addFullScreen
+   * @param {string} [position='top-right'] - Position to add the control on the map.
    */
   addFullScreen(position) {
     try {
@@ -1589,7 +1739,6 @@ geojson.features.forEach(feature => {
    */
   addMenuItem(name) {
     try {
-      if (name.length > 0){
       const menuGroup = document.getElementById("menu-group");
 
       const input = document.createElement("input");
@@ -1612,7 +1761,6 @@ geojson.features.forEach(feature => {
           e.target.checked ? "visible" : "none"
         );
       });
-    }
     } catch (error) {
       console.error(`Error adding menu item: ${error.message}`);
     }
@@ -1772,8 +1920,7 @@ geojson.features.forEach(feature => {
    * Adds an ICGC image layer to the map based on the specified name and year.
    * @function addImageLayerICGC
    * @param {string} name - The name of the layer. Mandatory. options: 'orto', 'geo', 'slope', 'dem', 'relleu', etc.
-   * @param {integer} year - The year of the image layer (optional, applicable only for certain layers like 'orto').
-   */
+    */
   addImageLayerICGC(name) {
     try {
       console.log("name", name);
@@ -1863,9 +2010,8 @@ geojson.features.forEach(feature => {
    * Adds an ICGC vector layer to the map based on the specified name and year.
    * @function addVectorLayerICGC
    * @param {string} url - The url of the vector layer.
-   * @param {string} year - The year associated with the vector layer (optional).
    */
-  async addVectorLayerICGC(layerUrl, name, year) {
+  async addVectorLayerICGC(layerUrl) {
     try {
       function getKeyByUrl(url) {
         for (const key in Layers.VectorAdmin) {
@@ -1949,6 +2095,7 @@ geojson.features.forEach(feature => {
         // let op = Terrains.find(
         //   (objeto) => objeto.name === resolution
         // );
+        // console.log('res', resolution)
         let op;
         for (const key in Terrains) {
           if (Terrains.hasOwnProperty(key)) {
@@ -1956,26 +2103,33 @@ geojson.features.forEach(feature => {
 
             if (objeto === resolution) {
               op = objeto;
-              // Si encontramos el objeto, podemos salir del bucle
+
             }
           }
         }
 
         let urlTerrainICGC = op;
+if (resolution.includes('terrarium') ){
+  // console.log('rsssssses', resolution)
+       // Add terrain source
+       this.map.addSource("terrainICGC-src", {
+        type: "raster-dem",
+        tiles: [urlTerrainICGC],
+        tileSize: 512,
+        encoding: "terrarium",
+        maxzoom: 16,
+      });
+}else{
+  this.map.addSource("terrainICGC-src", {
+    type: "raster-dem",
+    tiles: [urlTerrainICGC],
+    tileSize: 512,
+    maxzoom: 16,
+  });
+}
+ 
 
-        // Add terrain source
-        this.map.addSource("terrainICGC-src", {
-          type: "raster-dem",
-          tiles: [urlTerrainICGC],
-          tileSize: 512,
-          maxzoom: 16,
-        });
-
-        // Add terrain layer
-        // this.map.setTerrain({
-        //   source: "terrainMapZen",
-        //   exaggeration: 1.5,
-        // });
+    
         this.map.setTerrain({
           source: "terrainICGC-src",
           exaggeration: 1.5,