Merge pull request #307 from gtt-project/dkastl/issue304

Use notification box for reverse geocoding

config/locales/de.yml

@@ -74,6 +74,7 @@ de:
       clear_map: "Clear map"
       geolocation_activated: Geolokalisierung aktiviert
       geolocation_deactivated: Geolokalisierung deaktiviert
+      copied_location_to_clipboard: Standort in die Zwischenablage kopiert
     modal:
       load: Laden
       cancel: Abbrechen

config/locales/en.yml

@@ -122,6 +122,7 @@ en:
       linestring: "Line editor"
       polygon: "Area editor"
       clear_map: "Clear map"
+      copied_location_to_clipboard: "Copied location to clipboard"
     modal:
       load: "Load"
       cancel: "Cancel"

config/locales/ja.yml

@@ -118,6 +118,7 @@ ja:
       linestring: ライン編集
       polygon: エリア編集
       clear_map: "地図をクリア"
+      copied_location_to_clipboard: 位置情報をクリップボードにコピーしました
     modal:
       load: 読み込み
       cancel: キャンセル

src/components/gtt-client/geocoding/SearchFactory.ts

@@ -1,11 +1,49 @@
 // src/components/gtt-client/geocoding/SearchFactory.ts
+import { Feature } from 'ol';
 import { applyCustomButton } from './CustomButtonMixin';
 import SearchGTT from './SearchGTT';
 import SearchGoogle from './SearchGoogle';
 import SearchNominatim from 'ol-ext/control/SearchNominatim';
 import SearchPhoton from 'ol-ext/control/SearchPhoton';
 
-export function createSearchControl(options: any): any {
+/**
+ * Function signature for the handleSelect function.
+ * @param feature - The selected feature.
+ * @param reverse - Whether the feature was selected in reverse mode.
+ * @param options - Additional options.
+ * @returns void
+ */
+type HandleSelectFunction = (
+  feature: Feature,
+  reverse: boolean,
+  options?: any
+) => void;
+
+/**
+ * Custom callback for the handleSelect function.
+ * @param searchControl
+ * @param handleSelectCallback
+ * @returns void
+ */
+function extendHandleSelect(searchControl: any, handleSelectCallback: (response: object) => void): void {
+  const originalHandleSelect: HandleSelectFunction = searchControl._handleSelect.bind(searchControl);
+  searchControl._handleSelect = (feature: Feature, reverse: boolean, options?: any): void => {
+    originalHandleSelect(feature, reverse, options);
+    handleSelectCallback({
+      'title': searchControl.getTitle(feature),
+      'reverse': reverse ? true : false,
+      // Add any other additional keys here
+    });
+  };
+}
+
+/**
+ * Creates a search control instance based on the provider.
+ * @param options
+ * @param handleSelectCallback - Custom callback function to handle the selected feature.
+ * @returns
+ */
+export function createSearchControl(options: any, handleSelectCallback: (feature: Feature) => void): any {
   let searchControl: any;
 
   // Create search control instance based on the provider
@@ -54,5 +92,8 @@ export function createSearchControl(options: any): any {
   // Apply custom button implementation
   applyCustomButton(searchControl, options);
 
+  // Extend the handleSelect function with the custom callback
+  extendHandleSelect(searchControl, handleSelectCallback);
+
   return searchControl;
 }

src/components/gtt-client/init/controls.ts

@@ -36,7 +36,25 @@ function setSearchControl(instance: any): void {
 
   // Add the search control if enabled in plugin settings
   if (JSON.parse(geocoder.enabled)) {
-    const searchControl = createSearchControl({
+    // Custom callback function to handle the selected feature
+    const handleSelectCallback = (response: any) => {
+      if (response.reverse) {
+        // Add copy to clipboard functionality, if available
+        if (navigator.clipboard) {
+          // strip htmls from response title
+          const text = response.title.replace(/<[^>]*>?/gm, '');
+          navigator.clipboard.writeText(text);
+          instance.map.notification.show(instance.i18n.control.copied_location_to_clipboard);
+        }
+        else {
+          instance.map.notification.show(response.title, 10000);
+          console.warn('Clipboard API not supported');
+        }
+      }
+    };
+
+    // Options for creating the search control
+    const options = {
       html: '<i class="mdi mdi-map-search-outline"></i>',
       html_reverse: '<i class="mdi mdi-map-marker-question-outline"></i>',
       title: instance.i18n.control.search_location,
@@ -46,7 +64,10 @@ function setSearchControl(instance: any): void {
         placeholder: instance.i18n.control.search_placeholder,
         ...geocoder.options
       },
-    });
+    };
+
+    // Create the search control with the custom callback
+    const searchControl = createSearchControl(options, handleSelectCallback);
     instance.map.addControl(searchControl);
 
     // Add a listener for the select event