@open-pioneer/coordinate-search 0.8.0

package/CHANGELOG.md

@@ -0,0 +1,30 @@
+# @open-pioneer/coordinate-search
+
+## 0.8.0
+
+### Minor Changes
+
+-   c8df895: Added new component CoordinateSearch with functionality to search for coordinates via input. Additionally added component CoordinateInput that allows the user to input coordinates manually and validates the input.
+
+    ```tsx
+    <CoordinateSearch mapId="map_id" />
+    ```
+
+    ```tsx
+    <CoordinateInput mapId="map_id" />
+    ```
+
+### Patch Changes
+
+-   49f0207: Update trails core packages to version 2.4.0
+-   Updated dependencies [b717121]
+-   Updated dependencies [e7978a8]
+-   Updated dependencies [7a5f1e1]
+-   Updated dependencies [7ae9f90]
+-   Updated dependencies [d8337a6]
+-   Updated dependencies [49f0207]
+-   Updated dependencies [b2127df]
+-   Updated dependencies [2fa8020]
+-   Updated dependencies [7ae9f90]
+-   Updated dependencies [d8337a6]
+    -   @open-pioneer/map@0.8.0

package/CoordinateInput.d.ts

@@ -0,0 +1,86 @@
+import { MapModelProps } from "@open-pioneer/map";
+import { CommonComponentProps } from "@open-pioneer/react-utils";
+import { Coordinate } from "ol/coordinate";
+import { Projection, ProjectionLike } from "ol/proj";
+import { FC } from "react";
+/**
+ * Dropdown item of projection selection with an optional coordinate precision
+ */
+export interface ProjectionInput {
+    /**
+     * Label to show the user.
+     */
+    label: string;
+    /**
+     * The map projection as projection or as string.
+     */
+    value: ProjectionLike;
+    /**
+     * The number of displayed decimal places.
+     */
+    precision?: number;
+}
+/**
+ * Internal view of a (normalized) projection.
+ * The projection has been looked up and optional values have been filled in.
+ */
+export interface ProjectionItem {
+    /**
+     * Label to show the user.
+     */
+    label: string;
+    /**
+     * The map projection.
+     */
+    value: Projection;
+    /**
+     * The number of displayed decimal places.
+     */
+    precision: number;
+}
+/**
+ * Event type emitted when the user enters new coordinates or projection is changed by the user.
+ */
+export interface CoordinatesSelectEvent {
+    /** coordinates in the projection of the object */
+    coords: Coordinate;
+    /** the projection of the coordinates. */
+    projection: Projection;
+}
+/**
+ * Props for the {@link CoordinateInput} component.
+ */
+export interface CoordinateInputProps extends CommonComponentProps, MapModelProps {
+    /**
+     * List of projection options, only projections that are known by the map as projection are shown.
+     * Each projection can have an individual precision of coordinates.
+     *
+     * If no precision is given, the default precision is used.
+     */
+    projections?: ProjectionInput[];
+    /**
+     * Optional event that gets called if (valid) coordinates are entered or projection is changed by the user.
+     */
+    onSelect?: (event: CoordinatesSelectEvent) => void;
+    /**
+     * Optional event that gets called if the input is cleared.
+     */
+    onClear?: () => void;
+    /**
+     * Insert input value and overwrite user input.
+     */
+    input?: Coordinate;
+    /**
+     * Placeholder text to display when no input is present. Common usages:
+     * * hint for the user ("enter coordinate here")
+     * * example coordinate ("12.345 67.890")
+     * * current mouse position
+     *
+     * If a coordinate is given, it has to be in the current projection of the map.
+     */
+    placeholder?: string | Coordinate;
+}
+/**
+ * The `CoordinateInput` component can be used in an app to provide a validated input field for coordinates in a selected projection
+ */
+export declare const CoordinateInput: FC<CoordinateInputProps>;

package/CoordinateInput.js

