mapicgc-gl-js 1.0.2 → 1.0.4

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "mapicgc-gl-js",
   "homepage": "https://openicgc.github.io/mapicgc-doc/",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "mapicgc-gl-js library",
   "author": "Institut Cartogràfic i Geològic de Catalunya",
   "license": "BSD-3-Clause",
   "type": "commonjs",
-
   "keywords": [
     "map",
     "js",
@@ -43,34 +42,34 @@
     "test": "vitest"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.5",
-    "@babel/preset-env": "^7.28.5",
-    "@rollup/plugin-babel": "^6.1.0",
-    "axios": "^1.13.1",
-    "dotenv": "^17.2.3",
-    "jest": "30.2.0",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.2",
+    "@rollup/plugin-babel": "^7.0.0",
+    "axios": "^1.14.0",
+    "dotenv": "^17.3.1",
+    "jest": "30.3.0",
     "jsdoc": "^4.0.5",
-    "jsdom": "^27.0.1",
+    "jsdom": "^29.0.1",
     "npm-run-all": "^4.1.5",
     "package-json-versionify": "^1.0.4",
     "path": "^0.12.7",
     "rollup-plugin-polyfill": "^4.2.0",
-    "ssh2-sftp-client": "^12.0.1",
-    "vite": "^7.1.12",
-    "vite-plugin-node-polyfills": "^0.24.0",
-   "vitest": "^4.0.5",
+    "ssh2-sftp-client": "^12.1.1",
+    "vite": "^8.0.3",
+    "vite-plugin-node-polyfills": "^0.26.0",
+    "vitest": "^4.1.2",
     "xml2js": "^0.6.2"
   },
   "dependencies": {
-    "@deck.gl/core": "^9.2.2",
-    "@deck.gl/geo-layers": "^9.2.2",
-    "@deck.gl/mapbox": "^9.2.2",
+    "@deck.gl/core": "^9.2.11",
+    "@deck.gl/geo-layers": "^9.2.11",
+    "@deck.gl/mapbox": "^9.2.11",
     "@loaders.gl/3d-tiles": "~4.3.4",
     "@maplibre/maplibre-gl-compare": "^0.5.0",
-    "@maplibre/maplibre-gl-geocoder": "^1.9.1",
-    "@watergis/maplibre-gl-export": "^4.1.0",
-    "flatgeobuf": "^4.3.1",
-    "maplibre-gl": "^5.10.0",
+    "@maplibre/maplibre-gl-geocoder": "^1.9.4",
+    "@watergis/maplibre-gl-export": "^4.1.2",
+    "flatgeobuf": "^4.4.0",
+    "maplibre-gl": "^5.21.1",
     "utm-latlng": "^1.0.8"
   }
 }

package/src/map/Map.js

