open-index/open-npm huggingface dataset:
npm package: @swissgeo/elevation-profile
Description: Components to request and display an elevation profile over Switzerland
Latest version: 1.0.1

# @swissgeo/elevation-profile

Components to request and display an elevation profile over Switzerland.

This package provides a Vue 3 component that fetches elevation data for a given path and displays it as an interactive chart using Chart.js. It also includes bridge components for easy integration with Cesium and OpenLayers.

## Installation

```bash
pnpm add @swissgeo/elevation-profile
```

### TailwindCSS integration

To properly style the profile, you need to set up TailwindCSS in your project, and then to import the profile style by doing
```css
/* style.css */

@import 'tailwindcss';

@import '@swissgeo/elevation-profile/tailwindcss';
```

## Usage

### Basic Usage

```vue
<script setup>
import SwissGeoElevationProfile from '@swissgeo/elevation-profile'

const points = [
  [2600000, 1200000],
  [2601000, 1201000],
  // ... more coordinates in LV95 (CH1903+)
]
</script>

<template>
  <div style="height: 300px;">
    <SwissGeoElevationProfile :points="points" />
  </div>
</template>
```

### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `points` | `SingleCoordinate[]` | `[]` | Array of coordinates defining the path for the elevation profile. |
| `projection` | `string` | `'EPSG:2056'` | The projection of the input points (e.g., `'EPSG:2056'` for LV95 or `'EPSG:4326'` for WGS84). |
| `simplify` | `boolean` | `false` | Whether to simplify the geometry before requesting the profile. |
| `filename` | `string` | `'export'` | The default filename used when exporting the profile data as CSV. |

## Map Integration

The package provides "bridge" components that allow synchronizing the elevation profile with a map. When you hover over the elevation chart, these components will display a marker at the corresponding location on the map.

### Cesium Integration

```vue
<script setup>
import SwissGeoElevationProfile, { SwissGeoElevationProfileCesiumBridge } from '@swissgeo/elevation-profile'

const points = [...] // your points
const cesiumViewer = ... // your Cesium Viewer instance
</script>

<template>
  <SwissGeoElevationProfile :points="points">
    <SwissGeoElevationProfileCesiumBridge :cesium-viewer="cesiumViewer" />
  </SwissGeoElevationProfile>
</template>
```

### OpenLayers Integration

```vue
<script setup>
import SwissGeoElevationProfile, { SwissGeoElevationProfileOpenLayersBridge } from '@swissgeo/elevation-profile'

const points = [...] // your points
const olMap = ... // your OpenLayers Map instance
</script>

<template>
  <SwissGeoElevationProfile :points="points">
    <SwissGeoElevationProfileOpenLayersBridge :ol-instance="olMap" />
  </SwissGeoElevationProfile>
</template>
```

## License

BSD-3-Clause

## Repository

[https://github.com/geoadmin/web-mapviewer](https://github.com/geoadmin/web-mapviewer)
npm package: @swissgeo/tooltip
Description: Tooltip for SWISSGEO projects.
Latest version: 1.0.0

# @swissgeo/tooltip

Tooltip for SWISSGEO projects.

This package provides a Vue 3 tooltip component based on [floating-ui](https://floating-ui.com/).

## Installation

```bash
pnpm add @swissgeo/tooltip
```

### TailwindCSS integration

To properly style the tooltip, you need to set up TailwindCSS in your project, and then import the tooltip style by doing:

```css
/* style.css */

@import 'tailwindcss';

@import '@swissgeo/tooltip/tailwindcss';
```

## Usage

### Basic Usage

```vue
<script setup>
import SwissGeoTooltip from '@swissgeo/tooltip'
</script>

<template>
  <SwissGeoTooltip tooltip-content="My Tooltip Text">
    <button>Hover me</button>
  </SwissGeoTooltip>
</template>
```

### Custom Content Slot

```vue
<script setup>
import SwissGeoTooltip from '@swissgeo/tooltip'
</script>

<template>
  <SwissGeoTooltip>
    <button>Hover me</button>
    <template #content>
      <span class="font-bold">Rich</span> tooltip content
    </template>
  </SwissGeoTooltip>
</template>
```

### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tooltip-content` | `string` | `''` | The text content of the tooltip. |
| `placement` | `'top' \| 'bottom' \| 'right' \| 'left'` | `'top'` | The desired placement of the tooltip. |
| `disabled` | `boolean` | `false` | Disable the tooltip. |
| `theme` | `'light' \| 'warning' \| 'secondary' \| 'danger'` | `'light'` | The tooltip theme. |
| `open-trigger` | `'hover' \| 'click' \| 'manual'` | `'hover'` | How the tooltip shall be triggered. |
| `no-wrap` | `boolean` | `false` | If whitespace wrapping the content should be avoided. |
| `use-default-padding` | `boolean` | `false` | Use the padding regardless of content slot usage. |

## License

BSD-3-Clause

## Repository

[https://github.com/geoadmin/web-mapviewer](https://github.com/geoadmin/web-mapviewer)