@@ -0,0 +1,218 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { reactive, computed } from '@conterra/reactivity-core';
+import { Box, Portal, Flex, Tooltip, InputGroup, InputRightAddon } from '@open-pioneer/chakra-integration';
+import { useMapModel } from '@open-pioneer/map';
+import { useCommonComponentProps, useEvent } from '@open-pioneer/react-utils';
+import { useReactiveSnapshot } from '@open-pioneer/reactivity';
+import { get, transform } from 'ol/proj.js';
+import { useIntl, useService } from './_virtual/_virtual-pioneer-module_react-hooks.js';
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { CoordinateInputField } from './CoordinateInputField.js';
+import { parseCoordinates, formatCoordinates } from './coordinates.js';
+import { ProjectionSelect } from './ProjectionSelect.js';
+import { usePlaceholder } from './usePlaceholder.js';
+
+const DEFAULT_PRECISION = 3;
+const DEFAULT_PROJECTIONS = [
+  {
+    label: "WGS 84",
+    value: get("EPSG:4326"),
+    precision: 3
+  },
+  {
+    label: "Web Mercator",
+    value: get("EPSG:3857"),
+    precision: 2
+  }
+];
+const CoordinateInput = (props) => {
+  const {
+    onSelect: onSelectProp,
+    onClear,
+    projections = DEFAULT_PROJECTIONS,
+    input,
+    placeholder = ""
+  } = props;
+  const { containerProps } = useCommonComponentProps("coordinate-input", props);
+  const { map } = useMapModel(props);
+  const intl = useIntl();
+  const mapProjection = useReactiveSnapshot(() => map?.projection, [map]);
+  const availableProjections = useProjectionItems(projections);
+  const [selectedProjection, setSelectedProjection] = useState(
+    // choose first option initially
+    availableProjections[0]
+  );
+  const onSelect = useEvent((coordinatesResult) => {
+    if (!onSelectProp || coordinatesResult.kind !== "success" || mapProjection == null) {
+      return;
+    }
+    const coords = transform(
+      coordinatesResult.coordinates,
+      coordinatesResult.projection,
+      mapProjection
+    );
+    onSelectProp({ coords, projection: mapProjection });
+  });
+  const [coordinateSearchInput, setCoordinateSearchInput, validationResult] = useCoordinateState(
+    input,
+    mapProjection,
+    selectedProjection,
+    onSelect
+  );
+  const placeholderString = usePlaceholder(placeholder, mapProjection, selectedProjection);
+  const isInputValid = validationResult.kind === "success" || validationResult.kind === "empty";
+  const onEnter = useEvent(() => {
+    onSelect(validationResult);
+  });
+  const portalElement = useRef(null);
+  return /* @__PURE__ */ jsxs(Box, { ...containerProps, children: [
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", { ref: portalElement }) }),
+    /* @__PURE__ */ jsx(Flex, { flexDirection: "row", flexDir: "row", children: /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        label: !isInputValid ? intl.formatMessage({ id: validationResult.kind }) : void 0,
+        hasArrow: true,
+        placement: "auto",
+        isOpen: !isInputValid,
+        className: "coordinate-input-tooltip",
+        children: /* @__PURE__ */ jsxs(InputGroup, { className: "coordinate-input-group", children: [
+          /* @__PURE__ */ jsx(
+            CoordinateInputField,
+            {
+              coordinateSearchInput,
+              setCoordinateSearchInput,
+              placeholder,
+              placeholderString,
+              onClear,
+              isInputValid,
+              onEnter
+            }
+          ),
+          /* @__PURE__ */ jsx(InputRightAddon, { padding: "0px", borderLeft: "0px", children: /* @__PURE__ */ jsx(
+            ProjectionSelect,
+            {
+              portalElement,
+              currentProjection: selectedProjection,
+              projections: availableProjections,
+              onProjectionChange: setSelectedProjection
+            }
+          ) })
+        ] })
+      }
+    ) })
+  ] });
+};
+function useCoordinateState(inputProp, mapProjection, selectedProjection, onSelect) {
+  const intl = useIntl();
+  const numberParser = useService("runtime.NumberParserService");
+  const [model] = useState(() => new StateModel(intl, selectedProjection, numberParser));
+  useEffect(() => {
+    const triggerSelect = inputProp !== model.inputProp || selectedProjection !== model.selectedProjection;
+    model.setI18n(intl, numberParser);
+    model.setInputProp(inputProp);
+    model.setSelectedProjection(selectedProjection);
+    model.setMapProjection(mapProjection);
+    if (triggerSelect) {
+      const validationResult2 = model.validationResult;
+      onSelect(validationResult2);
+    }
+  }, [model, intl, numberParser, inputProp, selectedProjection, mapProjection, onSelect]);
+  const { rawInput, validationResult } = useReactiveSnapshot(() => {
+    return {
+      rawInput: model.rawInput,
+      validationResult: model.validationResult
+    };
+  }, [model]);
+  const setInputText = useCallback(
+    (inputText) => {
+      model.setText(inputText);
+    },
+    [model]
+  );
+  return [rawInput, setInputText, validationResult];
+}
+class StateModel {
+  #intl;
+  #selectedProjection;
+  #mapProjection = reactive();
+  #inputProp = reactive();
+  #numberParser;
+  #rawInput = reactive("");
+  #validationResult = computed(() => {
+    return parseCoordinates(
+      this.#rawInput.value,
+      this.#numberParser.value,
+      this.#selectedProjection.value.value
+    );
+  });
+  constructor(intl, selectedProjection, numberParser) {
+    this.#intl = reactive(intl);
+    this.#selectedProjection = reactive(selectedProjection);
+    this.#numberParser = reactive(numberParser);
+  }
+  get inputProp() {
+    return this.#inputProp.value;
+  }
+  get rawInput() {
+    return this.#rawInput.value;
+  }
+  get validationResult() {
+    return this.#validationResult.value;
+  }
+  get selectedProjection() {
+    return this.#selectedProjection.value;
+  }
+  setI18n(intl, numberParser) {
+    this.#intl.value = intl;
+    this.#numberParser.value = numberParser;
+  }
+  setText(text) {
+    this.#rawInput.value = text;
+  }
+  setSelectedProjection(value) {
+    if (value !== this.#selectedProjection.value) {
+      this.#selectedProjection.value = value;
+      this.#updateInput();
+    }
+  }
+  setInputProp(value) {
+    if (value !== this.#inputProp.value) {
+      this.#inputProp.value = value;
+      this.#updateInput();
+    }
+  }
+  setMapProjection(value) {
+    if (value !== this.#mapProjection.value) {
+      this.#mapProjection.value = value;
+      this.#updateInput();
+    }
+  }
+  #updateInput() {
+    const inputProp = this.#inputProp.value;
+    const mapProjection = this.#mapProjection.value;
+    const selectedProjection = this.#selectedProjection.value;
+    const intl = this.#intl.value;
+    if (mapProjection && inputProp) {
+      const transformed = transform(inputProp, mapProjection, selectedProjection.value);
+      const formatted = formatCoordinates(transformed, selectedProjection.precision, intl);
+      this.#rawInput.value = formatted;
+    }
+  }
+}
+function useProjectionItems(projections) {
+  return useMemo(() => {
+    const availableProjections = projections.flatMap((ele) => {
+      if (get(ele.value) != null)
+        return {
+          label: ele.label,
+          value: get(ele.value),
+          precision: ele.precision ?? DEFAULT_PRECISION
+        };
+      return [];
+    });
+    return availableProjections;
+  }, [projections]);
+}
+
+export { CoordinateInput };
+//# sourceMappingURL=CoordinateInput.js.map

