@icgcat/toggle3d 0.0.1

package/README.md

@@ -0,0 +1,131 @@
+# 3D Terrain Toggle Component
+
+This Svelte component provides a button to toggle between 2D and 3D terrain visualization on a MapLibre-based map. The component dynamically adjusts terrain sources based on the map's location and zoom level.
+
+---
+
+## Installation
+
+Install the component via npm:
+
+```bash
+npm install @icgcat/toggle3d
+```
+
+---
+
+## Features
+
+- **3D Terrain Visualization**: Enable and disable 3D terrain on a MapLibre map.
+- **Dynamic Terrain Source**: Switches between two terrain sources based on location and zoom.
+  - **ICGC Terrain**: Used for areas within Catalonia.
+  - **MapZen Terrain**: Used for other regions.
+- **Customizable Options**: Set pitch angle, terrain exaggeration, and button position.
+- **Smooth Transitions**: Includes animation when toggling terrain.
+
+---
+
+## Props
+
+The component accepts the following properties:
+
+| Property              | Default       | Description                                                                 |
+|-----------------------|---------------|-----------------------------------------------------------------------------|
+| `map`                | `null`        | **Required.** The MapLibre map instance.                                    |
+| `pitch`              | `60`          | The pitch angle (in degrees) for 3D visualization.                          |
+| `terrainExaggeration` | `1.5`         | Exaggeration factor for the terrain.                                        |
+| `position`           | `"bottomright"` | Button position: `topleft`, `topright`, `bottomleft`, `bottomright`.        |
+
+---
+
+## Usage Example
+
+### Svelte
+
+```svelte
+<script>
+    import Toggle3d from "@icgcat/toggle3d";
+    import maplibre from "maplibre-gl";
+
+    let map;
+
+    // Initialize the map
+    onMount(() => {
+        map = new maplibre.Map({
+            container: "map",
+            style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",
+            center: [2.1734, 41.3851], // Barcelona
+            zoom: 9,
+        });
+    });
+</script>
+
+<div id="map" style="width: 100%; height: 400px;"></div>
+<Toggle3d {map} pitch={45} terrainExaggeration={2} position="topright" />
+```
+
+---
+
+## Terrain Sources
+
+The component uses the following terrain sources:
+
+- **ICGC Terrain**: `urlTerrainIcgc` (specific to Catalonia).
+- **MapZen Terrain**: `urlTerrainMapZen` (global fallback).
+
+Ensure you define these URLs in your `config.js` file:
+
+```javascript
+export const urlTerrainIcgc = "https://your-icgc-terrain-url/{z}/{x}/{y}.png";
+export const urlTerrainMapZen = "https://your-mapzen-terrain-url/{z}/{x}/{y}.png";
+```
+
+---
+
+## API Methods
+
+### `toggle()`
+Toggles between 2D and 3D terrain.
+
+- **Behavior**:
+  - Activates 3D terrain with dynamic source selection.
+  - Restores 2D map when toggled off.
+
+---
+
+## Styling
+
+The button is styled by default but can be customized using the following CSS classes:
+
+| Class         | Description           |
+|---------------|-----------------------|
+| `.topleft`    | Positions button at top-left corner. |
+| `.topright`   | Positions button at top-right corner. |
+| `.bottomleft` | Positions button at bottom-left corner. |
+| `.bottomright`| Positions button at bottom-right corner. |
+
+Default button styles:
+
+```css
+button {
+    padding: 6px;
+    font-size: 14px;
+    background-color: #c4c4c4;
+    color: black;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    z-index: 9999;
+}
+
+button:hover {
+    background-color: #949393;
+}
+```
+
+---
+
+## License
+
+This project is licensed under the [MIT License](LICENSE).

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@icgcat/toggle3d",
+  "version": "0.0.1",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "vite build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [],
+  "author": "Geostarters",
+  "license": "ISC",
+  "description": "A Svelte Toggle 3D component for Maplibre",
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "svelte": "^5.0.0",
+    "svelte-preprocess": "^6.0.3",
+    "vite": "^6.0.3"
+  }
+}

package/src/Toggle3d.svelte

