use kitas layer for selection demo

src/samples/showcase/showcase-app/CustomLegendItems.tsx

@@ -0,0 +1,23 @@
+// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
+// SPDX-License-Identifier: Apache-2.0
+
+import { Box, Text } from "@open-pioneer/chakra-integration";
+import { LegendItemComponentProps } from "@open-pioneer/legend";
+
+const dotStyle = {
+    height: "25px",
+    width: "25px",
+    borderColor: "#4cb3ff",
+    borderWidth: "3px",
+    borderRadius: "50%",
+    display: "inline-block "
+};
+
+export function CustomLegendItem(props: LegendItemComponentProps) {
+    return (
+        <Box>
+            <Text>{props.layer.title}</Text>
+            <Box style={dotStyle}></Box>
+        </Box>
+    );
+}

src/samples/showcase/showcase-app/MapConfigProviderImpl.ts

@@ -6,6 +6,10 @@ import { OSM } from "ol/source";
 import { OgcFeaturesVectorSourceFactory } from "@open-pioneer/ogc-features";
 import VectorLayer from "ol/layer/Vector";
 import { ServiceOptions } from "@open-pioneer/runtime";
+import VectorSource from "ol/source/Vector";
+import GeoJSON from "ol/format/GeoJSON";
+import { LegendItemAttributes } from "@open-pioneer/legend";
+import { CustomLegendItem } from "ol-map/CustomLegendItems";
 
 interface References {
     vectorSourceFactory: OgcFeaturesVectorSourceFactory;
@@ -48,6 +52,7 @@ export class MapConfigProviderImpl implements MapConfigProvider {
                     }
                 }),
                 createAdminAreasLayer(),
+                createKitasLayer(),
                 createKrankenhausLayer(this.vectorSourceFactory)
             ]
         };
@@ -80,6 +85,33 @@ function createKrankenhausLayer(vectorSourceFactory: OgcFeaturesVectorSourceFact
     });
 }
 
