New Release v1.28.0 - #minor

README.md

@@ -3,19 +3,17 @@
 <!-- prettier-ignore -->
 | Branch  | CI Status  | E2E Tests | Deployed version |
 | ------- | ---------- | --------- | ---------------- |
-| develop | ![Build Status](https://codebuild.eu-central-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiSFlMY3hpUEwvTGkzMDJaMzF1QUdxUm54MmdvR3JKMzVTT3JDdHRaK2JLaXFNZkxjVkoyM3JOaE1DSkJuRzR2MU5RRDdMNFczMWVXSEgvd291cXNkS3dZPSIsIml2UGFyYW1ldGVyU3BlYyI6Im9qVDhwZ2h1VnhSOU5GWE0iLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=develop) | [![web-mapviewer](https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/simple/fj2ezv/develop&style=plastic&logo=cypress)](https://cloud.cypress.io/projects/fj2ezv/runs) | <https://sys-map.dev.bgdi.ch/> |
-| master  | ![Build Status](https://codebuild.eu-central-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiSFlMY3hpUEwvTGkzMDJaMzF1QUdxUm54MmdvR3JKMzVTT3JDdHRaK2JLaXFNZkxjVkoyM3JOaE1DSkJuRzR2MU5RRDdMNFczMWVXSEgvd291cXNkS3dZPSIsIml2UGFyYW1ldGVyU3BlYyI6Im9qVDhwZ2h1VnhSOU5GWE0iLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=master) | [![web-mapviewer](https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/simple/fj2ezv/master&style=plastic&logo=cypress)](https://cloud.cypress.io/projects/fj2ezv/runs) | <https://sys-map.int.bgdi.ch/> |
+| develop | ![Build Status](https://codebuild.eu-central-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiZVJxNnZVc2ZLdkw0cFA2bkI3VWpFQ2QxY3N0U3ZBa2tWZUh1SmZkQUY5QkNiQkhpL1VkS3YrZjVpa2E0eGNOVTgwM01LeUlYTjZiamdXRUdZd25nUXhZPSIsIml2UGFyYW1ldGVyU3BlYyI6ImhXQWxHWjBuRXU3RjVwczIiLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=develop) | [![web-mapviewer](https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/simple/fj2ezv/develop&style=plastic&logo=cypress)](https://cloud.cypress.io/projects/fj2ezv/runs) | <https://sys-map.dev.bgdi.ch/> |
+| master  | ![Build Status](https://codebuild.eu-central-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiZVJxNnZVc2ZLdkw0cFA2bkI3VWpFQ2QxY3N0U3ZBa2tWZUh1SmZkQUY5QkNiQkhpL1VkS3YrZjVpa2E0eGNOVTgwM01LeUlYTjZiamdXRUdZd25nUXhZPSIsIml2UGFyYW1ldGVyU3BlYyI6ImhXQWxHWjBuRXU3RjVwczIiLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=master) | [![web-mapviewer](https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/simple/fj2ezv/master&style=plastic&logo=cypress)](https://cloud.cypress.io/projects/fj2ezv/runs) | <https://sys-map.int.bgdi.ch/> |
 
 The next generation map viewer application of geo.admin.ch: Digital data can be viewed, printed out, ordered and supplied by means of web-mapviewer. The required data is available in the form of digital maps and imagery, vector data and also as online services.
 
 ## Table of Contents
 
 - [Table of Contents](#table-of-contents)
-- [Roadmap](#roadmap)
 - [Contributing](#contributing)
 - [Project structure](#project-structure)
   - [Best practices](#best-practices)
-  - [Architectural decisions](#architectural-decisions)
   - [Vue Composition API](#vue-composition-api)
   - [Store module](#store-module)
   - [Testing](#testing)
@@ -31,10 +29,6 @@ The next generation map viewer application of geo.admin.ch: Digital data can be
   - [Manual deploy](#manual-deploy)
 - [Check External Layer Provider list](#check-external-layer-provider-list)
 
-## Roadmap
-
-See [ROADMAP.md](ROADMAP.md)
-
 ## Contributing
 
 See [CONTRIBUTING.md](CONTRIBUTING.md)
@@ -53,9 +47,6 @@ Store plugins can be used to react to store changes. See the [store read-me](src
 Here's a sample of what project folder structure looks like :
 
 ```text
-├── adr
-│   └── all architectural decisions made over the course of this project
-│
 ├── tests
 │   └── all test files
 │
@@ -88,10 +79,6 @@ Here's a sample of what project folder structure looks like :
 
 See also [Store Best Practices](./src/store/README.md#best-practices)
 
-### Architectural decisions
-
-All project related architectural decision will be described in the folder [`/adr`](adr/) (ADR stands for "Architectural Decision Report"). For all more macro decisions (like the CI we use or other broad subjects), please refer to [the `/adr` folder on the project doc-guidelines](https://github.com/geoadmin/doc-guidelines/tree/master/adr).
-
 ### Vue Composition API
 
 New components should be written using the Vue Composition API.
@@ -176,7 +163,7 @@ See [README.md](./tests/README.md) for more documentation on testing in this pro
 The followings programs/tools are required in order to develop on `web-mapviewer`
 
 - Nodejs 18
-- npm 9
+- npm 10
 
 ### Install
 
@@ -253,7 +240,7 @@ The application is deployed on three targets : `dev|int|prod`
 
 ### Automatic deploy
 
-After every successful build, a version of `develop` and `master` are deployed
+After every successful build triggered by a merge into `develop`, a version is automatically deployed in DEV staging. After every successful build triggered by a a merge into `master`, a version is automatically deployed on INT and PROD staging.
 automatically.
 
 | environment | hostname             | path                   | branch         |
@@ -263,13 +250,13 @@ automatically.
 | int         | sys-map.int.bgdi.ch  | /                      | master         |
 | prod        | sys-map.prod.bgdi.ch | /                      | master         |
 
-On the `dev` and `int` targets, deployment is done **automatically** via the [CI for web-mapviewer](https://github.com/geoadmin/infra-terraform-bgdi-builder/tree/master/projects/web_mapviewer#ci-for-web-mapviewer).
+The deployments are done **automatically** via the [CI for web-mapviewer](https://github.com/geoadmin/infra-terraform-bgdi-builder/tree/master/codebuild_projects/web_mapviewer#ci-for-web-mapviewer).
 
-A [test link](https://github.com/geoadmin/web-mapviewer/blob/bug_update_doc_regarding_deploy/.github/workflows/add-testlink-to-pr.yml) is also added to the description of every PR.
+A test link is also added to the description of every PR automatically using [github workflow](https://github.com/geoadmin/web-mapviewer/blob/develop/.github/workflows/add-testlink-to-pr.yml).
 
 ### Manual deploy
 
-A bash script [deploy.sh](https://github.com/geoadmin/infra-terraform-bgdi-builder/blob/master/projects/web_mapviewer/scripts/deploy.sh)
+A bash script [deploy.sh](https://github.com/geoadmin/infra-terraform-bgdi-builder/blob/master/codebuild_projects/web_mapviewer/scripts/deploy.sh)
 is used for manual deploy, either from a local directory or a bucket from the CI.
 
 ```bash
@@ -285,7 +272,7 @@ OPTIONS:
   -v|--version VERSION    Version to deploy.
 ```
 
-On `prod`, check [deploy on prod](https://github.com/geoadmin/infra-terraform-bgdi-builder/tree/master/projects/web_mapviewer#deploy-on-prod) and use the script from within `infra-terraform-bgdi-builder/projects/web_mapviewer` to deploy **manually**.
+On `prod`, check [deploy on prod](https://github.com/geoadmin/infra-terraform-bgdi-builder/tree/master/codebuild_projects/web_mapviewer#deploy-on-prod) and use the script from within `infra-terraform-bgdi-builder/projects/web_mapviewer` to deploy **manually**.
 
 > **_NOTE:_**  
 > If deploying manually to `prod`, wait until the CI has finished building the project, as the deploy script only copy files.

index.html

@@ -11,7 +11,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
         <title>Maps of Switzerland - Swiss Confederation - map.geo.admin.ch</title>
     </head>
-    <body>
+    <body id="mainBody">
         <div id="app"></div>
         <script type="module" src="/src/main.js"></script>
     </body>

src/modules/infobox/components/FeatureElevationProfilePlot.vue

@@ -5,15 +5,17 @@
         @mouseenter="startPositionTracking"
         @mouseleave="stopPositionTracking"
     >
-        <LineChart
-            ref="chart"
-            :data="chartJsData"
-            :options="chartJsOptions"
-            class="profile-graph-container flex-grow-1"
-            data-cy="profile-graph"
-            @mouseleave="clearHoverPosition"
-            @contextmenu.prevent="resetZoom"
-        />
+        <div class="chart-container position-relative w-100">
+            <LineChart
+                ref="chart"
+                :data="chartJsData"
+                :options="chartJsOptions"
+                class="profile-graph-container"
+                data-cy="profile-graph"
+                @mouseleave="clearHoverPosition"
+                @contextmenu.prevent="resetZoom"
+            />
+        </div>
         <div
             v-show="pointBeingHovered && track"
             ref="profileTooltip"
@@ -345,6 +347,7 @@ export default {
             return {
                 animation: true,
                 responsive: true,
+                maintainAspectRatio: false,
                 plugins: {
                     zoom: this.chartJsZoomOptions,
                     legend: {

src/modules/map/components/cesium/CesiumGPXLayer.vue

@@ -0,0 +1,127 @@
+<script setup>
+import {
+    BillboardGraphics,
+    Cartesian3,
+    Color,
+    ColorMaterialProperty,
+    defined as cesiumDefined,
+    GpxDataSource,
+    HeightReference,
+} from 'cesium'
+import { onBeforeUnmount, onMounted, watch } from 'vue'
+import { inject } from 'vue'
+import { computed } from 'vue'
+
+import GPXLayer from '@/api/layers/GPXLayer.class'
+
+const props = defineProps({
+    gpxLayerConfig: {
+        type: GPXLayer,
+        required: true,
+    },
+})
+
+const gpxData = computed(() => props.gpxLayerConfig.gpxData)
+
+let gpxDataSource = null
+
+const getViewer = inject('getViewer')
+
+watch(gpxData, addLayer)
+
+onMounted(addLayer)
+onBeforeUnmount(removeLayer)
+
+function addLayer() {
+    removeLayer()
+    const gpxBlob = new Blob([gpxData.value], { type: 'application/gpx+xml' })
+    gpxDataSource = new GpxDataSource()
+    gpxDataSource
+        .load(gpxBlob, {
+            clampToGround: true,
+        })
+        .then((dataSource) => {
+            updateStyle()
+            getViewer().dataSources.add(dataSource)
+            getViewer().scene.requestRender()
+        })
+}
+
+function removeLayer() {
+    if (gpxDataSource) {
+        getViewer().dataSources.remove(gpxDataSource)
+        gpxDataSource = null
+        getViewer().scene.requestRender()
+    }
+}
+
+// Function to create a red circle image using a canvas
+function createRedCircleImage(radius, opacity = 1) {
+    // Create a new canvas element
+    const canvas = document.createElement('canvas')
+    const context = canvas.getContext('2d')
+
+    // Set the canvas sizes
+    canvas.width = radius * 2
+    canvas.height = radius * 2
+
+    // Draw a red circle on the canvas
+    context.beginPath()
+    context.arc(radius, radius, radius, 0, 2 * Math.PI, false)
+
+    const color = `rgba(255, 0, 0, ${opacity})`
+    context.fillStyle = color
+    context.fill()
+
+    // Return the data URL of the canvas drawing
+    return canvas.toDataURL()
+}
+
+function createRedCircleBillboard(radius, opacity = 1) {
+    const redCircleImage = createRedCircleImage(radius, opacity)
+    const billboardSize = radius * 2
+    return new BillboardGraphics({
+        image: redCircleImage,
+        width: billboardSize,
+        height: billboardSize,
+        eyeOffset: new Cartesian3(0, 0, -100), // Make sure the billboard is always seen
+        heightReference: HeightReference.CLAMP_TO_TERRAIN, // Make the billboard always appear on top of the terrain
+    })
+}
+
+function updateStyle() {
+    const radius = 8
+    const redCircleBillboard = createRedCircleBillboard(radius)
+    const redColorMaterial = new ColorMaterialProperty(Color.RED)
+
+    const entities = gpxDataSource.entities.values
+    entities.forEach((entity) => {
+        // Hide the billboard for billboard on the lines by checking if there is a description
+        // Imported GPX files from web-mapviewer have a description for the waypoints
+        // This might be not working for generic GPX files
+        if (cesiumDefined(entity.billboard)) {
+            if (!entity.description) {
+                entity.show = false
+            } else {
+                entity.show = true
+                entity.billboard = redCircleBillboard
+            }
+        }
+
+        if (cesiumDefined(entity.polyline)) {
+            entity.polyline.material = redColorMaterial
+            entity.polyline.width = 1.5
+        }
+
+        if (cesiumDefined(entity.polygon)) {
+            entity.polygon.material = redColorMaterial
+            entity.polygon.outline = true
+            entity.polygon.outlineColor = Color.BLACK
+        }
+    })
+    getViewer().scene.requestRender()
+}
+</script>
+<template>
+    <slot />
+</template>

src/modules/map/components/cesium/CesiumInternalLayer.vue

@@ -52,6 +52,7 @@
         :projection="projection"
     />
     <CesiumKMLLayer v-if="layerConfig.type === LayerTypes.KML" :kml-layer-config="layerConfig" />
+    <CesiumGPXLayer v-if="layerConfig.type === LayerTypes.GPX" :gpx-layer-config="layerConfig" />
     <slot />
 </template>
 
@@ -64,6 +65,7 @@ import CesiumVectorLayer from '@/modules/map/components/cesium/CesiumVectorLayer
 import CoordinateSystem from '@/utils/coordinates/CoordinateSystem.class'
 
 import CesiumGeoJSONLayer from './CesiumGeoJSONLayer.vue'
+import CesiumGPXLayer from './CesiumGPXLayer.vue'
 import CesiumKMLLayer from './CesiumKMLLayer.vue'
 import CesiumWMSLayer from './CesiumWMSLayer.vue'
 import CesiumWMTSLayer from './CesiumWMTSLayer.vue'
@@ -76,6 +78,7 @@ export default {
     name: 'CesiumInternalLayer',
     components: {
         CesiumVectorLayer,
+        CesiumGPXLayer,
         CesiumKMLLayer,
         CesiumGeoJSONLayer,
         CesiumWMTSLayer,

src/modules/map/components/cesium/CesiumMap.vue

@@ -109,6 +109,7 @@ import GeoAdminAggregateLayer from '@/api/layers/GeoAdminAggregateLayer.class.js
 import GeoAdminGeoJsonLayer from '@/api/layers/GeoAdminGeoJsonLayer.class'
 import GeoAdminWMSLayer from '@/api/layers/GeoAdminWMSLayer.class'
 import GeoAdminWMTSLayer from '@/api/layers/GeoAdminWMTSLayer.class'
+import GPXLayer from '@/api/layers/GPXLayer.class'
 import KMLLayer from '@/api/layers/KMLLayer.class'
 import LayerTypes from '@/api/layers/LayerTypes.enum'
 import {
@@ -220,7 +221,10 @@ export default {
         },
         visiblePrimitiveLayers() {
             return this.visibleLayers.filter(
-                (l) => l instanceof GeoAdminGeoJsonLayer || l instanceof KMLLayer
+                (l) =>
+                    l instanceof GeoAdminGeoJsonLayer ||
+                    l instanceof KMLLayer ||
+                    l instanceof GPXLayer
             )
         },
         showFeaturesPopover() {