package/CoordinateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoordinateInput.js","sources":["CoordinateInput.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { computed, Reactive, reactive } from \"@conterra/reactivity-core\";\nimport {\n    Box,\n    Flex,\n    InputGroup,\n    InputRightAddon,\n    Portal,\n    Tooltip\n} from \"@open-pioneer/chakra-integration\";\nimport { MapModelProps, useMapModel } from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps, useEvent } from \"@open-pioneer/react-utils\";\nimport { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport { NumberParserService, PackageIntl } from \"@open-pioneer/runtime\";\nimport { Coordinate } from \"ol/coordinate\";\nimport { get as getProjection, Projection, ProjectionLike, transform } from \"ol/proj\";\nimport { useIntl, useService } from \"open-pioneer:react-hooks\";\nimport { FC, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CoordinateInputField } from \"./CoordinateInputField\";\nimport { formatCoordinates, parseCoordinates, ParseResult } from \"./coordinates\";\nimport { ProjectionSelect } from \"./ProjectionSelect\";\nimport { usePlaceholder } from \"./usePlaceholder\";\n\nconst DEFAULT_PRECISION = 3;\nconst DEFAULT_PROJECTIONS = [\n    {\n        label: \"WGS 84\",\n        value: getProjection(\"EPSG:4326\")!,\n        precision: 3\n    },\n    {\n        label: \"Web Mercator\",\n        value: getProjection(\"EPSG:3857\")!,\n        precision: 2\n    }\n];\n\n/**\n * Dropdown item of projection selection with an optional coordinate precision\n */\nexport interface ProjectionInput {\n    /**\n     * Label to show the user.\n     */\n    label: string;\n\n    /**\n     * The map projection as projection or as string.\n     */\n    value: ProjectionLike;\n\n    /**\n     * The number of displayed decimal places.\n     */\n    precision?: number;\n}\n\n/**\n * Internal view of a (normalized) projection.\n * The projection has been looked up and optional values have been filled in.\n */\nexport interface ProjectionItem {\n    /**\n     * Label to show the user.\n     */\n    label: string;\n\n    /**\n     * The map projection.\n     */\n    value: Projection;\n\n    /**\n     * The number of displayed decimal places.\n     */\n    precision: number;\n}\n\n/**\n * Event type emitted when the user enters new coordinates or projection is changed by the user.\n */\nexport interface CoordinatesSelectEvent {\n    /** coordinates in the projection of the object */\n    coords: Coordinate;\n\n    /** the projection of the coordinates. */\n    projection: Projection;\n}\n\n/**\n * Props for the {@link CoordinateInput} component.\n */\nexport interface CoordinateInputProps extends CommonComponentProps, MapModelProps {\n    /**\n     * List of projection options, only projections that are known by the map as projection are shown.\n     * Each projection can have an individual precision of coordinates.\n     *\n     * If no precision is given, the default precision is used.\n     */\n    projections?: ProjectionInput[];\n\n    /**\n     * Optional event that gets called if (valid) coordinates are entered or projection is changed by the user.\n     */\n    onSelect?: (event: CoordinatesSelectEvent) => void;\n\n    /**\n     * Optional event that gets called if the input is cleared.\n     */\n    onClear?: () => void;\n\n    /**\n     * Insert input value and overwrite user input.\n     */\n    input?: Coordinate;\n\n    /**\n     * Placeholder text to display when no input is present. Common usages:\n     * * hint for the user (\"enter coordinate here\")\n     * * example coordinate (\"12.345 67.890\")\n     * * current mouse position\n     *\n     * If a coordinate is given, it has to be in the current projection of the map.\n     */\n    placeholder?: string | Coordinate;\n}\n\n/**\n * The `CoordinateInput` component can be used in an app to provide a validated input field for coordinates in a selected projection\n */\nexport const CoordinateInput: FC<CoordinateInputProps> = (props) => {\n    const {\n        onSelect: onSelectProp,\n        onClear,\n        projections = DEFAULT_PROJECTIONS,\n        input,\n        placeholder = \"\"\n    } = props;\n    const { containerProps } = useCommonComponentProps(\"coordinate-input\", props);\n    const { map } = useMapModel(props);\n    const intl = useIntl();\n    const mapProjection = useReactiveSnapshot(() => map?.projection, [map]);\n\n    // Projection items (dropdown)\n    const availableProjections = useProjectionItems(projections);\n    const [selectedProjection, setSelectedProjection] = useState<ProjectionItem>(\n        // choose first option initially\n        availableProjections[0]!\n    );\n\n    // Input state\n    const onSelect = useEvent((coordinatesResult: ParseResult) => {\n        if (!onSelectProp || coordinatesResult.kind !== \"success\" || mapProjection == null) {\n            return;\n        }\n\n        const coords = transform(\n            coordinatesResult.coordinates,\n            coordinatesResult.projection,\n            mapProjection\n        );\n        onSelectProp({ coords: coords, projection: mapProjection });\n    });\n    const [coordinateSearchInput, setCoordinateSearchInput, validationResult] = useCoordinateState(\n        input,\n        mapProjection,\n        selectedProjection,\n        onSelect\n    );\n    const placeholderString = usePlaceholder(placeholder, mapProjection, selectedProjection);\n    const isInputValid = validationResult.kind === \"success\" || validationResult.kind === \"empty\";\n    const onEnter = useEvent(() => {\n        onSelect(validationResult);\n    });\n\n    const portalElement = useRef<HTMLDivElement>(null);\n    return (\n        <Box {...containerProps}>\n            <Portal>\n                <div ref={portalElement} />\n            </Portal>\n            <Flex flexDirection={\"row\"} flexDir={\"row\"}>\n                <Tooltip\n                    label={\n                        !isInputValid\n                            ? intl.formatMessage({ id: validationResult.kind })\n                            : undefined\n                    }\n                    hasArrow\n                    placement=\"auto\"\n                    isOpen={!isInputValid}\n                    className=\"coordinate-input-tooltip\"\n                >\n                    <InputGroup className=\"coordinate-input-group\">\n                        <CoordinateInputField\n                            coordinateSearchInput={coordinateSearchInput}\n                            setCoordinateSearchInput={setCoordinateSearchInput}\n                            placeholder={placeholder}\n                            placeholderString={placeholderString}\n                            onClear={onClear}\n                            isInputValid={isInputValid}\n                            onEnter={onEnter}\n                        />\n                        <InputRightAddon padding={\"0px\"} borderLeft={\"0px\"}>\n                            <ProjectionSelect\n                                portalElement={portalElement}\n                                currentProjection={selectedProjection}\n                                projections={availableProjections}\n                                onProjectionChange={setSelectedProjection}\n                            />\n                        </InputRightAddon>\n                    </InputGroup>\n                </Tooltip>\n            </Flex>\n        </Box>\n    );\n};\n\n/**\n * Returns the current text input and a callback to change it (used for interactive user input).\n * The current text may also change if the input prop changes (controlled usage).\n */\nfunction useCoordinateState(\n    inputProp: Coordinate | undefined,\n    mapProjection: Projection | undefined,\n    selectedProjection: ProjectionItem,\n    onSelect: (validationResult: ParseResult) => void\n): [string, (value: string) => void, ParseResult] {\n    const intl = useIntl();\n    const numberParser = useService<NumberParserService>(\"runtime.NumberParserService\");\n\n    const [model] = useState(() => new StateModel(intl, selectedProjection, numberParser));\n    useEffect(() => {\n        const triggerSelect =\n            inputProp !== model.inputProp || selectedProjection !== model.selectedProjection;\n\n        model.setI18n(intl, numberParser);\n        model.setInputProp(inputProp);\n        model.setSelectedProjection(selectedProjection);\n        model.setMapProjection(mapProjection);\n\n        if (triggerSelect) {\n            const validationResult = model.validationResult;\n            onSelect(validationResult);\n        }\n    }, [model, intl, numberParser, inputProp, selectedProjection, mapProjection, onSelect]);\n\n    const { rawInput, validationResult } = useReactiveSnapshot(() => {\n        return {\n            rawInput: model.rawInput,\n            validationResult: model.validationResult\n        };\n    }, [model]);\n    const setInputText = useCallback(\n        (inputText: string) => {\n            model.setText(inputText);\n        },\n        [model]\n    );\n    return [rawInput, setInputText, validationResult];\n}\n\nclass StateModel {\n    #intl: Reactive<PackageIntl>;\n    #selectedProjection: Reactive<ProjectionItem>;\n    #mapProjection = reactive<Projection | undefined>();\n    #inputProp = reactive<Coordinate | undefined>();\n    #numberParser: Reactive<NumberParserService>;\n\n    #rawInput = reactive(\"\");\n    #validationResult = computed(() => {\n        return parseCoordinates(\n            this.#rawInput.value,\n            this.#numberParser.value,\n            this.#selectedProjection.value.value\n        );\n    });\n\n    constructor(\n        intl: PackageIntl,\n        selectedProjection: ProjectionItem,\n        numberParser: NumberParserService\n    ) {\n        this.#intl = reactive(intl);\n        this.#selectedProjection = reactive(selectedProjection);\n        this.#numberParser = reactive(numberParser);\n    }\n\n    get inputProp() {\n        return this.#inputProp.value;\n    }\n\n    get rawInput() {\n        return this.#rawInput.value;\n    }\n\n    get validationResult() {\n        return this.#validationResult.value;\n    }\n\n    get selectedProjection() {\n        return this.#selectedProjection.value;\n    }\n\n    setI18n(intl: PackageIntl, numberParser: NumberParserService) {\n        this.#intl.value = intl;\n        this.#numberParser.value = numberParser;\n    }\n\n    setText(text: string) {\n        this.#rawInput.value = text;\n    }\n\n    setSelectedProjection(value: ProjectionItem) {\n        if (value !== this.#selectedProjection.value) {\n            this.#selectedProjection.value = value;\n            this.#updateInput();\n        }\n    }\n\n    setInputProp(value: Coordinate | undefined) {\n        if (value !== this.#inputProp.value) {\n            this.#inputProp.value = value;\n            this.#updateInput();\n        }\n    }\n\n    setMapProjection(value: Projection | undefined) {\n        if (value !== this.#mapProjection.value) {\n            this.#mapProjection.value = value;\n            this.#updateInput();\n        }\n    }\n\n    #updateInput() {\n        const inputProp = this.#inputProp.value;\n        const mapProjection = this.#mapProjection.value;\n        const selectedProjection = this.#selectedProjection.value;\n        const intl = this.#intl.value;\n        if (mapProjection && inputProp) {\n            // Update state based on input prop.\n            const transformed = transform(inputProp, mapProjection, selectedProjection.value);\n            const formatted = formatCoordinates(transformed, selectedProjection.precision, intl);\n            this.#rawInput.value = formatted;\n        }\n    }\n}\n\n/**\n * Builds the list of available projection items based on the provided list of projections\n */\nfunction useProjectionItems(projections: ProjectionInput[]) {\n    return useMemo(() => {\n        // filter out projections that are not known\n        const availableProjections: ProjectionItem[] = projections.flatMap((ele) => {\n            if (getProjection(ele.value) != null)\n                return {\n                    label: ele.label,\n                    value: getProjection(ele.value)!,\n                    precision: ele.precision ?? DEFAULT_PRECISION\n                };\n            return [];\n        });\n        return availableProjections;\n    }, [projections]);\n}\n"],"names":["getProjection","validationResult"],"mappings":"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"}

