mapicgc-gl-js 0.0.39 → 0.0.41

package/src/map/Map.js

@@ -266,7 +266,7 @@ inputsearch[0].addEventListener('input', function(event) {
    */
   getStyle() {
     try {
-      this.map.getStyle();
+      return this.map.getStyle();
     } catch (error) {
       console.error(`Error getting style: ${error.message}`);
     }
@@ -628,7 +628,7 @@ if ( featureTree  === 'all'){
       // map.addLayerTree(geojson);
 
       map.addMenuItem(name);
-map.addFeatureQuery(name)
+// map.addFeatureQuery(name)
     }else{
 
 let field= featureTree
@@ -750,6 +750,7 @@ geojson.features.forEach(feature => {
         }
         }
 
+        // Agregar la nueva capa al objeto de capas
         layers[fieldMarker] = true;
         map.addMenuItem(fieldMarker);
     }
@@ -758,6 +759,16 @@ geojson.features.forEach(feature => {
 
     }
 
+    
+
+
+
+
+
+
+
+      //add feature queries
+      // map.addFeatureQuery(name);
     } catch (error) {
       console.error(`Error fetching data: ${error.message}`);
     }
@@ -842,7 +853,7 @@ geojson.features.forEach(feature => {
    */
   getSource(source) {
     try {
-      this.map.getSource(source);
+     return this.map.getSource(source);
     } catch (error) {
       console.error(`Error getting source: ${error.message}`);
     }
@@ -860,6 +871,9 @@ geojson.features.forEach(feature => {
       console.error(`Error adding source: ${error.message}`);
     }
   }
+
+
+
   /**
    * Sets the style of the map.
    * @function setStyle
@@ -915,11 +929,28 @@ geojson.features.forEach(feature => {
 
   getLayer(layerId) {
     try {
-      this.map.getLayer(layerId);
+      return this.map.getLayer(layerId);
     } catch (error) {
       console.error(`Error getting layer: ${error.message}`);
     }
   }
+
+
+    /**
+   * Set filter for specified style layer.
+   * @function setFilter
+   * @param {string} layerId - The ID of the layer to retrieve.
+   * @param {array} filter - The filter.
+   * @param {string} options - Options object.
+   */
+
+    setFilter(layerId ,filter, options) {
+      try {
+        return this.map.setFilter(layerId, filter, options);
+      } catch (error) {
+        console.error(`Error setting filter: ${error.message}`);
+      }
+    }
   /**
    * Jumps to the specified coordinates and zoom on the map.
    * @function jumpTo
@@ -1149,7 +1180,7 @@ geojson.features.forEach(feature => {
    */
   addLayerGeoJSON(layer) {
     try {
-      this.map.on("load", () => {
+      // this.map.on("load", () => {
         this.map.addSource(`${layer.id}-sourceIcgcMap`, {
           type: "geojson",
           data: layer.data,
@@ -1162,7 +1193,7 @@ geojson.features.forEach(feature => {
           layout: layer.layout,
           paint: layer.paint,
         });
-      });
+      // });
     } catch (error) {
       console.error(`Error adding GeoJSON layer: ${error.message}`);
     }
@@ -1178,7 +1209,7 @@ geojson.features.forEach(feature => {
    */
   addLayerWMS(layer) {
     try {
-      this.map.on("load", () => {
+      // this.map.on("load", () => {
         console.log("holaaddlayerwms", layer);
         this.map.addSource(`${layer.id}-sourceIcgcMap`, {
           type: "raster",
@@ -1191,7 +1222,7 @@ geojson.features.forEach(feature => {
           source: `${layer.id}-sourceIcgcMap`,
           paint: {},
         });
-      });
+      // });
     } catch (error) {
       console.error(`Error adding WMS layer: ${error.message}`);
     }
@@ -1275,7 +1306,7 @@ geojson.features.forEach(feature => {
       };
 
       const basemapGroup = document.getElementById("basemap-group");
-      this.map.on("load", () => {
+      // this.map.on("load", () => {
         for (const url of basesArray) {
           for (const key of Object.keys(defaultOptions.baseStyles)) {
             const item = defaultOptions.baseStyles[key];
@@ -1289,7 +1320,7 @@ geojson.features.forEach(feature => {
             }
           }
         }
-      });
+      // });
     } catch (error) {
       console.error(`Error adding basemaps: ${error.message}`);
     }
@@ -1310,7 +1341,7 @@ geojson.features.forEach(feature => {
       };
 
       const basemapGroup = document.getElementById("basemap-group");
-      this.map.on("load", () => {
+      // this.map.on("load", () => {
         baseLayers.forEach((base) => {
           const div = document.createElement("div");
           div.className = "basemap-item";
@@ -1319,7 +1350,7 @@ geojson.features.forEach(feature => {
           basemapGroup.appendChild(div);
           div.addEventListener("click", () => handleClick(base));
         });
-      });
+      // });
     } catch (error) {
       console.error(`Error adding basemaps: ${error.message}`);
     }
@@ -1335,7 +1366,7 @@ geojson.features.forEach(feature => {
     try {
       let description;
 
-      this.map.on("load", () => {
+      // this.map.on("load", () => {
         // console.log('layer', layerName, options)
         this.map.on("mouseenter", layerName, () => {
           this.map.getCanvas().style.cursor = "pointer";
@@ -1380,7 +1411,7 @@ geojson.features.forEach(feature => {
             }
           }
         });
-      });
+      // });
     } catch (error) {
       console.error(`Error adding feature query: ${error.message}`);
     }
@@ -1470,7 +1501,7 @@ geojson.features.forEach(feature => {
         },
       };
 
-      this.map.on("load", () => {
+      // this.map.on("load", () => {
         this.map.addSource("geojson", {
           type: "geojson",
           data: geojson,
@@ -1501,7 +1532,7 @@ geojson.features.forEach(feature => {
           },
           filter: ["in", "$type", "LineString"],
         });
-      });
+      // });
 
       this.map.on("click", (e) => {
         clearTimeout(clickTimer);
@@ -1651,12 +1682,12 @@ geojson.features.forEach(feature => {
    */
   addPopup(coordinates, text) {
     try {
-      this.map.on("load", () => {
+      // this.map.on("load", () => {
         new maplibregl.Popup()
           .setLngLat(coordinates)
           .setHTML(text)
           .addTo(this.map);
-      });
+      // });
     } catch (error) {}
   }
 
@@ -1739,6 +1770,7 @@ geojson.features.forEach(feature => {
    */
   addMenuItem(name) {
     try {
+      if (name.length > 0){
       const menuGroup = document.getElementById("menu-group");
 
       const input = document.createElement("input");
@@ -1761,6 +1793,7 @@ geojson.features.forEach(feature => {
           e.target.checked ? "visible" : "none"
         );
       });
+    }
     } catch (error) {
       console.error(`Error adding menu item: ${error.message}`);
     }
@@ -1779,7 +1812,7 @@ geojson.features.forEach(feature => {
       let places = options.features;
 
       const filterGroup = document.getElementById("filter-group");
-      this.map.on("load", () => {
+      // this.map.on("load", () => {
         const layers = this.map.getStyle().layers;
         let firstSymbolId;
         for (let i = 0; i < layers.length; i++) {
@@ -1831,7 +1864,7 @@ geojson.features.forEach(feature => {
             });
           }
         });
-      });
+      // });
     } catch (error) {
       console.error(`Error adding layer tree: ${error.message}`);
     }
@@ -2047,18 +2080,47 @@ geojson.features.forEach(feature => {
         // layerUrl = op.url;
 
         const response = await fetch(layerUrl);
-        this.map.on("load", async () => {
+
+
+        // this.map.on("load", async () => {
           const fc = { type: "FeatureCollection", features: [] };
           for await (const f of flatgeobuf.deserialize(response.body))
+       
             fc.features.push(f);
-          let src = op.name + "-source";
+
+// console.log('ffff', fc, response)
+
+          let src = name + "-source";
 
           this.map.addSource(src, {
             type: "geojson",
             data: fc,
           });
+
+          if (layerUrl.includes('text')){
+            // console.log('entro', name)
+            this.map.addLayer({
+              id: name + "-text",
+              type: "symbol",
+              source: src,
+              layout:{
+                "text-letter-spacing":0.1,
+                "text-size":{"base":1.2,"stops":[[8,0],[12,14],[15,15]]},
+                "text-font":["FiraSans-Regular"],
+                "text-field":["get","NOM_AC"],
+                "text-transform":"none",
+                "text-max-width":25,
+                "visibility":"visible",
+                "text-justify":"right",
+                "text-anchor":"top",
+                "text-allow-overlap":false,
+                "symbol-spacing":2,
+                "text-line-height":1},
+              paint:{"text-halo-blur":0.5,"text-color":"rgba(90, 7, 7, 1)","text-halo-width":2,"text-halo-color":"rgba(255, 255, 255,0.8)"}
+            });
+          }else{
           this.map.addLayer({
-            id: op.name + "-fill",
+            id: name + "-fill",
             type: "fill",
             source: src,
             paint: {
@@ -2067,16 +2129,28 @@ geojson.features.forEach(feature => {
             },
           });
           this.map.addLayer({
-            id: op.name + "-line",
+            id: name + "-underline",
             type: "line",
             source: src,
             paint: {
-              "line-color": "#FFFFFF",
-              "line-opacity": 0.49,
+              "line-color": "#ffffff",
+              "line-opacity": 1,
+              "line-width": 3,
+            },
+          });
+          this.map.addLayer({
+            id: name + "-line",
+            type: "line",
+            source: src,
+            paint: {
+              "line-color": "#4832a8",
+              "line-opacity": 1,
               "line-width": 1,
             },
           });
-        });
+          }
+
+        // });
       }
     } catch (error) {
       console.error(`Error adding ICGC vector layer: ${error.message}`);
@@ -2090,7 +2164,7 @@ geojson.features.forEach(feature => {
    * @param {string} [positionButton='top-right'] - Position to add the button on the map.
    */
   addTerrainICGC(resolution, positionButton) {
-    this.map.on("load", () => {
+    // this.map.on("load", () => {
       try {
         // let op = Terrains.find(
         //   (objeto) => objeto.name === resolution
@@ -2155,6 +2229,6 @@ if (resolution.includes('terrarium') ){
       } catch (error) {
         console.error(`Error adding 3D terrain: ${error.message}`);
       }
-    }); //'load end
+    // }); //'load end
   }
 }