diff --git a/src/components/infos/Infos.tsx b/src/components/infos/Infos.tsx
index c80a9c0..b0c2c9d 100644
--- a/src/components/infos/Infos.tsx
+++ b/src/components/infos/Infos.tsx
@@ -1,17 +1,18 @@
-import { Grid, IconButton } from '@suid/material';
-import { Feature } from 'ol';
-import { Geometry } from 'ol/geom';
-import { Component, createSignal, For, Show } from 'solid-js';
-import { useI18n } from '@solid-primitives/i18n';
-import EditIcon from '@suid/icons-material/Edit';
-import { Paper, Stack } from '@suid/material';
-import styled from '@suid/material/styles/styled';
-import Dialog from '../dialog';
+import { Grid, IconButton } from "@suid/material";
+import { Feature } from "ol";
+import { Geometry } from "ol/geom";
+import { getLength } from "ol/sphere";
+import { Component, createSignal, For, Show } from "solid-js";
+import { useI18n } from "@solid-primitives/i18n";
+import EditIcon from "@suid/icons-material/Edit";
+import { Paper, Stack } from "@suid/material";
+import styled from "@suid/material/styles/styled";
+import Dialog from "../dialog";
const Item = styled(Paper)(({ theme }) => ({
...theme.typography.body2,
padding: theme.spacing(1),
- textAlign: 'center',
+ textAlign: "center",
color: theme.palette.text.secondary,
}));
@@ -23,20 +24,24 @@ export const clickHandler = (event: any) => {
const pixel = [event.originalEvent.x, event.originalEvent.y];
const features = event.map.getFeaturesAtPixel(pixel, { hitTolerance: 30 });
console.log({
- caller: ' / clickHandler',
+ caller: " / clickHandler",
event,
features,
});
- selectedFeatures.map((feature) => feature.set('isSelected', false));
+ selectedFeatures.map((feature) => feature.set("isSelected", false));
selectedFeatures = features;
features.map((feature: Feature) => {
- const id = feature.get('id');
- feature.set('isSelected', true);
+ const id = feature.get("id");
+ feature.set("isSelected", true);
+ // const geometry = feature.getGeometry();
+ // const length = getLength(geometry, { projection: "EPSG:4326" });
console.log({
- caller: ' / clickHandler / feature',
+ caller: " / clickHandler / feature",
event,
feature,
id,
+ // geometry,
+ // length,
});
});
if (features.length > 0) {
@@ -50,33 +55,54 @@ const Infos: Component<{}> = (props) => {
setOpen(false);
};
+ const formatLength = (length: number) => {
+ if (length > 1000) {
+ const l = length / 1000;
+ return ` ${l.toLocaleString(undefined, {
+ minimumFractionDigits: 2,
+ maximumFractionDigits: 2,
+ })} km`;
+ }
+ return ` ${length.toLocaleString(undefined, {
+ minimumFractionDigits: 0,
+ maximumFractionDigits: 0,
+ })} m`;
+ };
+
return (
-