@@ -178,6 +178,13 @@ export default class Map {
     }
   
     this.map.on("load", () => {
+      this.addAttributionControl()
+         setTimeout(() => {
+        const attribBtn = document.querySelector('.maplibregl-ctrl-attrib-button');
+        if (attribBtn) {
+          attribBtn.click();
+        }
+      }, 1000);
       if (!isRaster && !isRelief) {
         const nameStyle = this.map.getStyle().name;
         const urlName = options.style;
@@ -2846,14 +2853,61 @@ export default class Map {
     }
   }
   /**
-   * Adds an attribution control to the map with the provided options.
+   * Adds an attribution control to the map. Always includes "Fet amb MapICGC" attribution by default.
+   * If additional custom attributions are provided, they will be combined with the default one.
    * @function addAttributionControl
-   * @param {Object} options - Options for the attribution control.
+   * @param {Object} [options] - Options for the attribution control.
+   * @param {boolean} [options.compact=true] - If true, the attribution control will be compact.
+   * @param {string|string[]} [options.customAttribution] - Additional custom attribution(s) to display alongside "Fet amb MapICGC".
+   * @param {number} [options.autoCollapseDelay] - If set, the attribution will auto-collapse after this many milliseconds. E.g., 3000 for 3 seconds.
    * @param {string} [position='bottom-right'] - Position to add the control on the map.
+   * @example
+   * // Default usage: shows "Fet amb MapICGC" with compact mode
+   * map.addAttributionControl();
+   *
+   * // With additional custom attribution
+   * map.addAttributionControl({ customAttribution: '© El meu projecte' });
+   *
+   * // With multiple custom attributions
+   * map.addAttributionControl({ customAttribution: ['© Projecte A', '© Projecte B'] });
+   *
+   * // With auto-collapse after 3 seconds
+   * map.addAttributionControl({ autoCollapseDelay: 3000 });
    */
   addAttributionControl(options, position) {
     try {
-      this.map.addControl(new maplibregl.AttributionControl(options), position);
+      const mapicgcAttribution = '<a style="font-weight: bold; color: #D97634;" href="https://www.icgc.cat/Eines-i-visors/Recursos-desenvolupadors/Biblioteca-MapICGC-GL-JS/" target="_blank">Fet amb MapICGC</a>';
+      const mergedOptions = Object.assign({}, { compact: true }, options);
+      const autoCollapseDelay = mergedOptions.autoCollapseDelay;
+      
+      // Remove autoCollapseDelay from options before passing to AttributionControl
+      delete mergedOptions.autoCollapseDelay;
+
+      if (mergedOptions.customAttribution) {
+        if (Array.isArray(mergedOptions.customAttribution)) {
+          if (!mergedOptions.customAttribution.includes(mapicgcAttribution)) {
+            mergedOptions.customAttribution = [mapicgcAttribution, ...mergedOptions.customAttribution];
+          }
+        } else {
+          if (mergedOptions.customAttribution !== mapicgcAttribution) {
+            mergedOptions.customAttribution = [mapicgcAttribution, mergedOptions.customAttribution];
+          }
+        }
+      } else {
+        mergedOptions.customAttribution = mapicgcAttribution;
+      }
+
+      this.map.addControl(new maplibregl.AttributionControl(mergedOptions), position);
+      
+      // Auto-collapse after specified delay if autoCollapseDelay is set
+      if (autoCollapseDelay && typeof autoCollapseDelay === 'number' && autoCollapseDelay > 0) {
+        setTimeout(() => {
+          const attributionButton = document.querySelector('.maplibregl-ctrl-attrib-button');
+          if (attributionButton && attributionButton.getAttribute('aria-pressed') === 'true') {
+            attributionButton.click();
+          }
+        }, autoCollapseDelay);
+      }
     } catch (error) {
       console.error(`Error adding attribution control: ${error.message}`);
     }
@@ -3318,14 +3372,19 @@ export default class Map {
         const ambientLight = new AmbientLight({
           intensity: 4,
         });
-        const lightingEffect = new LightingEffect({
-          ambientLight,
-        });
+
+  if (this.map.getTerrain()) this.map.setTerrain(null);
         this.map.setTerrain({
           source: defaultOptions.map3dOptions.terrainSource,
           exaggeration: defaultOptions.map3dOptions.exaggeration,
         });
 
+        const lightingEffect = new LightingEffect({
+          ambientLight,
+        });
+
+      
+
         citiesMapboxLayer = new MapboxOverlay({
           interleaved: true,
           layers: [this._createCitiesMapboxLayer(false)], // Inicialment invisible

package/test/exemples/addBasemap.html

@@ -5,7 +5,7 @@
   <title>Exemple mapicgc-gl-js: Afegir mapa base ICGC</title>
   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
 
-  <script src="../../dist/mapicgc-gl.umd.js"></script>
+  <script src="../../dist/mapicgc-gl.js"></script>
   <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
 
   <style>

package/test/exemples/addCompare.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
   <title>Exemple mapicgc-gl-js: Afegir comparador</title>
   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
-  <script src="../../dist/mapicgc-gl.umd.js"></script>
+  <script src="../../dist/mapicgc-gl.js"></script>
   <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
 
   <style>

package/test/exemples/addControl.html

@@ -4,7 +4,7 @@
     <meta charset='utf-8' />
     <title>test mapicgc-gl-js</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src="../../dist/mapicgc-gl.umd.js"></script>
+    <script src="../../dist/mapicgc-gl.js"></script>
     <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
 
     <style>

package/test/exemples/addFeatureQuery.html

@@ -4,7 +4,7 @@
     <meta charset='utf-8' />
     <title>test mapicgc-gl-js</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src="../../dist/mapicgc-gl.umd.js"></script>
+    <script src="../../dist/mapicgc-gl.js"></script>
     <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
 
     <style>

package/test/exemples/addGeocoderICGC.html

@@ -3,7 +3,7 @@
     <meta charset='utf-8' />
     <title>addGeocoderICGC.html</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src="../../dist/mapicgc-gl.umd.js"></script>
+    <script src="../../dist/mapicgc-gl.js"></script>
     <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
     <style>
         body {

package/test/exemples/addICGCTerrain.html

@@ -3,7 +3,7 @@
     <meta charset='utf-8' />
     <title>addICGCTerrain.html</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src="../../dist/mapicgc-gl.umd.js"></script>
+    <script src="../../dist/mapicgc-gl.js"></script>
     <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
     <style>
         body {

package/test/exemples/addICGCTerrainCustomStyle.html

@@ -3,7 +3,7 @@
     <meta charset='utf-8' />
     <title>addICGCTerrain.html</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src="../../dist/mapicgc-gl.umd.js"></script>
+    <script src="../../dist/mapicgc-gl.js"></script>
     <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
     <style>
         body {

package/test/exemples/addImageLayerICGC.html

@@ -4,7 +4,7 @@
   <meta charset='utf-8' />
   <title>test mapicgc-gl-js</title>
   <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-  <script src="../../dist/mapicgc-gl.umd.js"></script>
+  <script src="../../dist/mapicgc-gl.js"></script>
   <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
   <style>
     body {

package/test/exemples/addLayerGeojson.html

@@ -4,7 +4,7 @@
     <meta charset='utf-8' />
     <title>addLayerGeojson.html</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src="../../dist/mapicgc-gl.umd.js"></script>
+    <script src="../../dist/mapicgc-gl.js"></script>
     <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
     <style>
         body {

package/test/exemples/addLayerTree.html

@@ -4,7 +4,7 @@
     <meta charset='utf-8' />
     <title>addLayerTree</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src="../../dist/mapicgc-gl.umd.js"></script>
+    <script src="../../dist/mapicgc-gl.js"></script>
     <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
     <style>
         body {

package/test/exemples/addLogo.html

@@ -3,7 +3,7 @@
   <meta charset='utf-8' />
   <title>addLogo</title>
   <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-  <script src="../../dist/mapicgc-gl.umd.js"></script>
+  <script src="../../dist/mapicgc-gl.js"></script>
   <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
   <style>
     body {

package/test/exemples/addMapStyle.html

@@ -4,7 +4,7 @@
     <meta charset='utf-8' />
     <title>addMapStyle</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src="../../dist/mapicgc-gl.umd.js"></script>
+    <script src="../../dist/mapicgc-gl.js"></script>
     <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
     <style>
         body {
@@ -39,13 +39,15 @@
             
             map.on("load", () => {
                 map.flyTo({
-  center: [2.812786, 41.98559],
-  zoom: 14,
+                    center: [2.812786, 41.98559],
+                    zoom: 14,
+                });
 
-});
-
-      });
+              
+            });
         }
+
+
         initMap();
     </script>
 </body>

package/test/exemples/addMarker.html

@@ -3,7 +3,7 @@
     <meta charset='utf-8' />
     <title>addMarker</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src="../../dist/mapicgc-gl.umd.js"></script>
+    <script src="../../dist/mapicgc-gl.js"></script>
     <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
     <style>
         body {

package/test/exemples/addMouseCoordinateControl.html

@@ -3,7 +3,7 @@
     <meta charset='utf-8' />
     <title>addMouseCoordinateControl</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src="../../dist/mapicgc-gl.umd.js"></script>
+    <script src="../../dist/mapicgc-gl.js"></script>
     <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
     <style>
         body {

package/test/exemples/addReliefStyle.html

@@ -4,7 +4,7 @@
     <meta charset='utf-8' />
     <title>addICGCTerrain.html</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src="../../dist/mapicgc-gl.umd.js"></script>
+    <script src="../../dist/mapicgc-gl.js"></script>
     <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
     <style>
         body {

package/test/exemples/addVectorLayerICGC.html

@@ -4,7 +4,7 @@
     <meta charset='utf-8' />
     <title>addVectorLayerICGC</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src="../../dist/mapicgc-gl.umd.js"></script>
+    <script src="../../dist/mapicgc-gl.js"></script>
     <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
     <style>
         body {

package/test/exemples/advancedExemple.html

@@ -4,7 +4,7 @@
     <meta charset='utf-8' />
     <title>advancedExemple</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src="../../dist/mapicgc-gl.umd.js"></script>
+    <script src="../../dist/mapicgc-gl.js"></script>
     <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
     <style>
         body {

package/test/exemples/fetchData.html

@@ -4,7 +4,7 @@
     <meta charset='utf-8' />
     <title>fetchData</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src="../../dist/mapicgc-gl.umd.js"></script>
+    <script src="../../dist/mapicgc-gl.js"></script>
     <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
     <style>
         body {

package/test/exemples/fetchDataAndMenu.html

@@ -3,7 +3,7 @@
     <meta charset='utf-8' />
     <title>test mapicgc-gl-js</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src="../../dist/mapicgc-gl.umd.js"></script>
+    <script src="../../dist/mapicgc-gl.js"></script>
     <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
     <style>
         body {

package/test/exemples/styleOrto3D.html

@@ -4,7 +4,7 @@
     <meta charset='utf-8' />
     <title>styleOrto3D</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src="../../dist/mapicgc-gl.umd.js"></script>
+    <script src="../../dist/mapicgc-gl.js"></script>
     <link href="../../dist/mapicgc-gl.css" rel="stylesheet" />
     <style>
         body {

package/test/vitest/Config.test.js

@@ -0,0 +1,145 @@
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+
+// Mock axios before importing Config
+vi.mock('axios', () => ({
+  default: {
+    get: vi.fn(),
+  },
+}));
+
+import axios from 'axios';
+import mapicgcConfig from '../../src/mapicgc-config.json';
+
+// Import Config after mocking axios
+import Config from '../../src/constants/ConfigICGC.js';
+
+describe('ConfigICGC', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('should export a Config class with getConfigICGC static method', () => {
+    expect(Config).toBeDefined();
+    expect(typeof Config.getConfigICGC).toBe('function');
+  });
+
+  test('should return remote config data when API responds successfully', async () => {
+    const mockRemoteConfig = {
+      Styles: { TOPO: 'https://example.com/topo.json' },
+      Layers: { WMS: {} },
+      Terrains: {},
+      defaultOptions: { mapOptions: {} },
+    };
+
+    axios.get.mockResolvedValueOnce({ data: mockRemoteConfig });
+
+    const result = await Config.getConfigICGC();
+
+    expect(axios.get).toHaveBeenCalledTimes(1);
+    expect(axios.get).toHaveBeenCalledWith(
+      'https://eines.icgc.cat/recursos/mapicgc-gl-js/mapicgc-config.json',
+      { timeout: 5000 }
+    );
+    expect(result).toEqual(mockRemoteConfig);
+  });
+
+  test('should return local mapicgc-config.json when API returns empty data', async () => {
+    axios.get.mockResolvedValueOnce({ data: null });
+
+    const result = await Config.getConfigICGC();
+
+    expect(result).toEqual(mapicgcConfig);
+  });
+
+  test('should return local mapicgc-config.json when API call fails with network error', async () => {
+    axios.get.mockRejectedValueOnce(new Error('Network Error'));
+
+    const result = await Config.getConfigICGC();
+
+    expect(result).toEqual(mapicgcConfig);
+  });
+
+  test('should return local mapicgc-config.json when API returns HTTP error', async () => {
+    const httpError = new Error('Request failed');
+    httpError.response = { data: 'Not Found', status: 404 };
+    axios.get.mockRejectedValueOnce(httpError);
+
+    const result = await Config.getConfigICGC();
+
+    expect(result).toEqual(mapicgcConfig);
+  });
+
+  test('should return local mapicgc-config.json when server does not respond (timeout)', async () => {
+    const timeoutError = new Error('Timeout');
+    timeoutError.request = {};
+    axios.get.mockRejectedValueOnce(timeoutError);
+
+    const result = await Config.getConfigICGC();
+
+    expect(result).toEqual(mapicgcConfig);
+  });
+});
+
+describe('mapicgc-config.json structure', () => {
+  test('should have defaultOptions with mapOptions', () => {
+    expect(mapicgcConfig.defaultOptions).toBeDefined();
+    expect(mapicgcConfig.defaultOptions.mapOptions).toBeDefined();
+  });
+
+  test('should have mapOptions with required fields', () => {
+    const mapOpts = mapicgcConfig.defaultOptions.mapOptions;
+    expect(mapOpts.container).toBeDefined();
+    expect(mapOpts.center).toBeDefined();
+    expect(mapOpts.zoom).toBeDefined();
+    expect(mapOpts.style).toBeDefined();
+    expect(mapOpts.maxZoom).toBeDefined();
+  });
+
+  test('should have center coordinates for Catalonia', () => {
+    const center = mapicgcConfig.defaultOptions.mapOptions.center;
+    // Catalonia approx: lon 0.15-3.33, lat 40.5-42.9
+    const lon = center['0'] || center[0];
+    const lat = center['1'] || center[1];
+    expect(lon).toBeGreaterThan(0);
+    expect(lon).toBeLessThan(4);
+    expect(lat).toBeGreaterThan(40);
+    expect(lat).toBeLessThan(43);
+  });
+
+  test('should have Styles configuration', () => {
+    expect(mapicgcConfig.Styles).toBeDefined();
+    expect(Array.isArray(mapicgcConfig.Styles) || typeof mapicgcConfig.Styles === 'object').toBe(true);
+  });
+
+  test('should have Layers configuration with WMS, Orto, Vector', () => {
+    expect(mapicgcConfig.Layers).toBeDefined();
+    expect(mapicgcConfig.Layers.WMS).toBeDefined();
+    expect(mapicgcConfig.Layers.Orto).toBeDefined();
+    expect(mapicgcConfig.Layers.Vector).toBeDefined();
+  });
+
+  test('should have Terrains configuration', () => {
+    expect(mapicgcConfig.Terrains).toBeDefined();
+  });
+
+  test('should have geocoder config with pelias URLs', () => {
+    const geocoder = mapicgcConfig.defaultOptions.geocoder;
+    expect(geocoder).toBeDefined();
+    expect(geocoder.peliasUrl1).toBeDefined();
+    expect(geocoder.peliasUrl1).toContain('icgc.cat');
+  });
+
+  test('should have logo ICGC options', () => {
+    const logo = mapicgcConfig.defaultOptions.logoIcgcOptions;
+    expect(logo).toBeDefined();
+    expect(logo.logoUrlColor).toBeDefined();
+    expect(logo.logoLink).toContain('icgc.cat');
+  });
+
+  test('should have map3d options', () => {
+    const opts3d = mapicgcConfig.defaultOptions.map3dOptions;
+    expect(opts3d).toBeDefined();
+    expect(opts3d.exaggeration).toBeDefined();
+    expect(opts3d.terrainSource).toBeDefined();
+  });
+});