diff --git a/src/modules/KmMarks.ts b/src/modules/KmMarks.ts
index 554087c..779b7ec 100644
--- a/src/modules/KmMarks.ts
+++ b/src/modules/KmMarks.ts
@@ -1,7 +1,7 @@
import { divIcon, LatLngLiteral, LayerGroup, Map, marker, Marker } from "leaflet";
import { arrowClusterIcon, createArrow } from "$utils/arrow";
import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
-import { angleBetweenPoints, dist2, distKm, middleCoord } from "$utils/geom";
+import { angleBetweenPoints, dist2, distKm, middleCoord, pointOnDistance } from "$utils/geom";
interface KmMarksOptions {
showMiddleMarkers: boolean,
@@ -16,7 +16,7 @@ class Component extends LayerGroup {
this.options = {
showMiddleMarkers: true,
showEndMarker: true,
- kmMarksStep: 5,
+ kmMarksStep: 10,
...(options || {}),
} as KmMarksOptions;
}
@@ -50,8 +50,6 @@ class Component extends LayerGroup {
this.map.latLngToContainerPoint(next),
);
- console.log(`[${count}] found at ${index}`, dist, sum, rounded);
-
for (let i = 1; i <= count; i += 1) {
const step = last_km_mark + (i * this.options.kmMarksStep);
const shift = (step - dist) / diff;
@@ -63,8 +61,6 @@ class Component extends LayerGroup {
kmMarks[step] = { ...coords, angle };
this.marksLayer.addLayer(this.createMiddleMarker(coords, angle, step));
-
- console.log('-->', step, shift);
}
last_km_mark = rounded;
@@ -72,13 +68,11 @@ class Component extends LayerGroup {
return sum;
}, 0);
-
- console.log(kmMarks);
};
createMiddleMarker = (latlng: LatLngLiteral, angle: number, distance: number): Marker => marker(latlng, {
draggable: false,
- interactive: false,
+ interactive: true,
icon: divIcon({
html: `
@@ -91,7 +85,6 @@ class Component extends LayerGroup {
})
});
-
drawEndMarker = (latlngs: LatLngLiteral[]): void => {
};
@@ -103,8 +96,8 @@ class Component extends LayerGroup {
showCoverageOnHover: false,
zoomToBoundsOnClick: false,
animate: false,
- maxClusterRadius: 10,
- // iconCreateFunction: arrowClusterIcon,
+ maxClusterRadius: 120,
+ iconCreateFunction: arrowClusterIcon,
});
}
diff --git a/src/styles/map.less b/src/styles/map.less
index 97be0a2..1051222 100644
--- a/src/styles/map.less
+++ b/src/styles/map.less
@@ -99,14 +99,14 @@
height: 48px;
}
-.leaflet-km-marker {
- position: relative;
+.leaflet-km-marker, .leaflet-km-marker-2 {
background: green;
+ position: absolute;
.leaflet-km-dist {
- background: blue;
+ background: @red_secondary;
color: white;
- border-radius: 11px;
+ border-radius: 2px;
font-size: 9px;
text-align: center;
min-width: 20px;
@@ -115,8 +115,15 @@
align-items: center;
justify-content: center;
position: relative;
- top: -5px;
+ top: 0;
left: -5px;
+
+ }
+}
+
+.leaflet-km-marker-2 {
+ .leaflet-km-dist {
+ background: green;
}
}
diff --git a/src/utils/geom.ts b/src/utils/geom.ts
index 103ea21..84ab861 100644
--- a/src/utils/geom.ts
+++ b/src/utils/geom.ts
@@ -1,4 +1,4 @@
-import { LatLng, LatLngLiteral, Point } from "leaflet";
+import { LatLng, LatLngLiteral, Point, PointExpression } from "leaflet";
interface ILatLng {
lat: number,
@@ -84,4 +84,18 @@ export const distToSegment = (A: LatLng, B: LatLng, C: LatLng): number => Math.s
// if C between A and B
export const pointBetweenPoints = (A: LatLng, B: LatLng, C: LatLng): boolean => (distToSegment(A, B, C) < 0.01);
-export const angleBetweenPoints = (A: Point, B: Point): number => parseFloat(((Math.atan2(B.y - A.y, B.x - A.x))* 180 / Math.PI).toFixed(6));
+export const angleBetweenPoints = (A: Point, B: Point): number => parseFloat(((Math.atan2(B.y - A.y, B.x - A.x))* 180 / Math.PI).toFixed());
+export const angleBetweenPointsRad = (A: Point, B: Point): number => ((Math.atan2(B.x - A.x, B.y - A.y)));
+
+export const pointOnDistance = (A: Point, B: Point, shift: number): Point => {
+ const c = Math.sqrt((((B.x - A.x) ** 2) + ((B.y - A.y) ** 2)));
+ const angle = angleBetweenPointsRad(A, B);
+
+ // console.log({ angle, c, shift });
+ const x = Math.floor(B.x - c * Math.sin(angle) * shift);
+ const y = Math.floor(B.y - c * Math.cos(angle) * shift);
+
+ // console.log({ x, y });
+
+ return new Point(x, y);
+};