package/CoordinateInputField.d.ts

@@ -0,0 +1,10 @@
+import { Coordinate } from "ol/coordinate";
+export declare function CoordinateInputField(props: {
+    isInputValid: boolean;
+    coordinateSearchInput: string;
+    setCoordinateSearchInput: (searchInput: string) => void;
+    placeholder: string | Coordinate;
+    placeholderString: string;
+    onClear: (() => void) | undefined;
+    onEnter: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/CoordinateInputField.js

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { CloseIcon, CopyIcon } from '@chakra-ui/icons';
+import { Input, InputGroup, InputRightElement, Tooltip, IconButton } from '@open-pioneer/chakra-integration';
+import { useIntl } from './_virtual/_virtual-pioneer-module_react-hooks.js';
+
+function CoordinateInputField(props) {
+  const {
+    isInputValid,
+    coordinateSearchInput,
+    setCoordinateSearchInput,
+    placeholder,
+    placeholderString,
+    onClear,
+    onEnter
+  } = props;
+  const intl = useIntl();
+  const leftInput = /* @__PURE__ */ jsx(
+    Input,
+    {
+      type: "text",
+      value: coordinateSearchInput,
+      onChange: (e) => {
+        setCoordinateSearchInput(e.target.value);
+      },
+      isInvalid: !isInputValid,
+      backgroundColor: !isInputValid ? "red.100" : "undefined",
+      placeholder: placeholderString,
+      errorBorderColor: "red.500",
+      "aria-label": intl.formatMessage({
+        id: "coordinateInput.ariaLabel"
+      }),
+      borderRightRadius: 0,
+      onKeyDown: (e) => {
+        if (e.key == "Enter") {
+          onEnter();
+        }
+      }
+    }
+  );
+  let rightButton = null;
+  if (coordinateSearchInput !== "") {
+    rightButton = /* @__PURE__ */ jsx(
+      RightButton,
+      {
+        className: "coordinate-input-clear-button",
+        label: intl.formatMessage({
+          id: "coordinateInput.clearPlaceholder"
+        }),
+        onClick: () => {
+          setCoordinateSearchInput("");
+          onClear?.();
+        },
+        icon: /* @__PURE__ */ jsx(CloseIcon, {})
+      }
+    );
+  } else if (typeof placeholder === "object") {
+    rightButton = /* @__PURE__ */ jsx(
+      RightButton,
+      {
+        className: "coordinate-input-copy-button",
+        label: intl.formatMessage({
+          id: "coordinateInput.copyPlaceholder"
+        }),
+        onClick: () => {
+          navigator.clipboard.writeText(placeholderString);
+        },
+        icon: /* @__PURE__ */ jsx(CopyIcon, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(InputGroup, { className: "coordinate-input-field-group", children: [
+    leftInput,
+    rightButton
+  ] });
+}
+function RightButton(props) {
+  const { className, label, onClick, icon } = props;
+  return /* @__PURE__ */ jsx(InputRightElement, { children: /* @__PURE__ */ jsx(Tooltip, { label, children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      className,
+      size: "sm",
+      onClick,
+      padding: 0,
+      icon,
+      "aria-label": label
+    }
+  ) }) });
+}
+
+export { CoordinateInputField };
+//# sourceMappingURL=CoordinateInputField.js.map

package/CoordinateInputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoordinateInputField.js","sources":["CoordinateInputField.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { CloseIcon, CopyIcon } from \"@chakra-ui/icons\";\nimport {\n    IconButton,\n    Input,\n    InputGroup,\n    InputRightElement,\n    Tooltip\n} from \"@open-pioneer/chakra-integration\";\nimport { Coordinate } from \"ol/coordinate\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\n\nexport function CoordinateInputField(props: {\n    isInputValid: boolean;\n    coordinateSearchInput: string;\n    setCoordinateSearchInput: (searchInput: string) => void;\n    placeholder: string | Coordinate;\n    placeholderString: string;\n    onClear: (() => void) | undefined;\n    onEnter: () => void;\n}) {\n    const {\n        isInputValid,\n        coordinateSearchInput,\n        setCoordinateSearchInput,\n        placeholder,\n        placeholderString,\n        onClear,\n        onEnter\n    } = props;\n    const intl = useIntl();\n\n    const leftInput = (\n        <Input\n            type=\"text\"\n            value={coordinateSearchInput}\n            onChange={(e) => {\n                setCoordinateSearchInput(e.target.value);\n            }}\n            isInvalid={!isInputValid}\n            backgroundColor={!isInputValid ? \"red.100\" : \"undefined\"}\n            placeholder={placeholderString}\n            errorBorderColor=\"red.500\"\n            aria-label={intl.formatMessage({\n                id: \"coordinateInput.ariaLabel\"\n            })}\n            borderRightRadius={0}\n            onKeyDown={(e) => {\n                if (e.key == \"Enter\") {\n                    onEnter();\n                }\n            }}\n        />\n    );\n\n    let rightButton = null;\n    if (coordinateSearchInput !== \"\") {\n        rightButton = (\n            <RightButton\n                className=\"coordinate-input-clear-button\"\n                label={intl.formatMessage({\n                    id: \"coordinateInput.clearPlaceholder\"\n                })}\n                onClick={() => {\n                    setCoordinateSearchInput(\"\");\n                    onClear?.();\n                }}\n                icon={<CloseIcon />}\n            />\n        );\n    } else if (typeof placeholder === \"object\") {\n        rightButton = (\n            <RightButton\n                className=\"coordinate-input-copy-button\"\n                label={intl.formatMessage({\n                    id: \"coordinateInput.copyPlaceholder\"\n                })}\n                onClick={() => {\n                    navigator.clipboard.writeText(placeholderString);\n                }}\n                icon={<CopyIcon />}\n            />\n        );\n    }\n    return (\n        <InputGroup className=\"coordinate-input-field-group\">\n            {leftInput}\n            {rightButton}\n        </InputGroup>\n    );\n}\n\nfunction RightButton(props: {\n    className: string;\n    label: string;\n    onClick: () => void;\n    icon: JSX.Element;\n}) {\n    const { className, label, onClick, icon } = props;\n    return (\n        <InputRightElement>\n            <Tooltip label={label}>\n                <IconButton\n                    className={className}\n                    size=\"sm\"\n                    onClick={onClick}\n                    padding={0}\n                    icon={icon}\n                    aria-label={label}\n                />\n            </Tooltip>\n        </InputRightElement>\n    );\n}\n"],"names":[],"mappings":"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"}

package/CoordinateSearch.d.ts

@@ -0,0 +1,26 @@
+import { MapModelProps } from "@open-pioneer/map";
+import { CommonComponentProps } from "@open-pioneer/react-utils";
+import { FC } from "react";
+import { CoordinatesSelectEvent, ProjectionInput } from "./CoordinateInput";
+/**
+ * Properties for the {@link CoordinateSearch}.
+ */
+export interface CoordinateSearchProps extends CommonComponentProps, MapModelProps {
+    /**
+     * Searchable projections, only projections that are known by the map as projection are shown.
+     * Each projection can have an individual precision of coordinates. If no precision is given, the default precision is used.
+     */
+    projections?: ProjectionInput[];
+    /**
+     * Optional event that gets called if some coordinates are entered or projection is changed by the user.
+     */
+    onSelect?: (event: CoordinatesSelectEvent) => void;
+    /**
+     * Optional event that gets called if the input is cleared.
+     */
+    onClear?: () => void;
+}
+/**
+ * The `CoordinateSearch` component can be used in an app to search for entered coordinates in a selected projection
+ */
+export declare const CoordinateSearch: FC<CoordinateSearchProps>;

package/CoordinateSearch.js

@@ -0,0 +1,47 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMapModel } from '@open-pioneer/map';
+import { useCommonComponentProps } from '@open-pioneer/react-utils';
+import { useState, useEffect } from 'react';
+import { unByKey } from 'ol/Observable.js';
+import { CoordinateInput } from './CoordinateInput.js';
+
+const CoordinateSearch = (props) => {
+  const { onSelect, onClear, projections } = props;
+  const { containerProps } = useCommonComponentProps("coordinate-search", props);
+  const { map } = useMapModel(props);
+  const olMap = map?.olMap;
+  const { coordinates } = useCoordinates(olMap);
+  return /* @__PURE__ */ jsx(
+    CoordinateInput,
+    {
+      ...containerProps,
+      mapId: props.mapId,
+      onSelect: (event) => {
+        if (!map) {
+          return;
+        }
+        olMap?.getView().setCenter(event.coords);
+        onSelect?.(event);
+      },
+      onClear,
+      placeholder: coordinates ? coordinates : "",
+      projections
+    }
+  );
+};
+function useCoordinates(map) {
+  const [coordinates, setCoordinates] = useState();
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+    const eventsKey = map.on("pointermove", (evt) => {
+      setCoordinates(evt.coordinate);
+    });
+    return () => unByKey(eventsKey);
+  }, [map]);
+  return { coordinates };
+}
+
+export { CoordinateSearch };
+//# sourceMappingURL=CoordinateSearch.js.map

