Upload folder using huggingface_hub

static/swipe_map.html

@@ -142,7 +142,7 @@
 
     const webmap = new WebMap({
       portalItem: {
-        id: "9f45f081b3e5416790b5652b5b47e90e" 
+        id: "9f45f081b3e5416790b5652b5b47e90e"
       },
       layers: [afterBufferLayer, beforeBufferLayer, changeBufferLayer]
     });
@@ -157,10 +157,10 @@
     });
 
 
-   if (split_url) {
-  // Renderizar como X personalizadas
-  renderSplitGraphics(view, split_url, false);
-   }
+    if (split_url) {
+      // Renderizar como X personalizadas
+      renderSplitGraphics(view, split_url, false);
+    }
 
     // 🔀 Swipe
     const swipe = new Swipe({
@@ -218,7 +218,7 @@
         if (value === undefined || colorHex === undefined) continue;
 
         // Convierte el color HEX a [r, g, b] array
-        const colorRGB = hexToRGB(colorHex, 0.8);
+        const colorRGB = hexToRGB(colorHex, 0.9);
 
         const utm = projection.project(geom, { wkid: 32615 });
         if (!utm) continue;
@@ -242,7 +242,7 @@
           attributes: { value, color: colorHex },
           symbol: {
             type: "simple-fill",
-            color: colorRGB, // ← ya el color real
+            color: colorRGB,
             outline: { color: [40, 40, 40, 0], width: 0.5 }
           }
         }));
@@ -290,102 +290,92 @@
       });
     });
 
-    
-async function renderSplitGraphics(view, split_url, useBuffer = false) {
-  if (!split_url) {
-    console.warn("⚠️ split_url no especificado");
-    return;
-  }
-
-  console.log("🗂️ Cargando capa split:", split_url);
 
-  const splitGraphicsLayer = new GraphicsLayer({ title: "Split Graphics" });
-  view.map.add(splitGraphicsLayer);
+    async function renderSplitGraphics(view, split_url, useBuffer = false) {
+      if (!split_url) {
+        console.warn("⚠️ split_url no especificado");
+        return;
+      }
 
-  const geoLayer = new GeoJSONLayer({ url: split_url });
-  await geoLayer.load();
+      console.log("🗂️ Cargando capa split:", split_url);
 
-  const features = await geoLayer.queryFeatures();
-  console.log(`📦 ${features.features.length} features cargadas desde split_url`);
+      const splitGraphicsLayer = new GraphicsLayer({ title: "Split Graphics" });
+      view.map.add(splitGraphicsLayer);
 
-  await projection.load();
+      const geoLayer = new GeoJSONLayer({ url: split_url });
+      await geoLayer.load();
 
-  const hexToRGB = (hex, alpha = 1) => {
-    if (!hex) return [210, 105, 30, alpha];
-    const c = hex.replace("#", "");
-    const bigint = parseInt(c, 16);
-    const r = (bigint >> 16) & 255;
-    const g = (bigint >> 8) & 255;
-    const b = bigint & 255;
-    return [r, g, b, alpha];
-  };
+      const features = await geoLayer.queryFeatures();
+      console.log(`📦 ${features.features.length} features cargadas desde split_url`);
 
-  const graphics = [];
-  for (const f of features.features) {
-    const geom = f.geometry;
-    const attrs = f.attributes;
-    const colorHex = attrs.color ?? "#d2691e";
-    const colorRGB = hexToRGB(colorHex, 0.85);
+      await projection.load();
 
-    if (useBuffer) {
-      const utm = projection.project(geom, { wkid: 32615 });
-      if (!utm) continue;
+      const graphics = [];
+      for (const f of features.features) {
+        const geom = f.geometry;
+        const attrs = f.attributes;
+        const colorHex = attrs.color ?? "#d2691e";
+        const colorRGB = hexToRGB(colorHex, 0.90);
+
+        if (useBuffer) {
+          const utm = projection.project(geom, { wkid: 32615 });
+          if (!utm) continue;
+
+          const { x, y } = utm;
+          const half = 50;
+
+          const squareUTM = new Polygon({
+            spatialReference: { wkid: 32615 },
+            rings: [[
+              [x - half, y - half],
+              [x + half, y - half],
+              [x + half, y + half],
+              [x - half, y + half],
+              [x - half, y - half]
+            ]]
+          });
+
+          const squareWGS = projection.project(squareUTM, { wkid: 4326 });
+
+          graphics.push(new Graphic({
+            geometry: squareWGS,
+            attributes: attrs,
+            symbol: {
+              type: "simple-fill",
+              color: colorRGB,
+              outline: { color: [40, 40, 40, 0.2], width: 0.5 }
+            }
+          }));
+        } else {
+          graphics.push(new Graphic({
+            geometry: geom,
+            attributes: attrs,
+            symbol: {
+              type: "simple-marker",
+              path: "M -1 -1 L 1 1 M -1 1 L 1 -1",
+              color: colorRGB,
+              size: 9, // más grande
+              outline: {
+                color: colorRGB,
+                width: 6 // más gruesa
+              }
+            }
+
+          }));
+        }
+      }
 
-      const { x, y } = utm;
-      const half = 50;
+      splitGraphicsLayer.addMany(graphics);
+      console.log(`✅ Renderizadas ${graphics.length} features en ${useBuffer ? "modo buffer" : "modo X"}`);
 
-      const squareUTM = new Polygon({
-        spatialReference: { wkid: 32615 },
-        rings: [[
-          [x - half, y - half],
-          [x + half, y - half],
-          [x + half, y + half],
-          [x - half, y + half],
-          [x - half, y - half]
-        ]]
-      });
+      // 🔹 Ajuste dinámico inverso de tamaño (zoom menor → ícono más grande)
 
-      const squareWGS = projection.project(squareUTM, { wkid: 4326 });
 
-      graphics.push(new Graphic({
-        geometry: squareWGS,
-        attributes: attrs,
-        symbol: {
-          type: "simple-fill",
-          color: colorRGB,
-          outline: { color: [40, 40, 40, 0.2], width: 0.5 }
-        }
-      }));
-    } else {
-      graphics.push(new Graphic({
-        geometry: geom,
-        attributes: attrs,
-       symbol: {
-  type: "simple-marker",
-  path: "M -1 -1 L 1 1 M -1 1 L 1 -1",
-  color: colorRGB,
-  size: 9, // más grande
-  outline: {
-    color: colorRGB,
-    width: 6 // más gruesa
-  }
-}
-
-      }));
+      return splitGraphicsLayer;
     }
-  }
-
-  splitGraphicsLayer.addMany(graphics);
-  console.log(`✅ Renderizadas ${graphics.length} features en ${useBuffer ? "modo buffer" : "modo X"}`);
-
-  // 🔹 Ajuste dinámico inverso de tamaño (zoom menor → ícono más grande)
-
 
-  return splitGraphicsLayer;
-}
 
 
-  
   </script>