@@ -0,0 +1,140 @@
+<script>
+    import { urlTerrainIcgc, urlTerrainMapZen } from "./config.js";
+
+    export const componentProps = {
+        map: { default: null }, // L'objecte map (per defecte null)
+        pitch: { default: 60 },
+        terrainExaggeration: { default: 1.5 },
+        position: { default: "bottomright" }, // Posició del botó (per defecte 'bottomright')
+    };
+
+    let terrain;
+
+    const { map, pitch, terrainExaggeration, position } = $props();
+
+    let active = $state(false);
+
+    // Validem que l'objecte map sigui vàlid
+    if (!map) {
+        throw new Error("L'objecte 'map' passat no és vàlid.");
+    }
+
+    const cataloniaBounds = {
+        x0: 0.0,
+        y0: 38.5,
+        x1: 6.0,
+        y1: 62.33,
+    };
+
+    let minPitchZoom = 10;
+
+    // Funció per activar o desactivar el terreny
+    function toggle() {
+        active = !active;
+
+        if (active) {
+            const { longitude, latitude } = map.getCenter();
+            const zoom = map.getZoom();
+
+            // Configuració de terreny segons la zona i zoom
+            if (zoom < minPitchZoom) {
+                setTerrainSource("terrainMapZen", terrainExaggeration);
+                terrain = urlTerrainMapZen;
+            } else if (
+                longitude >= cataloniaBounds.x0 &&
+                longitude <= cataloniaBounds.x1 &&
+                latitude >= cataloniaBounds.y0 &&
+                latitude <= cataloniaBounds.y1
+            ) {
+                terrain = urlTerrainIcgc;
+                setTerrainSource("terrainICGC", terrainExaggeration);
+            } else {
+                setTerrainSource("terrainMapZen", terrainExaggeration);
+                terrain = urlTerrainMapZen;
+            }
+
+            map.easeTo({
+                pitch: pitch,
+                duration: 500,
+            });
+        } else {
+            // Restableix l'estat del terreny i la inclinació
+            map.setTerrain(null);
+
+            map.easeTo({
+                pitch: 0,
+                duration: 500,
+            });
+        }
+    }
+
+    function setTerrainSource(sourceId, exaggeration) {
+        console.log("sourceId", sourceId);
+        if (!map.getSource(sourceId)) {
+            try {
+                map.addSource(sourceId, {
+                    type: "raster-dem",
+                    tiles: [terrain],
+                    tileSize: 512,
+                    maxzoom: 14,
+                });
+            } catch (error) {
+                console.error("Error afegint la font de terreny:", error);
+            }
+        }
+        map.setTerrain({
+            source: sourceId,
+            exaggeration,
+        });
+    }
+</script>
+
+<button onclick={toggle} class={position}>
+    {#if active}
+        2D
+    {:else}
+        3D
+    {/if}
+</button>
+
+<style>
+    button {
+        padding: 6px;
+        font-size: 14px;
+        background-color: #c4c4c4;
+        color: black;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: background-color 0.3s;
+        z-index: 9999;
+    }
+
+    button:hover {
+        background-color: #949393;
+    }
+
+    /* Estils per a diferents posicions */
+    .topleft {
+        position: fixed;
+        top: 10px;
+        left: 10px;
+    }
+
+    .topright {
+        position: fixed;
+        top: 10px;
+        right: 10px;
+    }
+
+    .bottomleft {
+        bottom: 10px;
+        left: 10px;
+    }
+
+    .bottomright {
+        position: fixed;
+        bottom: 10px;
+        right: 10px;
+    }
+</style>

package/src/config.js

@@ -0,0 +1,2 @@
+export let urlTerrainIcgc = "https://geoserveis.icgc.cat/servei/catalunya/contextmaps-terreny-5m-rgb/wmts/{z}/{x}/{y}.png";
+export let urlTerrainMapZen = "https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png";

package/src/index.js

@@ -0,0 +1,3 @@
+import Toggle3d from "./Toggle3d.svelte";
+
+export default Toggle3d;

package/vite.config.js

@@ -0,0 +1,23 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { sveltePreprocess } from "svelte-preprocess";
+
+export default defineConfig({
+    plugins: [svelte({ preprocess: sveltePreprocess() })],
+    build: {
+        lib: {
+            entry: "src/index.js",
+            name: "Toggle3d",
+            formats: ["es", "cjs", "umd"],
+            fileName: (format) => `toggle3d.${format}.js`,
+        },
+        rollupOptions: {
+            external: ["svelte"],
+            output: {
+                globals: {
+                    svelte: "Svelte",
+                },
+            },
+        },
+    },
+});