package/CoordinateSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoordinateSearch.js","sources":["CoordinateSearch.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { MapModelProps, useMapModel } from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { FC, useEffect, useState } from \"react\";\nimport { Coordinate } from \"ol/coordinate\";\nimport { EventsKey } from \"ol/events\";\nimport { unByKey } from \"ol/Observable\";\nimport OlMap from \"ol/Map\";\nimport { CoordinateInput, CoordinatesSelectEvent, ProjectionInput } from \"./CoordinateInput\";\n\n/**\n * Properties for the {@link CoordinateSearch}.\n */\nexport interface CoordinateSearchProps extends CommonComponentProps, MapModelProps {\n    /**\n     * Searchable projections, only projections that are known by the map as projection are shown.\n     * Each projection can have an individual precision of coordinates. If no precision is given, the default precision is used.\n     */\n    projections?: ProjectionInput[];\n\n    /**\n     * Optional event that gets called if some coordinates are entered or projection is changed by the user.\n     */\n    onSelect?: (event: CoordinatesSelectEvent) => void;\n\n    /**\n     * Optional event that gets called if the input is cleared.\n     */\n    onClear?: () => void;\n}\n\n/**\n * The `CoordinateSearch` component can be used in an app to search for entered coordinates in a selected projection\n */\nexport const CoordinateSearch: FC<CoordinateSearchProps> = (props) => {\n    const { onSelect, onClear, projections } = props;\n    const { containerProps } = useCommonComponentProps(\"coordinate-search\", props);\n    const { map } = useMapModel(props);\n    const olMap = map?.olMap;\n\n    const { coordinates } = useCoordinates(olMap); // coordinates of the pointer in the map\n\n    return (\n        <CoordinateInput\n            {...containerProps}\n            mapId={props.mapId}\n            onSelect={(event: CoordinatesSelectEvent) => {\n                if (!map) {\n                    return;\n                }\n\n                olMap?.getView().setCenter(event.coords);\n                onSelect?.(event);\n            }}\n            onClear={onClear}\n            placeholder={coordinates ? coordinates : \"\"}\n            projections={projections}\n        />\n    );\n};\n\n/* get the current coordinates of the pointer on the map */\nfunction useCoordinates(map: OlMap | undefined): { coordinates: Coordinate | undefined } {\n    const [coordinates, setCoordinates] = useState<Coordinate | undefined>();\n\n    useEffect(() => {\n        if (!map) {\n            return;\n        }\n\n        const eventsKey: EventsKey = map.on(\"pointermove\", (evt) => {\n            setCoordinates(evt.coordinate);\n        });\n\n        return () => unByKey(eventsKey);\n    }, [map]);\n\n    return { coordinates };\n}\n"],"names":[],"mappings":";;;;;;;AAmCa,MAAA,gBAAA,GAA8C,CAAC,KAAU,KAAA;AAClE,EAAA,MAAM,EAAE,QAAA,EAAU,OAAS,EAAA,WAAA,EAAgB,GAAA,KAAA,CAAA;AAC3C,EAAA,MAAM,EAAE,cAAA,EAAmB,GAAA,uBAAA,CAAwB,qBAAqB,KAAK,CAAA,CAAA;AAC7E,EAAA,MAAM,EAAE,GAAA,EAAQ,GAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AACjC,EAAA,MAAM,QAAQ,GAAK,EAAA,KAAA,CAAA;AAEnB,EAAA,MAAM,EAAE,WAAA,EAAgB,GAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AAE5C,EACI,uBAAA,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACI,GAAG,cAAA;AAAA,MACJ,OAAO,KAAM,CAAA,KAAA;AAAA,MACb,QAAA,EAAU,CAAC,KAAkC,KAAA;AACzC,QAAA,IAAI,CAAC,GAAK,EAAA;AACN,UAAA,OAAA;AAAA,SACJ;AAEA,QAAA,KAAA,EAAO,OAAQ,EAAA,CAAE,SAAU,CAAA,KAAA,CAAM,MAAM,CAAA,CAAA;AACvC,QAAA,QAAA,GAAW,KAAK,CAAA,CAAA;AAAA,OACpB;AAAA,MACA,OAAA;AAAA,MACA,WAAA,EAAa,cAAc,WAAc,GAAA,EAAA;AAAA,MACzC,WAAA;AAAA,KAAA;AAAA,GACJ,CAAA;AAER,EAAA;AAGA,SAAS,eAAe,GAAiE,EAAA;AACrF,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,QAAiC,EAAA,CAAA;AAEvE,EAAA,SAAA,CAAU,MAAM;AACZ,IAAA,IAAI,CAAC,GAAK,EAAA;AACN,MAAA,OAAA;AAAA,KACJ;AAEA,IAAA,MAAM,SAAuB,GAAA,GAAA,CAAI,EAAG,CAAA,aAAA,EAAe,CAAC,GAAQ,KAAA;AACxD,MAAA,cAAA,CAAe,IAAI,UAAU,CAAA,CAAA;AAAA,KAChC,CAAA,CAAA;AAED,IAAO,OAAA,MAAM,QAAQ,SAAS,CAAA,CAAA;AAAA,GAClC,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAA,OAAO,EAAE,WAAY,EAAA,CAAA;AACzB;;;;"}