@open-pioneer/coordinate-viewer 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/CoordinateViewer.d.ts +4 -0
- package/CoordinateViewer.js +11 -4
- package/CoordinateViewer.js.map +1 -1
- package/README.md +6 -0
- package/package.json +4 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @open-pioneer/coordinate-viewer
|
|
2
2
|
|
|
3
|
+
## 0.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 66f5733: add optional property for display coordinate projection
|
|
8
|
+
|
|
9
|
+
example (show WGS84 coordinates on display):
|
|
10
|
+
|
|
11
|
+
```jsx
|
|
12
|
+
<CoordinateViewer mapId={MAP_ID} precision={2} displayProjectionCode="EPSG:4326" />
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies [611ddb9]
|
|
18
|
+
- @open-pioneer/map@0.3.1
|
|
19
|
+
|
|
3
20
|
## 0.3.0
|
|
4
21
|
|
|
5
22
|
### Minor Changes
|
package/CoordinateViewer.d.ts
CHANGED
|
@@ -12,6 +12,10 @@ export interface CoordinateViewerProps extends CommonComponentProps {
|
|
|
12
12
|
* Number of decimal places shown for coordinates.
|
|
13
13
|
*/
|
|
14
14
|
precision?: number;
|
|
15
|
+
/**
|
|
16
|
+
* Projection of the coordinates shown in the rendered HTML, does not affect the map projection
|
|
17
|
+
*/
|
|
18
|
+
displayProjectionCode?: string;
|
|
15
19
|
}
|
|
16
20
|
/**
|
|
17
21
|
* The `CoordinateViewer`component can be used in an app to render the coordinates at the current mouse position.
|
package/CoordinateViewer.js
CHANGED
|
@@ -3,19 +3,22 @@ import { Box, Text } from '@open-pioneer/chakra-integration';
|
|
|
3
3
|
import { useMapModel, useProjection } from '@open-pioneer/map';
|
|
4
4
|
import { useCommonComponentProps } from '@open-pioneer/react-utils';
|
|
5
5
|
import { unByKey } from 'ol/Observable';
|
|
6
|
+
import { transform } from 'ol/proj';
|
|
6
7
|
import { useIntl } from './_virtual/_virtual-pioneer-module_react-hooks.js';
|
|
7
8
|
import { useState, useEffect } from 'react';
|
|
8
9
|
|
|
9
10
|
const DEFAULT_PRECISION = 4;
|
|
10
11
|
const CoordinateViewer = (props) => {
|
|
11
|
-
const { mapId, precision } = props;
|
|
12
|
+
const { mapId, precision, displayProjectionCode } = props;
|
|
12
13
|
const { containerProps } = useCommonComponentProps("coordinate-viewer", props);
|
|
13
14
|
const { map } = useMapModel(mapId);
|
|
14
15
|
const olMap = map?.olMap;
|
|
15
|
-
const
|
|
16
|
+
const mapProjectionCode = useProjection(olMap)?.getCode() ?? "";
|
|
17
|
+
let { coordinates } = useCoordinates(olMap);
|
|
18
|
+
coordinates = coordinates && displayProjectionCode ? transformCoordinates(coordinates, mapProjectionCode, displayProjectionCode) : coordinates;
|
|
16
19
|
const coordinatesString = useCoordinatesString(coordinates, precision);
|
|
17
|
-
const
|
|
18
|
-
const displayString = coordinatesString ? coordinatesString + " " +
|
|
20
|
+
const projectionString = displayProjectionCode ? displayProjectionCode : mapProjectionCode;
|
|
21
|
+
const displayString = coordinatesString ? coordinatesString + " " + projectionString : "";
|
|
19
22
|
return /* @__PURE__ */ jsx(Box, { ...containerProps, children: /* @__PURE__ */ jsx(Text, { className: "coordinate-viewer-text", children: displayString }) });
|
|
20
23
|
};
|
|
21
24
|
function useCoordinatesString(coordinates, precision) {
|
|
@@ -53,6 +56,10 @@ function formatCoordinates(coordinates, configuredPrecision, intl) {
|
|
|
53
56
|
const coordinatesString = xString + " " + yString;
|
|
54
57
|
return coordinatesString;
|
|
55
58
|
}
|
|
59
|
+
function transformCoordinates(coordinates, source, destination) {
|
|
60
|
+
const transformed = transform(coordinates, source, destination);
|
|
61
|
+
return transformed;
|
|
62
|
+
}
|
|
56
63
|
|
|
57
64
|
export { CoordinateViewer, useCoordinatesString };
|
|
58
65
|
//# sourceMappingURL=CoordinateViewer.js.map
|
package/CoordinateViewer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CoordinateViewer.js","sources":["CoordinateViewer.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box, Text } from \"@open-pioneer/chakra-integration\";\nimport { useMapModel, useProjection } from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport OlMap from \"ol/Map\";\nimport { unByKey } from \"ol/Observable\";\nimport { Coordinate } from \"ol/coordinate\";\nimport { EventsKey } from \"ol/events\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, useEffect, useState } from \"react\";\n\nconst DEFAULT_PRECISION = 4;\n\n/**\n * These are special properties for the CoordinateViewer.\n */\nexport interface CoordinateViewerProps extends CommonComponentProps {\n /**\n * The id of the map.\n */\n mapId: string;\n\n /**\n * Number of decimal places shown for coordinates.\n */\n precision?: number;\n}\n\n/**\n * The `CoordinateViewer`component can be used in an app to render the coordinates at the current mouse position.\n */\nexport const CoordinateViewer: FC<CoordinateViewerProps> = (props) => {\n const { mapId, precision } = props;\n const { containerProps } = useCommonComponentProps(\"coordinate-viewer\", props);\n const { map } = useMapModel(mapId);\n const olMap = map?.olMap;\n\n
|
|
1
|
+
{"version":3,"file":"CoordinateViewer.js","sources":["CoordinateViewer.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box, Text } from \"@open-pioneer/chakra-integration\";\nimport { useMapModel, useProjection } from \"@open-pioneer/map\";\nimport { CommonComponentProps, useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { PackageIntl } from \"@open-pioneer/runtime\";\nimport OlMap from \"ol/Map\";\nimport { unByKey } from \"ol/Observable\";\nimport { Coordinate } from \"ol/coordinate\";\nimport { EventsKey } from \"ol/events\";\nimport { transform } from \"ol/proj\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { FC, useEffect, useState } from \"react\";\n\nconst DEFAULT_PRECISION = 4;\n\n/**\n * These are special properties for the CoordinateViewer.\n */\nexport interface CoordinateViewerProps extends CommonComponentProps {\n /**\n * The id of the map.\n */\n mapId: string;\n\n /**\n * Number of decimal places shown for coordinates.\n */\n precision?: number;\n\n /**\n * Projection of the coordinates shown in the rendered HTML, does not affect the map projection\n */\n displayProjectionCode?: string;\n}\n\n/**\n * The `CoordinateViewer`component can be used in an app to render the coordinates at the current mouse position.\n */\nexport const CoordinateViewer: FC<CoordinateViewerProps> = (props) => {\n const { mapId, precision, displayProjectionCode } = props;\n const { containerProps } = useCommonComponentProps(\"coordinate-viewer\", props);\n const { map } = useMapModel(mapId);\n const olMap = map?.olMap;\n const mapProjectionCode = useProjection(olMap)?.getCode() ?? \"\";\n let { coordinates } = useCoordinates(olMap);\n coordinates =\n coordinates && displayProjectionCode\n ? transformCoordinates(coordinates, mapProjectionCode, displayProjectionCode)\n : coordinates;\n const coordinatesString = useCoordinatesString(coordinates, precision);\n const projectionString = displayProjectionCode ? displayProjectionCode : mapProjectionCode;\n const displayString = coordinatesString ? coordinatesString + \" \" + projectionString : \"\";\n return (\n <Box {...containerProps}>\n <Text className=\"coordinate-viewer-text\">{displayString}</Text>\n </Box>\n );\n};\n\n/* Separate function for easier testing */\nexport function useCoordinatesString(\n coordinates: number[] | undefined,\n precision: number | undefined\n): string {\n const intl = useIntl();\n const coordinatesString = coordinates ? formatCoordinates(coordinates, precision, intl) : \"\";\n return coordinatesString;\n}\n\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\nfunction formatCoordinates(\n coordinates: number[],\n configuredPrecision: number | undefined,\n intl: PackageIntl\n) {\n if (coordinates[0] == null || coordinates[1] == null) {\n return \"\";\n }\n\n const precision = configuredPrecision ?? DEFAULT_PRECISION;\n const [x, y] = coordinates;\n\n const xString = intl.formatNumber(x, {\n maximumFractionDigits: precision,\n minimumFractionDigits: precision\n });\n const yString = intl.formatNumber(y, {\n maximumFractionDigits: precision,\n minimumFractionDigits: precision\n });\n\n const coordinatesString = xString + \" \" + yString;\n return coordinatesString;\n}\n\nfunction transformCoordinates(\n coordinates: number[],\n source: string,\n destination: string\n): number[] {\n const transformed = transform(coordinates, source, destination);\n return transformed;\n}\n"],"names":[],"mappings":"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"}
|
package/README.md
CHANGED
|
@@ -16,6 +16,12 @@ To define the number of decimal places shown, set the optional `precision` prope
|
|
|
16
16
|
<CoordinateViewer mapId="map_id" precision={2} />
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
+
To show the coordinates in a specific projection, set the optional `displayProjectionCode` property:
|
|
20
|
+
|
|
21
|
+
```jsx
|
|
22
|
+
<CoordinateViewer mapId="map_id" displayProjectionCode="EPSG:4326" />
|
|
23
|
+
```
|
|
24
|
+
|
|
19
25
|
## License
|
|
20
26
|
|
|
21
27
|
Apache-2.0 (see `LICENSE` file)
|
package/package.json
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"type": "module",
|
|
3
3
|
"name": "@open-pioneer/coordinate-viewer",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.4.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"peerDependencies": {
|
|
7
7
|
"@open-pioneer/chakra-integration": "^1.1.1",
|
|
8
8
|
"@open-pioneer/runtime": "^2.1.0",
|
|
9
9
|
"ol": "^8.2.0",
|
|
10
10
|
"react": "^18.2.0",
|
|
11
|
-
"
|
|
12
|
-
"@open-pioneer/react-utils": "^0.2.1"
|
|
11
|
+
"proj4": "^2.9.0",
|
|
12
|
+
"@open-pioneer/react-utils": "^0.2.1",
|
|
13
|
+
"@open-pioneer/map": "^0.3.1"
|
|
13
14
|
},
|
|
14
15
|
"exports": {
|
|
15
16
|
"./package.json": "./package.json",
|