+function createKitasLayer() {
+    const geojsonSource = new VectorSource({
+        url: "https://ogc-api.nrw.de/inspire-us-kindergarten/v1/collections/governmentalservice/items?f=json&limit=10000",
+        format: new GeoJSON(), //assign GeoJson parser
+        attributions:
+            '&copy; <a href="http://www.bkg.bund.de" target="_blank">Bundesamt f&uuml;r Kartographie und Geod&auml;sie</a> 2017, <a href="http://sg.geodatenzentrum.de/web_public/Datenquellen_TopPlus_Open.pdf" target="_blank">Datenquellen</a>'
+    });
+
+    const layer = new VectorLayer({
+        source: geojsonSource
+    });
+
+    const pointLayerLegendProps: LegendItemAttributes = {
+        Component: CustomLegendItem
+    };
+
+    return new SimpleLayer({
+        id: "ogc_kitas",
+        title: "Kindertagesstätten",
+        visible: true,
+        olLayer: layer,
+        attributes: {
+            "legend": pointLayerLegendProps
+        }
+    });
+}
+
 function createAdminAreasLayer() {
     return new WMSLayer({
         title: "Verwaltungsgebiete",

src/samples/showcase/showcase-app/demos/SelectionDemo.tsx

@@ -1,7 +1,7 @@
 // SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
 // SPDX-License-Identifier: Apache-2.0
 import { reactive } from "@conterra/reactivity-core";
-import { Layer, MapModel, SimpleLayer } from "@open-pioneer/map";
+import { BaseFeature, Layer, MapModel, SimpleLayer } from "@open-pioneer/map";
 import {
     FormatOptions,
     ResultColumn,
@@ -69,14 +69,14 @@ class DemoModelImpl implements DemoModel {
             />
         );
 
-        const layer = mapModel.layers.getLayerById("krankenhaus") as Layer;
+        const layer = mapModel.layers.getLayerById("ogc_kitas") as Layer;
         layer.setVisible(true);
     }
 
     destroy() {
         this.#selectionSource.destroy();
 
-        const layer = this.#mapModel.layers.getLayerById("krankenhaus") as Layer;
+        const layer = this.#mapModel.layers.getLayerById("ogc_kitas") as Layer;
         layer.setVisible(false);
     }
 
@@ -108,20 +108,41 @@ class DemoModelImpl implements DemoModel {
                 timeZone: "UTC"
             }
         };
-        // todo add better column information (https://ogc-api-test.nrw.de/inspire-us-krankenhaus/v1/collections/governmentalservice/items?f=json)
         const columns: ResultColumn[] = [
             {
-                propertyName: "thematicId",
+                id: "id",
                 displayName: "ID",
+                width: 100,
+                getPropertyValue(feature: BaseFeature) {
+                    return feature.id;
+                }
+            },
+            {
+                propertyName: "pointOfContact.address.postCode",
+                displayName: "PLZ",
                 width: 120
             },
             {
                 propertyName: "name",
                 displayName: "Name"
             },
             {
-                propertyName: "traeger",
-                displayName: "Träger"
+                propertyName: "inspireId",
+                displayName: "inspireID"
+            },
+            {
+                displayName: "Gefördert",
+                width: 160,
+                getPropertyValue(feature: BaseFeature) {
+                    switch (feature.properties?.gefoerdert) {
+                        case "ja":
+                            return true;
+                        case "nein":
+                            return false;
+                        default:
+                            return feature.properties?.gefoerdert;
+                    }
+                }
             }
         ];
         const input: ResultListInput = {
@@ -147,7 +168,7 @@ function initSelectionSource(
     mapModel: MapModel,
     vectorSelectionSourceFactory: VectorSelectionSourceFactory
 ) {
-    const opLayer = mapModel.layers.getLayerById("krankenhaus") as SimpleLayer;
+    const opLayer = mapModel.layers.getLayerById("ogc_kitas") as SimpleLayer;
 
     const layerSelectionSource = vectorSelectionSourceFactory.createSelectionSource({
         vectorLayer: opLayer.olLayer as VectorLayer<VectorSource>,

src/samples/showcase/showcase-app/demos/TocLegendDemo.tsx

@@ -21,6 +21,9 @@ export function createTocAndLegendDemo({ intl, mapModel }: SharedDemoOptions): D
 
                 const layer2 = mapModel.layers.getLayerById("krankenhaus") as Layer;
                 layer2.setVisible(visible);
+
+                const layer3 = mapModel.layers.getLayerById("ogc_kitas") as Layer;
+                layer3.setVisible(visible);
             }
             function resetDemoLayers(): void {
                 setDemoLayerVisible(false);

src/samples/showcase/showcase-app/i18n/en.yaml

@@ -4,7 +4,7 @@ messages:
   ariaLabels:
     map: "Map. Use the arrow keys to move the map. Zoom in with the plus button and zoom out with the minus button."
   demos:
-  # NOTE: 'description' supports arbitrary HTML!
+    # NOTE: 'description' supports arbitrary HTML!
     geolocation:
       title: Geolocation
       description: This demo shows how to use the <code>Geolocation</code> tool to get the current position of the device.

src/samples/showcase/showcase-app/model/AppInitModel.ts

@@ -93,7 +93,7 @@ export class AppInitModel implements Service {
             throw new Error("No mapModel found.");
         }
 
-        const demos = createDemos({intl, httpService, mapModel, vectorSelectionSourceFactory});
+        const demos = createDemos({ intl, httpService, mapModel, vectorSelectionSourceFactory });
         const state: AppStateReady = {
             kind: "ready",
             appModel: new AppModel(mapModel, notifier, intl, demos),

src/samples/showcase/showcase-app/styles.scss

@@ -10,6 +10,6 @@
 
 @media screen and (max-width: 48em) {
     .map-anchor.main-map-anchor {
-        max-height: 45%;    
-    }    
+        max-height: 45%;
+    }
 }