diff --git a/Logic/GeoOperations.ts b/Logic/GeoOperations.ts
index 31cb88ad2d..768a5fe24b 100644
--- a/Logic/GeoOperations.ts
+++ b/Logic/GeoOperations.ts
@@ -273,6 +273,14 @@ export class GeoOperations {
}
return undefined;
}
+ /**
+ * Generates the closest point on a way from a given point
+ * @param way The road on which you want to find a point
+ * @param point Point defined as [lon, lat]
+ */
+ public static nearestPoint(way, point: [number, number]){
+ return turf.nearestPointOnLine(way, point, {units: "kilometers"});
+ }
}
diff --git a/Svg.ts b/Svg.ts
index a3fe46cd7d..88e9216263 100644
--- a/Svg.ts
+++ b/Svg.ts
@@ -184,7 +184,7 @@ export default class Svg {
public static layersAdd_svg() { return new Img(Svg.layersAdd, true);}
public static layersAdd_ui() { return new FixedUiElement(Svg.layersAdd_img);}
- public static length_crosshair = " "
+ public static length_crosshair = " "
public static length_crosshair_img = Img.AsImageElement(Svg.length_crosshair)
public static length_crosshair_svg() { return new Img(Svg.length_crosshair, true);}
public static length_crosshair_ui() { return new FixedUiElement(Svg.length_crosshair_img);}
diff --git a/UI/Input/LengthInput.ts b/UI/Input/LengthInput.ts
index ea7530ce3e..0558069b29 100644
--- a/UI/Input/LengthInput.ts
+++ b/UI/Input/LengthInput.ts
@@ -58,11 +58,11 @@ export default class LengthInput extends InputElement {
})
}
const element = new Combine([
- new Combine([Svg.length_crosshair_ui().SetStyle(
- `visibility: hidden; position: absolute;top: 0;left: 0;transform:rotate(${this.value.data ?? 0}deg);`)
+ new Combine([Svg.length_crosshair_svg().SetStyle(
+ `position: absolute;top: 0;left: 0;transform:rotate(${this.value.data ?? 0}deg);`)
])
.SetClass("block length-crosshair-svg relative")
- .SetStyle("z-index: 1000"),
+ .SetStyle("z-index: 1000; visibility: hidden"),
map?.SetClass("w-full h-full block absolute top-0 left-O overflow-hidden"),
])
.SetClass("relative block bg-white border border-black rounded-3xl overflow-hidden")
@@ -119,6 +119,7 @@ export default class LengthInput extends InputElement {
const measurementCrosshair = htmlElement.getElementsByClassName("length-crosshair-svg")[0] as HTMLElement
+
const measurementCrosshairInner: HTMLElement = measurementCrosshair.firstChild
if (firstClickXY === undefined) {
measurementCrosshair.style.visibility = "hidden"
@@ -139,12 +140,9 @@ export default class LengthInput extends InputElement {
const leaflet = leafletMap?.data
if (leaflet) {
- console.log(firstClickXY, [dx, dy], "pixel origin", leaflet.getPixelOrigin())
const first = leaflet.layerPointToLatLng(firstClickXY)
const last = leaflet.layerPointToLatLng([dx, dy])
- console.log(first, last)
const geoDist = Math.floor(GeoOperations.distanceBetween([first.lng, first.lat], [last.lng, last.lat]) * 100000) / 100
- console.log("First", first, "last", last, "d", geoDist)
self.value.setData("" + geoDist)
}
diff --git a/UI/Input/ValidatedTextField.ts b/UI/Input/ValidatedTextField.ts
index 809ff025fd..ec3aa62ce4 100644
--- a/UI/Input/ValidatedTextField.ts
+++ b/UI/Input/ValidatedTextField.ts
@@ -121,6 +121,10 @@ export default class ValidatedTextField {
// Bit of a hack: we project the centerpoint to the closes point on the road - if available
if(options.feature){
+ const lonlat: [number, number] = [...options.location]
+ lonlat.reverse()
+ options.location = <[number,number]> GeoOperations.nearestPoint(options.feature, lonlat).geometry.coordinates
+ options.location.reverse()
}
options.feature
diff --git a/assets/svg/length-crosshair.svg b/assets/svg/length-crosshair.svg
index cb83789fb5..0446f22c4a 100644
--- a/assets/svg/length-crosshair.svg
+++ b/assets/svg/length-crosshair.svg
@@ -33,8 +33,8 @@
showguides="true"
inkscape:guide-bbox="true"
inkscape:zoom="0.5"
- inkscape:cx="108.3764"
- inkscape:cy="623.05359"
+ inkscape:cx="307.56567"
+ inkscape:cy="-35.669379"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
@@ -53,21 +53,26 @@ Created by potrace 1.15, written by Peter Selinger 2001-2017
-
+
@@ -75,15 +80,36 @@ Created by potrace 1.15, written by Peter Selinger 2001-2017
inkscape:connector-curvature="0"
id="path814"
d="M 429.76804,857.30628 V 428.78674"
- style="fill:none;stroke:#000000;stroke-width:1.49999997;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:11.99999975,11.99999975;stroke-dashoffset:0" />
+ style="fill:none;stroke:#000000;stroke-width:1.49999997;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:35.99999926,35.99999926;stroke-dashoffset:0" />
+ d="M 857.32232,1.0332137 H 1.6833879 v 0"
+ style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:17.99999963, 17.99999963;stroke-dashoffset:0;stroke-opacity:1" />
+
+