added additional demos

open-pioneer · Jun 11, 2024 · 2413e96 · 2413e96
1 parent eec5a31
commit 2413e96
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 4 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/samples/showcase/showcase-app/i18n/de.yaml b/src/samples/showcase/showcase-app/i18n/de.yaml
@@ -18,6 +18,18 @@ messages:
     searchAndHighlight:
       title: Suche und Feature-Highlight
       description: Diese Demo zeigt, wie die <code>Search</code>-Komponente verwendet werden kann und wie mittels Highlighting Features in der Karte hervorgehoben werden können.
+    coordinateViewer:
+      title: Koordinaten-Anzeige
+      description: Diese Demo zeigt, wie die <code>CoordinateViewer</code>-Komponente verwendet werden kann, um sich Koordinaten an der Position des Mauszeigers anzeigen zu lassen.
+    scaleViewer:
+      title: Maßstabs-Anzeige
+      description: Diese Demo zeigt, wie die <code>ScaleViewer</code>-Komponente verwendet werden kann, um den aktuellen Maßstab anzuzeigen.
+    scaleBar:
+      title: Maßstabsleiste
+      description: Diese Demo zeigt, wie die <code>ScaleBar</code>-Komponente verwendet werden kann, um eine Maßstabsleiste anzuzeigen.
+    measurement:
+      title: Messen
+      description: Diese Demo zeigt, wie die <code>Measurement</code>-Komponente verwendet werden kann, um Strecken- und Flächenmessungen in der karte zu durchzuführen.
   demoSelection:
     notFound: "Demo ''{demoId}'' wurde nicht gefunden."
   localeSwitcher:

diff --git a/src/samples/showcase/showcase-app/i18n/en.yaml b/src/samples/showcase/showcase-app/i18n/en.yaml
@@ -18,6 +18,18 @@ messages:
     searchAndHighlight:
       title: Search and Feature-Highlight
       description: This demo shows how to use the <code>Search</code> component and how features can be highlighted in the map.
+    coordinateViewer:
+      title: Coordinate viewer
+      description: This demo shows how to use the <code>CoordinateViewer</code> component to show the coordinates at the users current mouse position.
+    scaleViewer:
+      title: Scale viewer
+      description: This demo shows how to use the <code>ScaleViewer</code> component.
+    scaleBar:
+      title: Scale bar
+      description: This demo shows how to use the <code>ScaleBar</code> component.
+    measurement:
+      title: Measurement
+      description: This demo shows how to use the <code>Measurement</code> component for measuring distances and areas.
   demoSelection:
     notFound: "Demo ''{demoId}'' was not found."
   localeSwitcher:

diff --git a/src/samples/showcase/showcase-app/model/Demo.tsx b/src/samples/showcase/showcase-app/model/Demo.tsx
@@ -15,6 +15,10 @@ import { PhotonGeocoder } from "../sources/PhotonGeocoderSearchSource";
 import { HttpService } from "@open-pioneer/http";
 import { Highlight, MapModel } from "@open-pioneer/map";
 import { Geometry } from "ol/geom";
+import { CoordinateViewer } from "@open-pioneer/coordinate-viewer";
+import { ScaleViewer } from "@open-pioneer/scale-viewer";
+import { ScaleBar } from "@open-pioneer/scale-bar";
+import { Measurement } from "@open-pioneer/measurement";
 
 export interface Demo {
     /** Unique id */
@@ -46,10 +50,30 @@ export function createDemos(
 ): Demo[] {
     return [
         // todo TOC + Basemapswitcher + Legend
-        // todo Coordinate-Viewer
-        // todo Scale-Viewer
-        // todo Scale-Bar
-        // todo Measurement
+        {
+            id: "coordinateViewer",
+            title: intl.formatMessage({ id: "demos.coordinateViewer.title" }),
+            description: intl.formatMessage({ id: "demos.coordinateViewer.description" }),
+            mainWidget: <CoordinateViewer mapId={MAP_ID} />
+        },
+        {
+            id: "scaleViewer",
+            title: intl.formatMessage({ id: "demos.scaleViewer.title" }),
+            description: intl.formatMessage({ id: "demos.scaleViewer.description" }),
+            mainWidget: <ScaleViewer mapId={MAP_ID} />
+        },
+        {
+            id: "scaleBar",
+            title: intl.formatMessage({ id: "demos.scaleBar.title" }),
+            description: intl.formatMessage({ id: "demos.scaleBar.description" }),
+            tools: <ScaleBar mapId={MAP_ID} />
+        },
+        {
+            id: "measurement",
+            title: intl.formatMessage({ id: "demos.measurement.title" }),
+            description: intl.formatMessage({ id: "demos.measurement.description" }),
+            mainWidget: <Measurement mapId={MAP_ID} />
+        },
         // todo Editing
         {
             id: "mapNavigation",

diff --git a/src/samples/showcase/showcase-app/package.json b/src/samples/showcase/showcase-app/package.json
@@ -12,7 +12,11 @@
         "@open-pioneer/map-navigation": "workspace:^",
         "@open-pioneer/geolocation": "workspace:^",
         "@open-pioneer/spatial-bookmarks": "workspace:^",
+        "@open-pioneer/coordinate-viewer": "workspace:^",
+        "@open-pioneer/scale-viewer": "workspace:^",
+        "@open-pioneer/scale-bar": "workspace:^",
         "@open-pioneer/search": "workspace:^",
+        "@open-pioneer/measurement": "workspace:^",
         "@open-pioneer/overview-map": "workspace:^",
         "@open-pioneer/printing": "workspace:^",
         "@conterra/reactivity-core": "^0.4.0",