3D Terrain Toggle Component

version 0.0.1

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:

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

<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).

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:

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.