Split scripts

Arrow.js

@@ -0,0 +1,275 @@
+export const ARROW_BODY_STYLE_CONSTANT = 1;
+export const ARROW_BODY_STYLE_LINEAR = 2;
+export const ARROW_BODY_STYLE_EXPONENTIAL = 3;
+
+
+export const METERS = 'meters';
+
+import * as turf from "@turf/turf";
+
+//ARROW
+// Cubic interpolation source from https://www.paulinternet.nl/?page=bicubic
+/**
+ * @param {number[]} points - An array of 4 values [p0, p1, p2, p3] representing control points.
+ * @param {number} t - The relative position between p1 and p2 (range typically from 0 to 1).
+ * @returns {number} The interpolated value.
+ */
+export function cubicInterpolate(p, t) {
+    return p[1] + 0.5 * t * (p[2] - p[0] + t * (2.0 * p[0] - 5.0 * p[1] + 4.0 * p[2] - p[3] + t * (3.0 * (p[1] - p[2]) + p[3] - p[0])));
+}
+
+function exponentialWidthCurve(normalizedPosition, range = 5, minValue = 0.1) {
+    return minValue + (1 - minValue) * Math.exp(-range * normalizedPosition); 
+}
+
+function linearWidthCurve(normalizedPosition, range = 1, minValue = 0.1) {
+    return 1 + (minValue - 1) * normalizedPosition / range ;
+}
+
+//GEOJSON
+/**
+ * @param {Object} arrowData - Object with data for arrow
+ * @param {Array<[number, number]>} arrowData.points - List of points defining the arrow's path.
+ * @param {number} arrowData.splineStep - The step size for the spline interpolation.
+ * @param {number} arrowData.offsetDistance - The offset distance for the arrow's path (width).
+ * 
+ * @param {Object} style - Object with data for the calculation style.
+ * @param {number} style.calculation - The style for the calculation
+ * @param {number} style.range - The range for the calculation style.
+ * @param {number} style.minValue - The minimum value used in the calculation.
+ * 
+ * @param {Object} arrowHeadData - Optional data for the arrowhead.
+ * @param {number} arrowHeadData.widthArrow - The width of the arrowhead.
+ * @param {number} arrowHeadData.lengthArrow - The length of the arrowhead.
+ * 
+ * @returns {GeoJSON.Feature<GeoJSON.Polygon>} - An array of points representing the arrow polygon.
+ */
+export function getArrowPolygon(arrowData, style, arrowHeadData) {
+    if (!arrowData || !(arrowData.points) || arrowData.points.length === 0) {
+        console.warn("getArrowPolygon: Invalid arrowData or empty points array.");
+        return [];
+    }
+
+    if (!style) {
+        style = {
+            calculation: ARROW_BODY_STYLE_CONSTANT,
+            range: 0,
+            minValue: 0
+        };
+    }
+
+    const splinePoints = computeSplinePoints(arrowData.points, arrowData.splineStep);
+    const { leftSidePoints, rightSidePoints } = computeSideOffsets(splinePoints, arrowData.offsetDistance, style);
+
+    const end = splinePoints[splinePoints.length -1];
+    const bearing = averageBearing(splinePoints, 3);
+    const arrowHead= arrowHeadData
+    ? createIsoscelesTriangleCoords(
+        turf.point(end),
+        arrowData.offsetDistance * arrowHeadData.widthArrow, arrowData.offsetDistance * arrowHeadData.lengthArrow, bearing)
+    : [];
+
+    const polygonCoords = [
+        ...leftSidePoints,
+        ...arrowHead,
+        ...rightSidePoints.reverse(),
+        leftSidePoints[0]
+    ];
+
+    return turf.polygon([[...polygonCoords]]);
+}
+
+function averageBearing(points, count = 3) {
+    const bearings = [];
+    for (let i = points.length - count; i < points.length -1; i++) {
+        if (i >= 0) {
+            bearings.push(turf.bearing(turf.point(points[i]), turf.point(points[i + 1])));
+        }
+    }
+
+    const sinSum = bearings.reduce((sum, b) => sum + Math.sin(b * Math.PI / 180), 0);
+    const cosSum = bearings.reduce((sum, b) => sum + Math.cos(b * Math.PI / 180), 0);
+    return Math.atan2(sinSum, cosSum) * 180 / Math.PI;
+}
+
+function computeSplinePoints(points, splineStep = 10) {
+    if (points.length < 2) return points;
+    const result = [];
+
+    for (let i = 0; i < points.length - 1; i++) {
+        const p0 = points[i === 0 ? i : i - 1];
+        const p1 = points[i];
+        const p2 = points[i + 1];
+        const p3 = points[i + 2] || p2;
+        for (let j = 0; j < splineStep; j++) {
+            const t = j / splineStep;
+            const lon = cubicInterpolate([p0[0], p1[0], p2[0], p3[0]], t);
+            const lat = cubicInterpolate([p0[1], p1[1], p2[1], p3[1]], t);
+            result.push([lon, lat]);
+        }
+    }
+
+    result.push(points[points.length - 1]);
+    return result;
+}
+
+function computeSideOffsets(points, offsetMeters, style) {
+    let leftSidePoints = [];
+    let rightSidePoints = [];
+    const total = points.length - 1; 
+
+    for (let i = 1; i < points.length; i++) {
+        const previousPoint = points[i - 1];
+        const currentPoint = points[i];
+        const bearing = turf.bearing(turf.point(previousPoint), turf.point(currentPoint));
+        const normalizedPosition = i / total;
+
+        let localOffsetDistance;
+        switch (style.calculation) {
+            case ARROW_BODY_STYLE_LINEAR:
+                localOffsetDistance = offsetMeters * linearWidthCurve(normalizedPosition, style.range, style.minValue);
+                break;
+            case ARROW_BODY_STYLE_EXPONENTIAL:
+                localOffsetDistance = offsetMeters * exponentialWidthCurve(normalizedPosition, style.range, style.minValue);
+                break;
+            case ARROW_BODY_STYLE_CONSTANT:
+            default:
+                localOffsetDistance = offsetMeters;
+        }
+
+        leftSidePoints.push(turf.destination(turf.point(currentPoint), localOffsetDistance, bearing - 90, { units: METERS }).geometry.coordinates);
+        rightSidePoints.push(turf.destination(turf.point(currentPoint), localOffsetDistance, bearing + 90, { units: METERS }).geometry.coordinates);
+    }
+
+    return { leftSidePoints, rightSidePoints };
+}
+
+function createIsoscelesTriangleCoords(center, baseLengthMeters, heightMeters, bearing = 0) {
+    const halfBase = baseLengthMeters / 2;
+    const left = turf.destination(center, halfBase, bearing - 90, { units: METERS }).geometry.coordinates;
+    const right = turf.destination(center, halfBase, bearing + 90, { units: METERS }).geometry.coordinates;
+    const tip = turf.destination(center, heightMeters, bearing, { units: METERS }).geometry.coordinates;
+    return [left, tip, right];
+}
+//GEOJSON
+//CANVAS
+/**
+ * @param {Object} arrowData - Object with data for arrow
+ * @param {{x: number, y: number}[]} arrowData.points - List of points defining the arrow's path.
+ * @param {number} arrowData.splineStep - The step size for the spline interpolation.
+ * @param {number} arrowData.spacing - The spacing between the points along the arrow.
+ * @param {number} arrowData.offsetDistance - The offset distance for the arrow's path (width).
+ * 
+ * @param {Object} style - Object with data for the calculation style.
+ * @param {number} style.calculation - The style for the calculation
+ * @param {number} style.range - The range for the calculation style.
+ * @param {number} style.minValue - The minimum value used in the calculation.
+ * 
+ * @param {Object|undefined} arrowHeadData - Optional data for the arrowhead.
+ * @param {number} arrowHeadData.widthArrow - The width of the arrowhead.
+ * @param {number} arrowHeadData.lengthArrow - The length of the arrowhead.
+ * 
+ * @returns {{x: number, y: number}[]} - An array of points representing the arrow polygon.
+ */
+export function getArrowPolygonEuclidean(
+    arrowData,
+    style= undefined,
+    arrowHeadData = undefined) {
+    if (!style)
+        style = {
+            calculation: ARROW_BODY_STYLE_CONSTANT,
+            range: 0,
+            minValue: 0
+        };
+
+    const splinePoints = computeSplinePointsEuclidean(arrowData.points, arrowData.splineStep);
+    const { leftSidePoints, rightSidePoints }  = computeSidesEuclidean(splinePoints, arrowData.spacing, arrowData.offsetDistance, style);
+    const arrowHead= arrowHeadData
+    ? computeArrowHeadEuclidean(splinePoints, arrowHeadData.widthArrow, arrowHeadData.lengthArrow)
+    : [];
+    
+    return [...leftSidePoints, ...arrowHead.reverse(), ...rightSidePoints.reverse()];
+}
+
+function computeSplinePointsEuclidean(points, splineStep) {
+    let splinePoints = [];
+
+    for (let i = 0; i < points.length - 1; i++) {
+        const p0 = points[i === 0 ? i : i - 1];
+        const p1 = points[i];
+        const p2 = points[i + 1];
+        const p3 = points[i + 2] || p2;
+        for (let t = 0; t <= 1; t += splineStep) {
+            splinePoints.push({
+                x: cubicInterpolate([p0.x, p1.x, p2.x, p3.x], t),
+                y: cubicInterpolate([p0.y, p1.y, p2.y, p3.y], t)
+            });
+        }
+    }
+
+    return splinePoints;
+}
+
+function computeSidesEuclidean(splinePoints, spacing, offsetDistance, style) {
+
+    let leftSidePoints = [];
+    let rightSidePoints = [];
+    let accumulatedDistance = 0;
+
+    for (let i = 1; i < splinePoints.length; i++) {
+        const previousPoint = splinePoints[i - 1];
+        const currentPoint = splinePoints[i];
+        const segmentLength = Math.hypot(currentPoint.x - previousPoint.x, currentPoint.y - previousPoint.y);
+
+        accumulatedDistance += segmentLength;
+
+        if (accumulatedDistance >= spacing || i === 1 || i === splinePoints.length - 1) {
+            const distanceX = currentPoint.y - previousPoint.y;
+            const distanceY = previousPoint.x - currentPoint.x;
+            const length = Math.hypot(distanceX, distanceY);
+            const normalizedPosition = i / (splinePoints.length - 1);
+            
+            let localOffsetDistance;
+
+            switch (style.calculation) {
+                case ARROW_BODY_STYLE_LINEAR:
+                    localOffsetDistance = offsetDistance * linearWidthCurve(normalizedPosition, style.range, style.minValue);
+                    break;
+                case ARROW_BODY_STYLE_EXPONENTIAL:
+                    localOffsetDistance = offsetDistance * exponentialWidthCurve(normalizedPosition, style.range, style.minValue);
+                    break;
+                case ARROW_BODY_STYLE_CONSTANT:
+                default:
+                    localOffsetDistance = offsetDistance;
+            }
+
+            const offsetX = (distanceX / length) * localOffsetDistance;
+            const offsetY = (distanceY / length) * localOffsetDistance;
+
+            accumulatedDistance = 0;
+            leftSidePoints.push({ x: currentPoint.x + offsetX, y: currentPoint.y + offsetY });
+            rightSidePoints.push({ x: currentPoint.x - offsetX, y: currentPoint.y - offsetY });
+        }
+    }
+    
+    return { leftSidePoints, rightSidePoints };
+}
+
+function computeArrowHeadEuclidean(splinePoints, width, length) {
+    const len = splinePoints.length;
+    const lastPoint = splinePoints[len - 1];
+    const secondLastPoint = splinePoints[len - 2];
+    const x = lastPoint.x - secondLastPoint.x;
+    const y = lastPoint.y - secondLastPoint.y;
+    const magnitude = Math.hypot(x, y);
+    const normalizedX = x / magnitude;
+    const normalizedY = y / magnitude;
+
+    return [
+        { x: lastPoint.x - normalizedY * width, y: lastPoint.y + normalizedX * width },
+        { x: lastPoint.x + normalizedX * length, y: lastPoint.y + normalizedY * length },
+        { x: lastPoint.x + normalizedY * width, y: lastPoint.y - normalizedX * width },
+    ];
+}
+//CANVAS
+//ARROW

ArrowPoints.js

@@ -1,9 +1,11 @@
 const canvas = document.getElementById("canvas");
 // Compute arrow polygon
-import { getArrowPolygon } from "athena-utils/shape/Arrow.js";
+import { getArrowPolygonEuclidean } from "athena-utils/shape/Arrow.js";
 import { ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_EXPONENTIAL } from "athena-utils/shape/Arrow.js";
-import { getCirclePolygon } from "athena-utils/shape/BasicShapes.js";
+import { getCirclePolygonEuclidean } from "athena-utils/shape/BasicShapes.js";
-import { getRectanglePolygon } from "athena-utils/shape/BasicShapes.js";
+import { getRectanglePolygonEuclidean } from "athena-utils/shape/BasicShapes.js";
+import { getFrontlineEuclidean } from "athena-utils/shape/Frontline.js";
+import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
 // Polygon merge using Turf library
 import {mergeTurfPolygons} from "athena-utils/shape/Polygon.js";
 import {addTurfPolygonToMerge} from "athena-utils/shape/Polygon.js";
@@ -23,18 +25,42 @@ const rectangleSideA = 70;
 const rectangleSideB = 200;
 const rectangleRotation = 40;
 
+const frontlinePointsA = [
+    { x: 120, y: 400 },
+    { x: 200, y: 100 },
+    { x: 350, y: 200 },
+    { x: 350, y: 400 },
+    { x: 450, y: 480 },
+    { x: 550, y: 440 },
+    { x: 600, y: 300 },
+];
+
+const frontlinePointsB = [
+    { x: 420, y: 280 },
+    { x: 430, y: 380 },
+    { x: 500, y: 400 },
+    { x: 520, y: 300 },
+];
+
+const frontlinePointsC = [
+    { x: 450, y: 200 },
+    { x: 500, y: 250 },
+    { x: 550, y: 250 },
+    { x: 550, y: 200 }
+];
+
 const pointsA = [
     { x: 50, y: 400 },
     { x: 150, y: 100 },
     { x: 300, y: 200 },
-    { x: 300, y: 400 },
+    { x: 300, y: 500 },
 ];
 
 const pointsB = [
     { x: 310, y: 300 },
     { x: 380, y: 350 },
     { x: 450, y: 450 },
-    { x: 650, y: 430 }
+    { x: 380, y: 530 }
 ];
 
 const pointsC = [
@@ -42,10 +68,54 @@ const pointsC = [
     { x: 100, y: 100 },
     { x: 180, y: 95 }
 ];
+const frontlineDataA = {
+    points: frontlinePointsA,
+    splineStep: 0.08,
+    spacing: 10,
+    offsetDistance: 10,
+    style: LEFT_SIDE,
+  };
+
+const protrusionDataA = {
+    length: 15,
+    startSize: 5,
+    endSize: 2,
+    gap: 20,
+  };
+
+  const frontlineDataB = {
+    points: frontlinePointsB,
+    splineStep: 0.02,
+    spacing: 10,
+    offsetDistance: 10,
+    style: RIGHT_SIDE,
+  };
+
+  const protrusionDataB = {
+    length: 15,
+    startSize: 5,
+    endSize: 5,
+    gap: 20,
+  };
+
+  const frontlineDataC = {
+    points: frontlinePointsC,
+    splineStep: 0.02,
+    spacing: 10,
+    offsetDistance: 10,
+    style: BOTH_SIDES,
+  };
+
+ const protrusionDataC = {
+    length: 15,
+    startSize: 5,
+    endSize: 5,
+    gap: 20,
+  };
 
 const arrowDataA = {
     points: pointsA,
-    density: 0.02,
+    splineStep: 0.02,
     spacing: 20,
     offsetDistance: 50
   };
@@ -60,7 +130,7 @@ const arrowDataA = {
   };
   const arrowDataB = {
     points: pointsB,
-    density: 0.02,
+    splineStep: 0.02,
     spacing: 1,
     offsetDistance: 80,
   };
@@ -75,7 +145,7 @@ const arrowDataA = {
   };
   const arrowDataC = {
     points: pointsC,
-    density: 0.02,
+    splineStep: 0.02,
     spacing: 5,
     offsetDistance: 10,
   };
@@ -83,13 +153,14 @@ const arrowDataA = {
     calculation: ARROW_BODY_STYLE_CONSTANT,
   };
 
-const arrowPolygonA = getArrowPolygon(arrowDataA, styleA, arrowHeadDataA);
-const arrowPolygonB = getArrowPolygon(arrowDataB, styleB, arrowHeadDataB);
-const arrowPolygonC = getArrowPolygon(arrowDataC, styleC);
 
-const circlePolygon = getCirclePolygon(circleCenter, circleRadius, circleDensity);
+const arrowPolygonA = getArrowPolygonEuclidean(arrowDataA, styleA, arrowHeadDataA);
-const circlePolygonB = getCirclePolygon(circleCenterB, circleRadiusB, circleDensityB);
+const arrowPolygonB = getArrowPolygonEuclidean(arrowDataB, styleB, arrowHeadDataB);
-const rectanglePolygon = getRectanglePolygon(rectangleCenter, rectangleSideA, rectangleSideB, rectangleRotation);
+const arrowPolygonC = getArrowPolygonEuclidean(arrowDataC, styleC);
+
+const circlePolygon = getCirclePolygonEuclidean(circleCenter, circleRadius, circleDensity);
+const circlePolygonB = getCirclePolygonEuclidean(circleCenterB, circleRadiusB, circleDensityB);
+const rectanglePolygon = getRectanglePolygonEuclidean(rectangleCenter, rectangleSideA, rectangleSideB, rectangleRotation);
 
 const mergedTurfPoly = mergeTurfPolygons(arrowPolygonA, arrowPolygonC);
 const mergedTurfPolyAll = addTurfPolygonToMerge(mergedTurfPoly, arrowPolygonB);
@@ -97,14 +168,36 @@ const mergedTurfPolyAll = addTurfPolygonToMerge(mergedTurfPoly, arrowPolygonB);
 const mergedTurfPolyRectangle = addTurfPolygonToMerge(mergedTurfPolyAll, rectanglePolygon);
 const mergedRectangle = mergeTurfPolygons(circlePolygon, circlePolygonB);
 
-const rectanglePoly = getRectanglePolygon(circleCenter, rectangleSideA, rectangleSideB, rectangleRotation*-1);
+const rectanglePoly = getRectanglePolygonEuclidean(circleCenter, rectangleSideA, rectangleSideB, rectangleRotation*-1);
 const rectangleToTurfPoly = toTurfPolygon(rectanglePoly);
 
-console.log(mergedTurfPolyRectangle);
+const frontlinePolygonA = getFrontlineEuclidean(frontlineDataA);
-console.log(mergedRectangle);
+let frontlinePolygonMergedA = toTurfPolygon(frontlinePolygonA.body);
+
+
+const frontlinePolygonB = getFrontlineEuclidean(frontlineDataB, protrusionDataB);
+let frontlinePolygonMergedB = mergeTurfPolygons(frontlinePolygonB.body,frontlinePolygonB.protrusions[0]);
+for (let i = 1; i < frontlinePolygonB.protrusions.length; i++) 
+{
+    frontlinePolygonMergedB = addTurfPolygonToMerge(frontlinePolygonMergedB, frontlinePolygonB.protrusions[i]);
+}
+
+const frontlinePolygonC = getFrontlineEuclidean(frontlineDataC, protrusionDataC);
+
+let frontlinePolygonMergedLeft = mergeTurfPolygons(frontlinePolygonC.bodyLeft, frontlinePolygonC.protrusionsLeft[0]);
+for (let i = 1; i < frontlinePolygonC.protrusionsLeft.length; i++) {
+    frontlinePolygonMergedLeft = addTurfPolygonToMerge(frontlinePolygonMergedLeft, frontlinePolygonC.protrusionsLeft[i]);
+}
+
+let frontlinePolygonMergedRight = mergeTurfPolygons(frontlinePolygonC.bodyRight, frontlinePolygonC.protrusionsRight[0]);
+for (let i = 1; i < frontlinePolygonC.protrusionsRight.length; i++) {
+    frontlinePolygonMergedRight = addTurfPolygonToMerge(frontlinePolygonMergedRight, frontlinePolygonC.protrusionsRight[i]);
+}
 
 drawPolygon(mergedTurfPolyRectangle, "rgba(255, 0, 0, 0.5)", canvas);
 drawPolygon(mergedRectangle, "rgba(0, 255, 0, 0.5)", canvas);
 drawPolygon(rectangleToTurfPoly, "rgba(234, 0, 255, 0.5)", canvas);
-
+drawPolygon(frontlinePolygonMergedA, "rgba(0, 13, 255, 0.5)", canvas);
-
+drawPolygon(frontlinePolygonMergedB, "rgba(82, 0, 94, 0.5)", canvas);
+drawPolygon(frontlinePolygonMergedLeft, "rgba(255, 166, 0, 0.5)", canvas);
+drawPolygon(frontlinePolygonMergedRight, "rgba(251, 0, 255, 0.5)", canvas);

BasicShapes.js

@@ -0,0 +1,173 @@
+import * as turf from "@turf/turf";
+import { toMercator, toWgs84 } from '@turf/projection';
+
+//CIRCLE
+const DISTANCE_PER_DEGREE_LONGITUDE = 111.320; // 2π×6378.1km/360
+const DISTANCE_PER_DEGREE_LATITUDE  = 110.574; // 2π×6356.75km/360
+
+//GEOJSON
+/**
+ * @param {Object} center - The center point of the circle.
+ * @param {number} center.x
+ * @param {number} center.y
+ * @param {number} radius - The radius of the circle.
+ * @param {number} density - The number of points used to approximate the circle.
+ * 
+ * @returns {GeoJSON.Feature<GeoJSON.Polygon>} GeoJSON Feature representing the circle polygon.
+ */
+export function getCirclePolygon(center, radius, density = 64) {
+    if (!center || !radius ) {
+        console.warn("getCirclePolygon: Invalid center, radius.");
+        return [];
+    }
+
+    const points = [];
+
+    const coords = {
+        latitude: center[1],
+        longitude: center[0]
+    };
+
+    const distanceX = radius / (DISTANCE_PER_DEGREE_LONGITUDE * Math.cos(coords.latitude * Math.PI / 180));
+    const distanceY = radius / DISTANCE_PER_DEGREE_LATITUDE;
+
+    for (let i = 0; i < density; i++) {
+        const angle = (i / density) * Math.PI * 2;
+        const x = distanceX * Math.cos(angle);
+        const y = distanceY * Math.sin(angle);
+        points.push([coords.longitude + x, coords.latitude + y]);
+    }
+
+    // Close the circle by adding the first point again
+    points.push(points[0]);
+
+    return turf.polygon([[...points]]);
+    /*
+    return {
+        "type": "Feature",
+        "geometry": {
+            "type": "Polygon",
+            "coordinates": [points]
+        },
+        "properties": {}
+    };*/
+}
+//GEOJSON
+//CANVAS
+/**
+ * @param {Object} center - The center point of the circle.
+ * @param {number} center.x
+ * @param {number} center.y
+ * @param {number} radius - The radius of the circle.
+ * @param {number} density - The number of points used to approximate the circle.
+ * 
+ * @returns {{x: number, y: number}[]} An array of points representing the vertices of the circle polygon.
+ */
+export function getCirclePolygonEuclidean(center, radius, density) {
+    if (!center || !radius || !density) {
+        console.warn("getCirclePolygonEuclidean: Invalid center, radius or density.");
+        return [];
+    }
+
+    const points = [];
+    for (let i = 0; i < density; i++) {
+        const angle = (i / density) * Math.PI * 2;
+        const x = center.x + radius * Math.cos(angle);
+        const y = center.y + radius * Math.sin(angle);
+        points.push({ x, y });
+    }
+    return points;
+}
+//CANVAS
+//CIRCLE
+
+//RECTANGLE
+//GEOJSON
+/**
+ * @param {Object} center - The center point of the rectangle.
+ * @param {number} center.x
+ * @param {number} center.y
+ * @param {number} width - The length of the first side of the rectangle.
+ * @param {number} height - The length of the second side of the rectangle.
+ * @param {number} rotation - The angle (in radians) by which to rotate the rectangle.
+ * 
+ * @returns {GeoJSON.Feature<GeoJSON.Polygon>} GeoJSON Feature representing the rectangle polygon.
+ */
+export function getRectanglePolygon(center, width, height, rotation = 0) {
+    if (!center || !width || !height) {
+        console.warn("getRectanglePolygon: Invalid center, width or height.");
+        return [];
+    }
+
+  const widthMeters = width * 1000 ;
+  const heightMeters = height * 1000;
+
+  const centerMerc = toMercator(turf.point(center)).geometry.coordinates;
+
+  const halfWidth = widthMeters / 2;
+  const halfHeight = heightMeters / 2;
+
+  let corners = [
+    [centerMerc[0] - halfWidth, centerMerc[1] + halfHeight], // topLeft
+    [centerMerc[0] + halfWidth, centerMerc[1] + halfHeight], // topRight
+    [centerMerc[0] + halfWidth, centerMerc[1] - halfHeight], // bottomRight
+    [centerMerc[0] - halfWidth, centerMerc[1] - halfHeight], // bottomLeft
+  ];
+
+  if (rotation !== 0) {
+    const rad = (rotation * Math.PI) / 180;
+    corners = corners.map(([x, y]) => rotateXY(x, y, centerMerc[0], centerMerc[1], rad));
+  }
+
+  corners.push(corners[0]);
+  const wgsCoords = corners.map(([x, y]) => toWgs84([x, y]));
+
+  return turf.polygon([wgsCoords]);
+}
+
+function rotateXY(x, y, cx, cy, angleRad) {
+  const dx = x - cx;
+  const dy = y - cy;
+  const cos = Math.cos(angleRad);
+  const sin = Math.sin(angleRad);
+  const rx = cx + dx * cos - dy * sin;
+  const ry = cy + dx * sin + dy * cos;
+  return [rx, ry];
+}
+//GEOJSON
+//CANVAS
+/**
+ * @param {Object} center - The center point of the rectangle.
+ * @param {number} center.x
+ * @param {number} center.y
+ * @param {number} sideA - The length of the first side of the rectangle.
+ * @param {number} sideB - The length of the second side of the rectangle.
+ * @param {number} rotation - The angle (in radians) by which to rotate the rectangle.
+ * 
+ * @returns {{x: number, y: number}[]} An array of points representing the vertices of the rectangle polygon.
+ */
+export function getRectanglePolygonEuclidean(center, sideA, sideB, rotation = 0) {
+    if (!center || !sideA || !sideB) {
+        console.warn("getRectanglePolygonEuclidean: Invalid center, sideA or sideB.");
+        return [];
+    }
+
+    const halfA = sideA / 2;
+    const halfB = sideB / 2;
+    
+    const corners = [
+        { x: -halfA, y: -halfB },
+        { x: halfA, y: -halfB },
+        { x: halfA, y: halfB },
+        { x: -halfA, y: halfB }
+    ];
+    
+    return corners.map(point => {
+        return {
+            x: center.x + point.x * Math.cos(rotation) - point.y * Math.sin(rotation),
+            y: center.y + point.x * Math.sin(rotation) + point.y * Math.cos(rotation)
+        };
+    });
+}
+//CAVNAS
+//RECTANGLE

Drawing.js

@@ -0,0 +1,296 @@
+import { getArrowPolygon } from "athena-utils/shape/Arrow.js";
+import { getFrontline } from "./Frontline.js";
+import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
+import { handleDraw, handleClick, showArrowEditor, hideArrowEditor, showFrontlineEditor, hideFrontlineEditor, handleDelete, drawOnMap } from "./DrawingFunctions.js";
+import { arrowParamsMap, frontlineParamsMap, currentFeature, setCurrentFeature} from "./DrawingFunctions.js";
+
+export const ARROW = "arrow";
+export const FRONTLINE = "frontline";
+export const ADDITIONAL_SIDE = "additionalSide"; // used for Id in BOTH_SIDES style
+
+let currentDrawStyle = ARROW;
+
+mapboxgl.accessToken = 'pk.eyJ1Ijoib3V0ZG9vcm1hcHBpbmdjb21wYW55IiwiYSI6ImNqYmh3cDdjYzNsMnozNGxsYzlvMmk2bTYifQ.QqcZ4LVoLWnXafXdjZxnZg';
+
+const map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/streets-v12',
+    center: [10, 50],
+    zoom: 5
+});
+
+// Drawing visuals
+const draw = new MapboxDraw({
+    displayControlsDefault: false,
+    controls: {
+        line_string: true
+    },
+    defaultMode: 'draw_line_string',
+    styles: [
+        // Main drawing line
+        {
+            id: 'gl-draw-line',
+            type: 'line',
+            filter: ['all', ['==', '$type', 'LineString'], ['==', 'active', 'true']],
+            layout: {
+                'line-cap': 'round',
+                'line-join': 'round'
+            },
+            paint: {
+                'line-color': 'rgb(0, 255, 0)',
+                'line-width': 4
+            }
+        },
+        // This makes the nonstop visible line invisible
+        {
+            id: 'gl-draw-line-inactive',
+            type: 'line',
+            filter: ['all', ['==', '$type', 'LineString'], ['==', 'deactive', 'false']],
+            layout: {
+                'line-cap': 'round',
+                'line-join': 'round'
+            },
+            paint: {
+                'line-color': 'rgba(0, 0, 0, 0)',
+                'line-width': 2
+            }
+        },
+        // Selected point
+        {
+            id: 'gl-draw-polygon-and-line-vertex-active',
+            type: 'circle',
+            filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'vertex'], ['==', 'active', 'true']],
+            paint: {
+                'circle-radius': 6,
+                'circle-color': 'rgb(255, 255, 0)'
+            }
+        },
+        // Main points
+        {
+            id: 'gl-draw-polygon-and-line-vertex-inactive',
+            type: 'circle',
+            filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'vertex'], ['==', 'active', 'false']],
+            paint: {
+                'circle-radius': 4,
+                'circle-color': 'rgb(0, 255, 0)'
+            }
+        },
+        // Midpoints
+        {
+            id: 'gl-draw-polygon-midpoint',
+            type: 'circle',
+            filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
+            paint: {
+                'circle-radius': 4,
+                'circle-color': 'rgb(0, 255, 174)'
+            }
+        }
+    ]
+});
+
+// Map controlls
+map.addControl(draw, 'top-left');
+map.on('draw.create', (e) => {
+handleDraw(e, map, draw, currentDrawStyle)
+});
+map.on('draw.update', (e) => {
+handleDraw(e, map, draw, currentDrawStyle)
+});
+map.on('click', (e) => {
+    hideArrowEditor();
+    hideFrontlineEditor();
+    handleClick(e, ARROW, arrowParamsMap, showArrowEditor, map, draw, currentDrawStyle);
+    handleClick(e, FRONTLINE, frontlineParamsMap, showFrontlineEditor, map, draw, currentDrawStyle);
+});
+map.dragPan.enable();
+
+export function updateButtonStyles(drawStyle) {
+    currentDrawStyle = drawStyle;
+    const buttonsContainer = document.getElementById('drawStyleButtons');
+    Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => {
+        const isSelected = btn.getAttribute('data-style') === drawStyle;
+        btn.style.backgroundColor = isSelected ? '#333' : '#f0f0f0';
+        btn.style.color = isSelected ? '#fff' : '#000';
+    });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    document.getElementById('removeArrow').addEventListener('click', () => {
+        handleDelete(ARROW, map, draw);
+    });
+
+    document.getElementById('removeFrontline').addEventListener('click', () => {
+        handleDelete(FRONTLINE, map, draw);
+    });
+
+    document.getElementById('applyArrowChanges').addEventListener('click', () => {
+        if (!currentFeature) return;
+        
+        const coords = currentFeature.geometry.coordinates;
+        const id = currentFeature.id;
+        
+        const splineStep = parseFloat(document.getElementById('splineStep').value);
+        const offsetDistance = parseFloat(document.getElementById('offsetDistance').value);
+        const range = parseFloat(document.getElementById('range').value);
+        const minValue = parseFloat(document.getElementById('minValue').value);
+        const widthArrow = parseFloat(document.getElementById('widthArrow').value);
+        const lengthArrow = parseFloat(document.getElementById('lengthArrow').value);
+        const calculation = parseInt(document.getElementById('styleArrow').value);
+
+        const fillColor = document.getElementById('arrowFillColor').value;
+        const outlineColor = document.getElementById('arrowOutlineColor').value;
+        const opacity = parseFloat(document.getElementById('arrowOpacity').value);
+
+        const paintOptions = {
+            'fill-color': fillColor,
+            'fill-outline-color': outlineColor,
+            'fill-opacity': opacity
+        };
+
+        arrowParamsMap.set(id, {
+            splineStep,
+            offsetDistance,
+            calculation,
+            range,
+            minValue,
+            widthArrow,
+            lengthArrow,
+            paintOptions 
+        });
+
+        const arrowGeoJSON = getArrowPolygon({
+            points: coords,
+            splineStep,
+            offsetDistance
+        }, {
+            calculation,
+            range,
+            minValue
+        }, {
+            widthArrow,
+            lengthArrow
+        });
+
+        //ARROW
+        const arrowLayerId = ARROW + "-" + id;
+        if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
+        if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
+
+        drawOnMap(arrowGeoJSON, ARROW + "-" + id, paintOptions, map);
+
+        const allFeatures = draw.getAll().features;
+        setCurrentFeature(allFeatures.find(f => f.id === id));
+    });
+
+    document.getElementById('applyFrontlineChanges').addEventListener('click', () => {
+        if (!currentFeature) return;
+
+        const coords = currentFeature.geometry.coordinates;
+        const id = currentFeature.id;
+
+        const splineStep = parseFloat(document.getElementById('splineStepFrontline').value);
+        const offsetDistance = parseFloat(document.getElementById('offsetDistanceFrontline').value);
+        const style = parseInt(document.getElementById('styleFrontline').value);
+
+        const length = parseFloat(document.getElementById('protrusionLength').value);
+        const startSize = parseFloat(document.getElementById('protrusionStartSize').value);
+        const endSize = parseFloat(document.getElementById('protrusionEndSize').value);
+        const gap = parseFloat(document.getElementById('protrusionGap').value);
+
+        const fillColorLeft = document.getElementById('frontlineFillColorLeft').value;
+        const outlineColorLeft = document.getElementById('frontlineOutlineColorLeft').value;
+        const opacityLeft = parseFloat(document.getElementById('frontlineOpacityLeft').value);
+        const paintOptionsLeft = {
+            'fill-color': fillColorLeft,
+            'fill-outline-color': outlineColorLeft,
+            'fill-opacity': opacityLeft
+        };
+
+        const fillColorRight = document.getElementById('frontlineFillColorRight').value;
+        const outlineColorRight = document.getElementById('frontlineOutlineColorRight').value;
+        const opacityRight = parseFloat(document.getElementById('frontlineOpacityRight').value);
+        const paintOptionsRight = {
+            'fill-color': fillColorRight,
+            'fill-outline-color': outlineColorRight,
+            'fill-opacity': opacityRight
+        };
+
+        frontlineParamsMap.set(id, {
+            splineStep,
+            offsetDistance,
+            style,
+            protrusion: {
+                length,
+                startSize,
+                endSize,
+                gap
+            },
+            paintOptionsLeft,
+            paintOptionsRight
+        });
+
+        const frontlineData = {
+            points: coords,
+            splineStep,
+            offsetDistance,
+            style
+        };
+
+        const protrusionData = frontlineParamsMap.get(id).protrusion;
+        const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
+        let polygonToDraw = frontlineGeoJSON;
+
+        if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {
+            polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
+        }
+        if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
+            let polygonToDrawLeft = frontlineGeoJSON.leftPoly;
+            let polygonToDrawRight = frontlineGeoJSON.rightPoly;
+            const frontlineLayerId = FRONTLINE + "-" + id;
+
+            if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
+            if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
+
+            drawOnMap(polygonToDrawLeft, FRONTLINE + "-" + id + ADDITIONAL_SIDE, paintOptionsLeft, map);
+            drawOnMap(polygonToDrawRight, FRONTLINE + "-" + (id), paintOptionsRight, map);
+            
+            const allFeatures = draw.getAll().features;
+            setCurrentFeature(allFeatures.find(f => f.id === id));
+
+            return;
+        }
+
+        const frontlineLayerId = FRONTLINE + "-" + id;
+        if (map.getLayer(frontlineLayerId + ADDITIONAL_SIDE)) map.removeLayer(frontlineLayerId + ADDITIONAL_SIDE);
+        if (map.getSource(frontlineLayerId + ADDITIONAL_SIDE)) map.removeSource(frontlineLayerId + ADDITIONAL_SIDE);
+        if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
+        if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
+        
+        let paintOptions;
+        if(frontlineData.style == LEFT_SIDE){
+            paintOptions = paintOptionsLeft;
+        }else if(frontlineData.style == RIGHT_SIDE)
+        {
+            paintOptions = paintOptionsRight;
+        }
+
+        drawOnMap(polygonToDraw, FRONTLINE + "-" + id, paintOptions, map);
+
+        const allFeatures = draw.getAll().features;
+        setCurrentFeature(allFeatures.find(f => f.id === id));
+    });
+
+    const buttonsContainer = document.getElementById('drawStyleButtons');
+    buttonsContainer.addEventListener('click', (event) => {
+        if (event.target.tagName !== 'BUTTON') return;
+        
+        Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => btn.classList.remove('active'));
+        
+        event.target.classList.add('active');
+        
+        currentDrawStyle = event.target.getAttribute('data-style');
+        updateButtonStyles(currentDrawStyle);
+    });
+
+    updateButtonStyles(currentDrawStyle);
+});

DrawingFunctions.js

@@ -0,0 +1,285 @@
+import { getArrowPolygon } from "athena-utils/shape/Arrow.js";
+import { ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_EXPONENTIAL } from "athena-utils/shape/Arrow.js";
+import { getFrontline } from "./Frontline.js";
+import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
+import { updateButtonStyles } from "./Drawing.js";
+import { ARROW, FRONTLINE, ADDITIONAL_SIDE } from "./Drawing.js";
+
+const DEFAULT_ARROW_PARAMS = {
+    splineStep: 20,
+    offsetDistance: 12000,
+    calculation: ARROW_BODY_STYLE_LINEAR,
+    range: 1,
+    minValue: 0.1,
+    widthArrow: 5,
+    lengthArrow: 8,
+    paintOptions: {
+        "fill-color": "#0099ff",
+        "fill-outline-color": "#005588",
+        "fill-opacity": 0.6
+    }
+};
+
+const DEFAULT_FRONTLINE_PARAMS = {
+    splineStep: 0.08,
+    offsetDistance: 10000,
+    style: LEFT_SIDE,
+    protrusion: {
+        length: 15000,
+        startSize: 5000,
+        endSize: 500,
+        gap: 15000
+    },
+    paintOptionsLeft: {
+        "fill-color": "#00ff37",
+        "fill-outline-color": "#008809",
+        "fill-opacity": 0.6
+    },
+    paintOptionsRight: {
+        "fill-color": "#0011ff",
+        "fill-outline-color": "#002b88",
+        "fill-opacity": 0.6
+    }
+};
+
+export let currentFeature = null;
+
+export function setCurrentFeature(feature) {
+    currentFeature = feature;
+}
+
+export const arrowParamsMap = new Map();
+export const frontlineParamsMap = new Map();
+
+export function handleDraw(e, myMap, myDraw, drawStyle) {
+    const feature = e.features[0];
+    const coords = feature.geometry.coordinates;
+    const id = feature.id;
+
+    if (drawStyle === ARROW) {
+        DrawArrow(coords, id, myMap, myDraw);
+    } else if (drawStyle === FRONTLINE) {
+        DrawFrontline(coords, id, myMap, myDraw);
+    }
+}
+
+export function handleClick(click, prefix, paramsMap, showEditorFunction, myMap, myDraw, drawStyle) {
+    const features = myMap.queryRenderedFeatures(click.point, {
+        layers: myMap.getStyle().layers
+            .filter(l => l.id.startsWith(prefix + "-"))
+            .map(l => l.id)
+    });
+
+    if (features.length === 0) return;
+
+    drawStyle = prefix;
+    updateButtonStyles(drawStyle);
+    const feature = features[0];
+    const featureId = feature.layer.id.replace(prefix + "-", '');
+
+    const allFeatures = myDraw.getAll().features;
+    currentFeature = allFeatures.find(f => f.id === featureId);
+
+    if (currentFeature) {
+        const params = paramsMap.get(featureId);
+        if (params) {
+            showEditorFunction(params);
+        }
+        myDraw.changeMode('direct_select', { featureId: featureId });
+    }
+}
+
+function DrawArrow(coordinates, polygonId, myMap, myDraw) {
+    if (!arrowParamsMap.has(polygonId)) {
+        arrowParamsMap.set(polygonId, structuredClone(DEFAULT_ARROW_PARAMS));
+    }
+
+    const params = arrowParamsMap.get(polygonId);
+    const arrowGeoJSON = getArrowPolygon(
+        {
+            points: coordinates,
+            splineStep: params.splineStep,
+            offsetDistance: params.offsetDistance
+        },
+        {
+            calculation: params.calculation,
+            range: params.range,
+            minValue: params.minValue
+        },
+        {
+            widthArrow: params.widthArrow,
+            lengthArrow: params.lengthArrow
+        }
+    );
+    updatePolygonOnMap(ARROW, polygonId, drawOnMap, arrowGeoJSON, params.paintOptions, myMap, myDraw);
+}
+
+function DrawFrontline(coordinates, polygonId, myMap, myDraw) {
+    if (!frontlineParamsMap.has(polygonId)) {
+        frontlineParamsMap.set(polygonId, structuredClone(DEFAULT_FRONTLINE_PARAMS));
+    }
+
+    const params = frontlineParamsMap.get(polygonId);
+    const frontlineGeoJSON = getFrontline(
+        {
+            points: coordinates,
+            splineStep: params.splineStep,
+            offsetDistance: params.offsetDistance,
+            style: params.style
+        },
+        params.protrusion
+    );
+
+    let polygonToDraw = frontlineGeoJSON;
+
+    // Only one side
+    if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {
+        polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
+    }
+
+    // Both sides
+    if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
+        updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsLeft, myMap, myDraw);
+
+        let additionalPolygonToDraw = frontlineGeoJSON.rightPoly;
+
+        drawOnMap(additionalPolygonToDraw, FRONTLINE + "-" + (polygonId + ADDITIONAL_SIDE), params.paintOptionsRight, myMap, myDraw);
+        return;
+    }
+
+    if (params.style == 1){ // LEFT_SIDE
+        updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsLeft, myMap, myDraw);
+    }else if(params.style == 2){ // RIGHT_SIDE
+        updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsRight, myMap, myDraw);
+    }
+}
+
+function updatePolygonOnMap(prefix, polygonId, drawFunction, geojson, paintOptions, myMap, myDraw) {
+    const layerId = prefix + "-" + polygonId;
+
+    if (myMap.getLayer(layerId)) myMap.removeLayer(layerId);
+    if (myMap.getSource(layerId)) myMap.removeSource(layerId);
+
+    drawFunction(geojson, layerId, paintOptions, myMap);
+
+    const allFeatures = myDraw.getAll().features;
+    currentFeature = allFeatures.find(f => f.id === polygonId);
+}
+
+export function drawOnMap(frontlineGeoJSON, id, paintOptions = {}, myMap) {
+    if (myMap.getLayer(id)) myMap.removeLayer(id);
+    if (myMap.getSource(id)) myMap.removeSource(id);
+
+    myMap.addSource(id, {
+        type: 'geojson',
+        data: frontlineGeoJSON
+    });
+
+    myMap.addLayer({
+        id: id,
+        type: 'fill',
+        source: id,
+        paint: {
+            'fill-color': paintOptions['fill-color'],
+            'fill-opacity': paintOptions['fill-opacity'],
+            'fill-outline-color': paintOptions['fill-outline-color']
+        }
+    });
+}
+
+
+export function handleDelete(polygonType, myMap, myDraw)
+{
+    if (!currentFeature) return;
+
+    const id = currentFeature.id;
+    myDraw.delete(id);
+
+    //ARROW
+    if(polygonType == ARROW){
+        const arrowLayerId = polygonType + "-" + id;
+        DeleteFromMap(arrowLayerId, id, myMap);
+    }
+
+    //Frontline
+    if(polygonType == FRONTLINE){
+        const frontlineLayerId = polygonType + "-" + id;
+
+        if (frontlineParamsMap.get(id).style == 3){ //BOTH_SIDES
+            const frontlineLayerIdB = polygonType + "-" + (id + ADDITIONAL_SIDE);
+
+            DeleteFromMap(frontlineLayerId, id, myMap);
+            DeleteFromMap(frontlineLayerIdB, id + ADDITIONAL_SIDE, myMap);
+            hideArrowEditor();
+            hideFrontlineEditor();
+            return;
+        }
+
+        DeleteFromMap(frontlineLayerId, id, myMap);
+    }
+
+    hideArrowEditor();
+    hideFrontlineEditor();
+}
+
+function DeleteFromMap(layerId, FeatureId, myMap){
+    if (myMap.getLayer(layerId)) myMap.removeLayer(layerId);
+    if (myMap.getSource(layerId)) myMap.removeSource(layerId);
+
+    arrowParamsMap.delete(FeatureId);
+}
+
+export function showArrowEditor(params) {
+    const popup = document.getElementById('arrow-editor');
+    popup.style.display = 'block';
+    popup.style.left = '10px';
+    popup.style.top = '70px';
+
+    document.getElementById('splineStep').value = params.splineStep;
+    document.getElementById('offsetDistance').value = params.offsetDistance;
+    document.getElementById('range').value = params.range;
+    document.getElementById('minValue').value = params.minValue;
+    document.getElementById('widthArrow').value = params.widthArrow;
+    document.getElementById('lengthArrow').value = params.lengthArrow;
+    document.getElementById('styleArrow').value = params.calculation;
+    
+    document.getElementById('arrowFillColor').value = params.paintOptions["fill-color"];
+    document.getElementById('arrowOutlineColor').value = params.paintOptions["fill-outline-color"];
+    parseFloat(document.getElementById('arrowOpacity').value = params.paintOptions["fill-opacity"]);
+}
+
+export function hideArrowEditor() {
+    const popup = document.getElementById('arrow-editor');
+    popup.style.display = 'none';
+    currentFeature = null;
+}
+
+export function showFrontlineEditor(params) {
+    const popup = document.getElementById('frontline-editor');
+    popup.style.display = 'block';
+    popup.style.left = '10px';
+    popup.style.top = '70px';
+
+    document.getElementById('splineStepFrontline').value = params.splineStep;
+    document.getElementById('offsetDistanceFrontline').value = params.offsetDistance;
+    document.getElementById('styleFrontline').value = params.style;
+
+    document.getElementById('protrusionLength').value = params.protrusion.length;
+    document.getElementById('protrusionStartSize').value = params.protrusion.startSize;
+    document.getElementById('protrusionEndSize').value = params.protrusion.endSize;
+    document.getElementById('protrusionGap').value = params.protrusion.gap;
+    
+    document.getElementById('frontlineFillColorLeft').value = params.paintOptionsLeft["fill-color"];
+    document.getElementById('frontlineOutlineColorLeft').value = params.paintOptionsLeft["fill-outline-color"];
+    parseFloat(document.getElementById('frontlineOpacityLeft').value = params.paintOptionsLeft["fill-opacity"]);
+
+    document.getElementById('frontlineFillColorRight').value = params.paintOptionsRight["fill-color"];
+    document.getElementById('frontlineOutlineColorRight').value = params.paintOptionsRight["fill-outline-color"];
+    parseFloat(document.getElementById('frontlineOpacityRight').value = params.paintOptionsRight["fill-opacity"]);
+}
+
+export function hideFrontlineEditor() {
+    const popup = document.getElementById('frontline-editor');
+    popup.style.display = 'none';
+    currentFeature = null;
+}

Frontline.js

@@ -0,0 +1,205 @@
+import { cubicInterpolate } from "athena-utils/shape/Arrow.js";
+import * as turf from '@turf/turf';
+
+export const LEFT_SIDE = 1;
+export const RIGHT_SIDE = 2;
+export const BOTH_SIDES = 3;
+export const METERS = 'meters';
+
+/**
+ * @param {Object, Object} frontlineData, protrusionData - Object containing parameters for the frontline.
+ * @param {{x: number, y: number}[]} frontlineData.points - List of points defining the base path of the frontline.
+ * @param {number} frontlineData.splineStep - The resolution of the spline interpolation (smaller = smoother curve).
+ * @param {number} frontlineData.spacing - Distance between interpolated points along the path.
+ * @param {number} frontlineData.offsetDistance - Distance to offset the entire shape from the base path.
+ * @param {string} frontlineData.style - Which side to draw the protrusions on (e.g., "LEFT_SIDE" or "RIGHT_SIDE").
+ * @param {number} protrusionData.Length - Length of each individual protrusion element.
+ * @param {number} protrusionData.StartSize - Width of protrusion at the start (base).
+ * @param {number} protrusionData.EndSize - Width of protrusion at the end (tip).
+ * @param {number} protrusionData.Gap - Distance between the starts of each protrusion.
+ *
+ */
+export function getFrontline(frontlineData, protrusionData = null) {
+    if (!frontlineData || !(frontlineData.points) || frontlineData.points.length === 0) {
+        console.warn("getFrontline: Invalid frontlineData or empty points array.");
+        return [];
+    }
+
+    const style = frontlineData.style ?? LEFT_SIDE;
+    const splinePoints = computeSplinePoints(frontlineData.points, frontlineData.splineStep);
+
+    let bodyPolygonLeft = [];
+    let bodyPolygonRight = [];
+
+    if (style === BOTH_SIDES) {
+        const left = computeSides(splinePoints, frontlineData.offsetDistance, LEFT_SIDE);
+        bodyPolygonLeft = [...left.leftSidePoints, ...left.rightSidePoints.reverse()];
+
+        const right = computeSides(splinePoints, frontlineData.offsetDistance, RIGHT_SIDE);
+        bodyPolygonRight = [...right.leftSidePoints, ...right.rightSidePoints.reverse()];
+    }
+
+    const { leftSidePoints, rightSidePoints } = computeSides(splinePoints, frontlineData.offsetDistance, frontlineData.style);
+    const bodyPolygon = [...leftSidePoints, ...rightSidePoints.reverse()];
+
+    if (protrusionData == null) {
+        let polygonCoords;
+
+        if (style === BOTH_SIDES) {
+            polygonCoords = [
+                ...bodyPolygonLeft,
+                ...bodyPolygonRight,
+                bodyPolygonLeft[0]
+            ];
+        } else {
+            polygonCoords = [
+                ...bodyPolygon,
+                bodyPolygon[0]
+            ];
+        }
+
+        return turf.polygon([polygonCoords]);
+    }
+    
+    const prostrusionsData = (points, sidePoints) => {
+        const coords = [...points, points[0]];
+        const basePoly = turf.polygon([coords]);
+        return constructProstrusions(basePoly, sidePoints, protrusionData, frontlineData);
+    };
+
+    if (style === LEFT_SIDE) {
+        return {
+            rightPoly: null,
+            leftPoly: prostrusionsData(bodyPolygon, leftSidePoints)
+        };
+    } else if (style === RIGHT_SIDE) {
+        return {
+            rightPoly: prostrusionsData(bodyPolygon, rightSidePoints),
+            leftPoly: null
+        };
+    } else if (style === BOTH_SIDES) {
+         return {
+            rightPoly: prostrusionsData(bodyPolygonRight, rightSidePoints),
+            leftPoly: prostrusionsData(bodyPolygonLeft, leftSidePoints),
+        };
+    }
+}
+
+function constructProstrusions(mainPoly, points, protrusionData, frontlineData) {
+   
+    const protrusions = computeProtrusion(points, protrusionData, frontlineData.offsetDistance);
+
+    for(let i = 0; i <= protrusions.length -1 ; i++)
+    {
+        mainPoly = turf.union(turf.featureCollection([mainPoly, protrusions[i]]));
+    }
+
+    return mainPoly;
+}
+
+function computeSplinePoints(points, density) {
+    if (points.length < 2) return points;
+    const splinePoints = [];
+
+    for (let i = 0; i < points.length - 1; i++) {
+        const p0 = points[i === 0 ? i : i - 1];
+        const p1 = points[i];
+        const p2 = points[i + 1];
+        const p3 = points[i + 2] || p2;
+        for (let t = 0; t <= 1; t += density) {
+            const lon = cubicInterpolate([p0[0], p1[0], p2[0], p3[0]], t);
+            const lat = cubicInterpolate([p0[1], p1[1], p2[1], p3[1]], t);
+            splinePoints.push([lon, lat]);
+        }
+    }
+
+    splinePoints.push(points[points.length - 1]);
+    return splinePoints;
+}
+
+function computeSides(splinePoints, offsetDistance, style = LEFT_SIDE) {
+    let leftSidePoints = [];
+    let rightSidePoints = [];
+
+    for (let i = 1; i < splinePoints.length; i++) {
+        const previousPoint = splinePoints[i - 1];
+        const currentPoint = splinePoints[i];
+
+        const bearing = turf.bearing(turf.point(previousPoint), turf.point(currentPoint));
+
+        const leftPoint = style === RIGHT_SIDE
+            ? currentPoint
+            : turf.destination(turf.point(currentPoint), offsetDistance, bearing - 90, { units: METERS }).geometry.coordinates;
+
+        const rightPoint = style === LEFT_SIDE
+            ? currentPoint
+            : turf.destination(turf.point(currentPoint), offsetDistance, bearing + 90, { units: METERS }).geometry.coordinates;
+
+        leftSidePoints.push(leftPoint);
+        rightSidePoints.push(rightPoint);
+    }
+    
+    return { leftSidePoints, rightSidePoints };
+}
+
+function computeProtrusion(leftSidePoints, protrusionData, sideOffset) {
+    const protrusions = [];
+    const segments = [];
+    let totalLength = 0;
+    
+    for (let i = 0; i < leftSidePoints.length - 1; i++) {
+        const p0 = leftSidePoints[i];
+        const p1 = leftSidePoints[i + 1];
+        const length = turf.distance(turf.point(p0), turf.point(p1), { units: METERS });
+        const bearing = turf.bearing(turf.point(p0), turf.point(p1));
+        segments.push({ p0, p1, length, bearing });
+        totalLength += length;
+    }
+
+    const positions = [];
+    for (let d = 0; d <= totalLength - (protrusionData.gap + protrusionData.startSize); d += protrusionData.gap) {
+        positions.push(d + protrusionData.startSize);
+    }
+    
+    if (positions[positions.length - 1] < totalLength) {
+        positions.push(totalLength - protrusionData.startSize);
+    }
+
+    let currentSegmentIndex = 0;
+    let currentSegmentPos = 0;
+
+    for (const distance of positions) {
+        while (currentSegmentIndex < segments.length && currentSegmentPos + segments[currentSegmentIndex].length < distance) {
+            currentSegmentPos += segments[currentSegmentIndex].length;
+            currentSegmentIndex++;
+        }
+
+        if (currentSegmentIndex >= segments.length) {
+            break;
+        }
+        
+        const seg = segments[currentSegmentIndex];
+        const localDistance = distance - currentSegmentPos;
+
+        const pointOnSegment = turf.along(turf.lineString([seg.p0, seg.p1]), localDistance, { units: METERS }).geometry.coordinates;
+        const thicknessOffset = sideOffset * 0.1;
+
+        const adjustedPoint = movePoint(pointOnSegment, thicknessOffset, seg.bearing + 90);
+        const centerPoint = movePoint(adjustedPoint, protrusionData.length, seg.bearing - 90);
+
+
+        const corner1 = movePoint(adjustedPoint, -protrusionData.startSize, seg.bearing);
+        const corner2 = movePoint(adjustedPoint, protrusionData.startSize, seg.bearing);
+        const corner3 = movePoint(centerPoint, protrusionData.endSize, seg.bearing);
+        const corner4 = movePoint(centerPoint, -protrusionData.endSize, seg.bearing);
+
+        const polygon = turf.polygon([[corner1, corner2, corner3, corner4, corner1]]);
+        protrusions.push(polygon);
+    }
+
+    return protrusions;
+}
+
+function movePoint(point, distance, bearing) {
+    return turf.destination(turf.point(point), distance, bearing, { units: METERS }).geometry.coordinates;
+}

Map.js

@@ -0,0 +1,740 @@
+mapboxgl.accessToken = 'pk.eyJ1Ijoib3V0ZG9vcm1hcHBpbmdjb21wYW55IiwiYSI6ImNqYmh3cDdjYzNsMnozNGxsYzlvMmk2bTYifQ.QqcZ4LVoLWnXafXdjZxnZg';
+    const map = new mapboxgl.Map({
+        container: 'map',
+        center: [20, 80],
+        zoom: 4
+    });
+
+import * as turf from "@turf/turf";
+
+import { getArrowPolygon } from "./Arrow.js";
+import { ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_EXPONENTIAL } from "./Arrow.js";
+import { getCirclePolygon } from "./BasicShapes.js";
+import { getRectanglePolygon } from "./BasicShapes.js";
+import { getFrontline } from "./Frontline.js";
+import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "./Frontline.js";
+// Polygon merge using Turf library
+import {mergeTurfPolygons} from "./Polygon.js";
+import {addTurfPolygonToMerge} from "./Polygon.js";
+import {toTurfPolygon} from "./Polygon.js";
+
+const circleCenter = {x:320, y:180};
+const circleRadius = 70;
+const circleDensity = 15;
+
+const circleCenterB = {x:400, y:280};
+const circleRadiusB = 70;
+const circleDensityB = 15;
+
+const rectangleCenter= {x:100, y:300};
+const rectangleSideA = 70;
+const rectangleSideB = 200;
+const rectangleRotation = 40;
+
+const frontlinePointsA = [
+    { x: 120, y: 400 },
+    { x: 200, y: 100 },
+    { x: 350, y: 200 },
+    { x: 350, y: 400 },
+    { x: 450, y: 480 },
+    { x: 550, y: 440 },
+    { x: 600, y: 300 },
+];
+
+const frontlinePointsB = [
+    { x: 420, y: 280 },
+    { x: 430, y: 380 },
+    { x: 500, y: 400 },
+    { x: 520, y: 300 },
+];
+
+const frontlinePointsC = [
+    { x: 450, y: 200 },
+    { x: 500, y: 250 },
+    { x: 550, y: 250 },
+    { x: 550, y: 200 }
+];
+
+
+const frontlineDataA = {
+    points: frontlinePointsA,
+    splineStep: 0.08,
+    spacing: 10,
+    offsetDistance: 10,
+    protrusionLength: 15,
+    protrusionStartSize: 5,
+    protrusionEndSize: 2,
+    protrusionGap: 20,
+    style: LEFT_SIDE,
+  };
+
+  const frontlineDataB = {
+    points: frontlinePointsB,
+    splineStep: 0.02,
+    spacing: 10,
+    offsetDistance: 10,
+    protrusionLength: 15,
+    protrusionStartSize: 5,
+    protrusionEndSize: 5,
+    protrusionGap: 20,
+    style: RIGHT_SIDE,
+  };
+
+  const frontlineDataC = {
+    points: frontlinePointsC,
+    splineStep: 0.02,
+    spacing: 10,
+    offsetDistance: 10,
+    protrusionLength: 15,
+    protrusionStartSize: 5,
+    protrusionEndSize: 0,
+    protrusionGap: 20,
+    style: BOTH_SIDES,
+  };
+
+/*
+const arrowPolygonA = getArrowPolygon(arrowDataA, styleA, arrowHeadDataA);
+const arrowPolygonB = getArrowPolygon(arrowDataB, styleB, arrowHeadDataB);
+const arrowPolygonC = getArrowPolygon(arrowDataC, styleC);
+
+const circlePolygon = getCirclePolygon(circleCenter, circleRadius, circleDensity);
+const circlePolygonB = getCirclePolygon(circleCenterB, circleRadiusB, circleDensityB);
+const rectanglePolygon = getRectanglePolygon(rectangleCenter, rectangleSideA, rectangleSideB, rectangleRotation);
+
+const mergedTurfPoly = mergeTurfPolygons(arrowPolygonA, arrowPolygonC);
+const mergedTurfPolyAll = addTurfPolygonToMerge(mergedTurfPoly, arrowPolygonB);
+
+const mergedTurfPolyRectangle = addTurfPolygonToMerge(mergedTurfPolyAll, rectanglePolygon);
+const mergedRectangle = mergeTurfPolygons(circlePolygon, circlePolygonB);
+
+const rectanglePoly = getRectanglePolygon(circleCenter, rectangleSideA, rectangleSideB, rectangleRotation*-1);
+const rectangleToTurfPoly = toTurfPolygon(rectanglePoly);
+
+const frontlinePolygonA = getFrontline(frontlineDataA);
+let frontlinePolygonMergedA = mergeTurfPolygons(frontlinePolygonA.body,frontlinePolygonA.protrusions[0]);
+for (let i = 1; i < frontlinePolygonA.protrusions.length; i++) 
+{
+    frontlinePolygonMergedA = addTurfPolygonToMerge(frontlinePolygonMergedA, frontlinePolygonA.protrusions[i]);
+}
+
+const frontlinePolygonB = getFrontline(frontlineDataB);
+let frontlinePolygonMergedB = mergeTurfPolygons(frontlinePolygonB.body,frontlinePolygonB.protrusions[0]);
+for (let i = 1; i < frontlinePolygonB.protrusions.length; i++) 
+{
+    frontlinePolygonMergedB = addTurfPolygonToMerge(frontlinePolygonMergedB, frontlinePolygonB.protrusions[i]);
+}
+
+const frontlinePolygonC = getFrontline(frontlineDataC);
+
+let frontlinePolygonMergedLeft = mergeTurfPolygons(frontlinePolygonC.bodyLeft, frontlinePolygonC.protrusionsLeft[0]);
+for (let i = 1; i < frontlinePolygonC.protrusionsLeft.length; i++) {
+    frontlinePolygonMergedLeft = addTurfPolygonToMerge(frontlinePolygonMergedLeft, frontlinePolygonC.protrusionsLeft[i]);
+}
+
+let frontlinePolygonMergedRight = mergeTurfPolygons(frontlinePolygonC.bodyRight, frontlinePolygonC.protrusionsRight[0]);
+for (let i = 1; i < frontlinePolygonC.protrusionsRight.length; i++) {
+    frontlinePolygonMergedRight = addTurfPolygonToMerge(frontlinePolygonMergedRight, frontlinePolygonC.protrusionsRight[i]);
+}*/
+
+//const circleGeoJSON = getCircleGeoJSON({x: 20, y: 80}, 2, 50, map);
+
+const pointsB = [
+    { x: 70, y: 38 },
+    { x: 71, y: 45},
+    { x: 65, y: 50 },
+    { x: 70, y: 53}
+];
+
+const arrowDataB = {
+    points: pointsB,
+    splineStep: 0.01,
+    spacing: 0.01,
+    offsetDistance: 1
+  };
+  const styleB = {
+    calculation: ARROW_BODY_STYLE_LINEAR,
+    range: 1,
+    minValue: 0.1
+  };
+  const arrowHeadDataB = {
+    widthArrow: 1,
+    lengthArrow: 1
+  };
+
+const arrowPolygonB = getArrowPolygon(arrowDataB, styleB, arrowHeadDataB);
+  const pointsC= [
+    { x: 50, y: 38 },
+    { x: 51, y: 45},
+    { x: 45, y: 50 },
+    { x: 48, y: 55}
+];
+
+const arrowDataC = {
+    points: pointsC,
+    splineStep: 0.02,
+    spacing: 1,
+    offsetDistance: 1
+  };
+  const styleC = {
+    calculation: ARROW_BODY_STYLE_LINEAR,
+    range: 1,
+    minValue: 0.1
+  };
+  const arrowHeadDataC = {
+    widthArrow: 1,
+    lengthArrow: 1
+  };
+
+const arrowPolygonC = getArrowPolygon(arrowDataC, styleC, arrowHeadDataC);
+
+const points = [
+    { x: 80, y: 20 },
+    { x: 81, y: 22},
+    { x: 82, y: 28 },
+    { x: 81, y: 30},
+    { x: 80, y: 20}
+];
+
+// Turf polygon
+const turfPolygon = turf.polygon([[
+      [20, 80],
+      [22, 81],
+      [28, 82],
+      [30, 81],
+      [20, 80]
+    ]]);
+
+  const pointsA= [
+    { x: 80, y: 38 },
+    { x: 81, y: 45},
+    { x: 75, y: 50 },
+    { x: 78, y: 55}
+];
+
+const arrowDataA = {
+    points: pointsA,
+    splineStep: 0.2,
+    spacing: 3,
+    offsetDistance: 1
+  };
+  const styleA = {
+    calculation: ARROW_BODY_STYLE_LINEAR,
+    range: 1,
+    minValue: 0.1
+  };
+  const arrowHeadDataA = {
+    widthArrow: 1,
+    lengthArrow: 1
+  };
+
+const arrowPolygonA = getArrowPolygon(arrowDataA, styleA, arrowHeadDataA);
+
+const latLonGrid = generateLatLonGrid(5);
+
+
+function createIsoscelesTriangle(center, baseLengthMeters, heightMeters, bearing = 0) {
+    const halfBase = baseLengthMeters / 2;
+
+    // Výpočet bodů základny (levý a pravý bod)
+    const leftBase = turf.destination(center, halfBase, bearing - 90, { units: 'meters' });
+    const rightBase = turf.destination(center, halfBase, bearing + 90, { units: 'meters' });
+
+    // Výpočet vrcholu trojúhelníku – směr daný bearing (nahoru např. 0°)
+    const apex = turf.destination(center, heightMeters, bearing, { units: 'meters' });
+
+    const triangle = turf.polygon([[
+        leftBase.geometry.coordinates,
+        rightBase.geometry.coordinates,
+        apex.geometry.coordinates,
+        leftBase.geometry.coordinates // Uzavření polygonu
+    ]]);
+
+    return triangle;
+}
+
+
+
+
+
+function cubicInterpolate(p, x) {
+    return p[1] + 0.5 * x * (p[2] - p[0] + x * (2.0 * p[0] - 5.0 * p[1] + 4.0 * p[2] - p[3] + x * (3.0 * (p[1] - p[2]) + p[3] - p[0])));
+}
+
+function interpolatePointsCatmullRom(points, segments = 10) {
+        if (points.length < 2) return points;
+
+        const extended = [points[0], ...points, points[points.length - 1]];
+        const interpolated = [];
+
+        for (let i = 1; i < extended.length - 2; i++) {
+            for (let j = 0; j < segments; j++) {
+                const t = j / segments;
+                const lon = cubicInterpolate([extended[i - 1][0], extended[i][0], extended[i + 1][0], extended[i + 2][0]], t);
+                const lat = cubicInterpolate([extended[i - 1][1], extended[i][1], extended[i + 1][1], extended[i + 2][1]], t);
+                interpolated.push([lon, lat]);
+            }
+        }
+        interpolated.push(points[points.length - 1]);
+        return interpolated;
+    }
+ function computeSideOffsets(points, offsetMeters) {
+        const left = [];
+        const right = [];
+
+        for (let i = 1; i < points.length; i++) {
+            const prev = points[i - 1];
+            const curr = points[i];
+            const bearing = turf.bearing(turf.point(prev), turf.point(curr));
+
+            const leftOffset = turf.destination(turf.point(curr), offsetMeters, bearing - 90, { units: 'meters' });
+            const rightOffset = turf.destination(turf.point(curr), offsetMeters, bearing + 90, { units: 'meters' });
+
+            left.push(leftOffset.geometry.coordinates);
+            right.push(rightOffset.geometry.coordinates);
+        }
+
+        return { left, right };
+    }
+
+    function createIsoscelesTriangleCoords(center, baseLengthMeters, heightMeters, bearing) {
+        const halfBase = baseLengthMeters / 2;
+        const left = turf.destination(center, halfBase, bearing - 90, { units: 'meters' }).geometry.coordinates;
+        const right = turf.destination(center, halfBase, bearing + 90, { units: 'meters' }).geometry.coordinates;
+        const tip = turf.destination(center, heightMeters, bearing, { units: 'meters' }).geometry.coordinates;
+        console.log("Aktuální bod:", left);
+        console.log("Aktuální bod:", right);
+        console.log("Aktuální bod:", tip);
+        return [left, right, tip];
+    }
+
+    function drawArrowPolygon(map, basePoints, offset = 10000) {
+        const smooth = interpolatePointsCatmullRom(basePoints, 20);
+        const { leftSidePoints, rightSidePoints } = computeSidesWGS84(smooth, offset);
+
+        console.log("Aktuální bod:", tip);
+        const end = smooth[smooth.length - 1];
+        const prev = smooth[smooth.length - 2];
+        const bearing = turf.bearing(turf.point(prev), turf.point(end));
+
+        const triangleCoords = createIsoscelesTriangleCoords(turf.point(end), offset * 2, offset * 3, bearing);
+
+        const polygonCoords = [
+            ...leftSidePoints,
+            ...triangleCoords,
+            ...rightSidePoints.reverse(),
+            leftSidePoints[0]
+        ];
+
+        const fullPolygon = turf.polygon([[...polygonCoords]]);
+
+        map.addSource("arrow-shape", {
+            type: "geojson",
+            data: fullPolygon
+        });
+
+        map.addLayer({
+            id: "arrow-shape",
+            type: "fill",
+            source: "arrow-shape",
+            paint: {
+                "fill-color": "#ff0000",
+                "fill-opacity": 0.7
+            }
+        });
+    }
+
+function computeSidesWGS84(points, offsetDistanceMeters = 1000) {
+    const leftSidePoints = [];
+    const rightSidePoints = [];
+
+
+    for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1];
+        const curr = points[i];
+
+        const bearing = turf.bearing(turf.point(prev), turf.point(curr));
+        const leftBearing = bearing - 90;
+        const rightBearing = bearing + 90;
+
+        const leftPoint = turf.destination(turf.point(curr), offsetDistanceMeters, leftBearing, { units: 'meters' });
+        const rightPoint = turf.destination(turf.point(curr), offsetDistanceMeters, rightBearing, { units: 'meters' });
+
+        leftSidePoints.push(leftPoint.geometry.coordinates);
+        rightSidePoints.push(rightPoint.geometry.coordinates);
+    }
+
+    // První bod
+    const first = points[0];
+    const second = points[1];
+    const initialBearing = turf.bearing(turf.point(first), turf.point(second));
+    const leftInitial = turf.destination(turf.point(first), offsetDistanceMeters, initialBearing - 90, { units: 'meters' });
+    const rightInitial = turf.destination(turf.point(first), offsetDistanceMeters, initialBearing + 90, { units: 'meters' });
+
+    leftSidePoints.unshift(leftInitial.geometry.coordinates);
+    rightSidePoints.unshift(rightInitial.geometry.coordinates);
+
+        console.log("Aktuální bod:", leftSidePoints);
+        console.log("Aktuální bod:", rightSidePoints);
+    return {
+        leftSidePoints,
+        rightSidePoints
+    };
+}
+
+function drawSideLines(map, sides, prefix = "arrow-side") {
+    map.addSource(`${prefix}-left`, {
+        type: "geojson",
+        data: turf.lineString(sides.leftSidePoints)
+    });
+
+    map.addLayer({
+        id: `${prefix}-left`,
+        type: "line",
+        source: `${prefix}-left`,
+        paint: {
+            "line-color": "blue",
+            "line-width": 2
+        }
+    });
+
+    map.addSource(`${prefix}-right`, {
+        type: "geojson",
+        data: turf.lineString(sides.rightSidePoints)
+    });
+
+    map.addLayer({
+        id: `${prefix}-right`,
+        type: "line",
+        source: `${prefix}-right`,
+        paint: {
+            "line-color": "green",
+            "line-width": 2
+        }
+    });
+}
+
+function drawSmoothLineThroughPoints(map, points, lineId = "smooth-line") {
+        const smoothPoints = interpolatePointsCatmullRom(points, 20);
+        const line = turf.lineString(smoothPoints);
+
+        map.addSource(lineId, {
+            type: "geojson",
+            data: line
+        });
+
+        map.addLayer({
+            id: lineId,
+            type: "line",
+            source: lineId,
+            paint: {
+                "line-color": "red",
+                "line-width": 3
+            }
+        });
+
+        // Boční linie
+        const sides = computeSidesWGS84(smoothPoints, 10000); // 10 km offset
+        drawSideLines(map, sides, lineId + "-sides");
+
+        // Šipka na konci
+        const lastPoint = smoothPoints[smoothPoints.length - 1];
+        const secondLastPoint = smoothPoints[smoothPoints.length - 2];
+        const bearing = turf.bearing(turf.point(secondLastPoint), turf.point(lastPoint));
+
+        const triangle = createIsoscelesTriangle(turf.point(lastPoint), 60000, 80000, bearing); // 20km základna, 30km výška
+
+        map.addSource(lineId + "-arrow", {
+            type: "geojson",
+            data: triangle
+        });
+
+        map.addLayer({
+            id: lineId + "-arrow",
+            type: "fill",
+            source: lineId + "-arrow",
+            paint: {
+                "fill-color": "#ff0000",
+                "fill-opacity": 0.7
+            }
+        });
+    }
+
+map.on('load', () => {
+
+const points = [
+        [14.42076, 50.08804], // Praha
+        [15.0, 50.0],
+        [16.3725, 48.2082],   // Vídeň
+        [17.0, 49.0],
+        [13.4050, 52.52]      // Berlín
+    ];
+
+
+
+
+ function createIsoscelesTriangle(center, baseLengthMeters, heightMeters, bearing = 0) {
+        const halfBase = baseLengthMeters / 2;
+
+        const leftBase = turf.destination(center, halfBase, bearing - 90, { units: 'meters' });
+        const rightBase = turf.destination(center, halfBase, bearing + 90, { units: 'meters' });
+        const apex = turf.destination(center, heightMeters, bearing, { units: 'meters' });
+
+        return turf.polygon([[
+            leftBase.geometry.coordinates,
+            rightBase.geometry.coordinates,
+            apex.geometry.coordinates,
+            leftBase.geometry.coordinates
+        ]]);
+    }
+
+
+
+
+    
+    const center = turf.point([52.95, 69.95]); // výchozí střed základny
+
+    // Vytvoř polygon trojúhelníku
+    const triangle = createIsoscelesTriangle(center, 40000, 100000, 10); // 2 km základna, 1 km výška, směr 0° (na sever)
+
+    map.addSource("triangle", {
+        type: "geojson",
+        data: triangle
+    });
+
+    map.addLayer({
+        id: "triangle",
+        type: "fill",
+        source: "triangle",
+        paint: {
+            "fill-color": "purple",
+            "fill-opacity": 0.5
+        }
+    });
+
+    map.addLayer({
+        id: "triangle-outline",
+        type: "line",
+        source: "triangle",
+        paint: {
+            "line-color": "#000",
+            "line-width": 2
+        }
+    });
+
+    map.addSource("latLonGrid", {
+    type: "geojson",
+    data: latLonGrid
+});
+
+map.addLayer({
+    id: "latLonGrid",
+    type: "line",
+    source: "latLonGrid",
+    layout: {},
+    paint: {
+        "line-color": "#888",
+        "line-width": 1,
+        "line-opacity": 0.5
+    }
+});
+
+    // Generuj GeoJSON pro kruh
+    const circleGeoJSON = getCirclePolygon([20, 80], 120, 20);
+    const circle = turf.circle([20, 80], 120000, { units: "meters", steps: 64 });
+    const rectangleGeoJSON = getRectanglePolygon([20, 80], 2200, 2200);
+    const fsdafds = toTurfPolygon(points);
+    const arrowBGeoJSON = toTurfPolygon(arrowPolygonB);
+    const arrowCGeoJSON = toTurfPolygon(arrowPolygonC);
+    const arrowAGeoJSON = toTurfPolygon(arrowPolygonA);
+    
+    //console.log(JSON.stringify(arrowAGeoJSON, null, 2));
+    // Arrow
+    // Přidání GeoJSON jako zdroj
+   map.addSource("arrowPolygonA", {
+        type: "geojson",
+        data: arrowAGeoJSON
+    });
+
+    // Vrstva pro výplň polygonu
+    map.addLayer({
+        id: "arrowPolygonA",
+        type: "fill",
+        source: "arrowPolygonA",
+        layout: {},
+        paint: {
+            "fill-color": "pink",
+            "fill-opacity": 0.6
+        }
+    });
+
+    // Vrstva pro obrys polygonu
+    map.addLayer({
+        id: "arrowPolygonA-outline",
+        type: "line",
+        source: "arrowPolygonA",
+        paint: {
+            "line-color": "#000",
+            "line-width": 3
+        }
+    });
+
+     // Arrow
+    // Přidání GeoJSON jako zdroj
+   map.addSource("arrowPolygonB", {
+        type: "geojson",
+        data: arrowBGeoJSON
+    });
+
+    // Vrstva pro výplň polygonu
+    map.addLayer({
+        id: "arrowPolygonB",
+        type: "fill",
+        source: "arrowPolygonB",
+        layout: {},
+        paint: {
+            "fill-color": "yellow",
+            "fill-opacity": 0.6
+        }
+    });
+
+    // Vrstva pro obrys polygonu
+    map.addLayer({
+        id: "arrowPolygonB-outline",
+        type: "line",
+        source: "arrowPolygonB",
+        paint: {
+            "line-color": "#000",
+            "line-width": 3
+        }
+    });
+
+     // Arrow
+    // Přidání GeoJSON jako zdroj
+   map.addSource("arrowPolygonC", {
+        type: "geojson",
+        data: arrowCGeoJSON
+    });
+
+    // Vrstva pro výplň polygonu
+    map.addLayer({
+        id: "arrowPolygonC",
+        type: "fill",
+        source: "arrowPolygonC",
+        layout: {},
+        paint: {
+            "fill-color": "yellow",
+            "fill-opacity": 0.6
+        }
+    });
+
+    // Vrstva pro obrys polygonu
+    map.addLayer({
+        id: "arrowPolygonC-outline",
+        type: "line",
+        source: "arrowPolygonC",
+        paint: {
+            "line-color": "#000",
+            "line-width": 3
+        }
+    });
+
+    // CIRCLE
+    // Přidání GeoJSON jako zdroj
+    map.addSource("circlePolygon", {
+        "type": "geojson",
+        "data": circleGeoJSON
+    });
+
+    // Přidání vrstvy pro vykreslení polygonu
+    map.addLayer({
+        "id": "circlePolygon",
+        "type": "fill",
+        "source": "circlePolygon",
+        "layout": {},
+        "paint": {
+            "fill-color": "blue",
+            "fill-opacity": 0.6
+        }
+    });
+
+    // Přidání outline pro polygon
+    map.addLayer({
+        "id": "circlePolygon-outline",
+        "type": "line",
+        "source": "circlePolygon",
+        "paint": {
+            "line-color": "#000",
+            "line-width": 3
+        }
+    });
+
+    // RECTANGLE
+     map.addSource("rectanglePolygon", {
+        "type": "geojson",
+        "data": rectangleGeoJSON
+    });
+
+    // Přidání vrstvy pro vykreslení polygonu
+    map.addLayer({
+        "id": "rectanglePolygon",
+        "type": "fill",
+        "source": "rectanglePolygon",
+        "layout": {},
+        "paint": {
+            "fill-color": "red",
+            "fill-opacity": 0.6
+        }
+    });
+
+    // Přidání outline pro polygon
+    map.addLayer({
+        "id": "rectanglePolygon-outline",
+        "type": "line",
+        "source": "rectanglePolygon",
+        "paint": {
+            "line-color": "#000",
+            "line-width": 3
+        }
+    });
+});
+
+
+
+function generateLatLonGrid(step = 10) {
+    const features = [];
+
+    // Rovnoběžky (latitudes)
+    for (let lat = -80; lat <= 80; lat += step) {
+        features.push({
+            type: "Feature",
+            geometry: {
+                type: "LineString",
+                coordinates: Array.from({ length: 37 }, (_, i) => [-180 + i * 10, lat])
+            },
+            properties: {
+                type: "latitude",
+                value: lat
+            }
+        });
+    }
+
+    // Poledníky (longitudes)
+    for (let lon = -180; lon <= 180; lon += step) {
+        features.push({
+            type: "Feature",
+            geometry: {
+                type: "LineString",
+                coordinates: Array.from({ length: 17 }, (_, i) => [lon, -80 + i * 10])
+            },
+            properties: {
+                type: "longitude",
+                value: lon
+            }
+        });
+    }
+
+    return {
+        type: "FeatureCollection",
+        features
+    };
+}

MapPolygons.js

@@ -0,0 +1,303 @@
+//import { getArrowPolygon } from "athena-utils/shape/Arrow.js";
+import { getArrowPolygon } from "athena-utils/shape/Arrow.js";
+import { ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_EXPONENTIAL } from "athena-utils/shape/Arrow.js";
+import { getCirclePolygon } from "athena-utils/shape/BasicShapes.js";
+import { getRectanglePolygon } from "athena-utils/shape/BasicShapes.js";
+import { getFrontline } from "athena-utils/shape/Frontline.js";
+import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
+
+mapboxgl.accessToken = 'pk.eyJ1Ijoib3V0ZG9vcm1hcHBpbmdjb21wYW55IiwiYSI6ImNqYmh3cDdjYzNsMnozNGxsYzlvMmk2bTYifQ.QqcZ4LVoLWnXafXdjZxnZg';
+const map = new mapboxgl.Map({
+    container: 'map',
+    center: [10, 50],
+    zoom: 5
+});
+//this is my test push
+//second
+map.on('load', () => {
+    const fullPolygon = getArrowPolygon(arrowData, style, arrowHeadData);
+    const circleGeoJSON = getCirclePolygon(circleCenter, circleRadius, circleDensity);
+    const rectangleGeoJSON = getRectanglePolygon([20, 80], 2200, 2200);
+    const rectangleBGeoJSON = getRectanglePolygon([20, 20], 2200, 2200);
+    const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
+
+    // FRONTLINE
+    if (frontlineData.style === LEFT_SIDE){
+        map.addSource("frontlinePolygon", {
+            "type": "geojson",
+            "data": frontlineGeoJSON.leftPoly
+        });
+    }else if (frontlineData.style === RIGHT_SIDE){
+        map.addSource("frontlinePolygon", {
+            "type": "geojson",
+            "data": frontlineGeoJSON.rightPoly
+        });
+    } else {
+        map.addSource("frontlinePolygon", {
+            "type": "geojson",
+            "data": frontlineGeoJSON.rightPoly
+        });
+        map.addSource("frontlinePolygonSecond", {
+            "type": "geojson",
+            "data": frontlineGeoJSON.leftPoly
+        });
+    }
+
+    map.addLayer({
+        "id": "frontlinePolygon",
+        "type": "fill",
+        "source": "frontlinePolygon",
+        "layout": {},
+        "paint": {
+            "fill-color": "blue",
+            "fill-opacity": 0.6
+        }
+    });
+    map.addLayer({
+        "id": "frontlinePolygon-outline",
+        "type": "line",
+        "source": "frontlinePolygon",
+        "paint": {
+            "line-color": "#000000",
+            "line-width": 2,
+            "line-opacity": 1
+        }
+    });
+
+    if (frontlineData.style === BOTH_SIDES) {
+        map.addLayer({
+            "id": "frontlinePolygonSecond",
+            "type": "fill",
+            "source": "frontlinePolygonSecond",
+            "layout": {},
+            "paint": {
+                "fill-color": "green",
+                "fill-opacity": 0.6
+            }
+        });
+        map.addLayer({
+            "id": "frontlinePolygonSecond-outline",
+            "type": "line",
+            "source": "frontlinePolygonSecond",
+            "paint": {
+                "line-color": "#000000",
+                "line-width": 2,
+                "line-opacity": 1
+            }
+        });
+    }
+    // FRONTLINE
+
+    //ARROW
+    if (fullPolygon.length != 0)
+    {
+        map.addSource("arrow-shape", { type: "geojson", data: fullPolygon });
+
+        map.addLayer({
+            "id": "arrow-shape",
+            "type": "fill",
+            "source": "arrow-shape",
+            "paint": {
+                "fill-color": "#ff0000",
+                "fill-opacity": 0.7
+            }
+        });
+        map.addLayer({
+            "id": "arrow-outline",
+            "type": "line",
+            "source": "arrow-shape",
+            "paint": {
+                "line-color": "#000000",
+                "line-width": 2,
+                "line-opacity": 1
+            }
+        });
+    }
+    //ARROW
+
+    // CIRCLE
+    map.addSource("circlePolygon", {
+        "type": "geojson",
+        "data": circleGeoJSON
+    });
+
+    map.addLayer({
+        "id": "circlePolygon",
+        "type": "fill",
+        "source": "circlePolygon",
+        "layout": {},
+        "paint": {
+            "fill-color": "blue",
+            "fill-opacity": 0.6
+        }
+    });
+    map.addLayer({
+        "id": "circlePolygon-outline",
+        "type": "line",
+        "source": "circlePolygon",
+        "paint": {
+            "line-color": "#000000",
+            "line-width": 2,
+            "line-opacity": 1
+        }
+    });
+    // CIRCLE
+
+    // RECTANGLE
+    map.addSource("rectanglePolygon", {
+        "type": "geojson",
+        "data": rectangleGeoJSON
+    });
+
+    map.addLayer({
+        "id": "rectanglePolygon",
+        "type": "fill",
+        "source": "rectanglePolygon",
+        "layout": {},
+        "paint": {
+            "fill-color": "red",
+            "fill-opacity": 0.6
+        }
+    });
+
+    map.addLayer({
+        "id": "rectanglePolygon-outline",
+        "type": "line",
+        "source": "rectanglePolygon",
+        "paint": {
+            "line-color": "#000",
+            "line-width": 3
+        }
+    });
+
+    map.addSource("rectangleBPolygon", {
+        "type": "geojson",
+        "data": rectangleBGeoJSON
+    });
+
+    map.addLayer({
+        "id": "rectangleBPolygon",
+        "type": "fill",
+        "source": "rectangleBPolygon",
+        "layout": {},
+        "paint": {
+            "fill-color": "red",
+            "fill-opacity": 0.6
+        }
+    });
+
+    map.addLayer({
+        "id": "rectangleBPolygon-outline",
+        "type": "line",
+        "source": "rectangleBPolygon",
+        "paint": {
+            "line-color": "#000",
+            "line-width": 3
+        }
+    });
+    // RECTANGLE
+
+    //MAP GRID
+    const grid = generateLatLonGrid(10);
+    map.addSource("latLonGrid", { type: "geojson", data: grid });
+    map.addLayer({
+        "id": "latLonGrid",
+        "type": "line",
+        "source": "latLonGrid",
+        "paint": {
+            "line-color": "#888",
+            "line-width": 1,
+            "line-opacity": 0.5
+        }
+    });
+    //MAP GRID
+});
+
+//ARROW
+const points = [
+        [1.42076, 40.08804],
+        [15.42076, 80.08804],
+        [55.42076, 75.08804],
+        [120.42076, 40.08804],
+        [358.4050, 50.52]
+    ];
+const arrowData = {
+    points: points,
+    splineStep: 20,
+    offsetDistance: 20000
+  };
+  const style = {
+    calculation: ARROW_BODY_STYLE_CONSTANT,
+    range: 1,
+    minValue: 0.1
+  };
+  const arrowHeadData = {
+    widthArrow: 10,
+    lengthArrow: 5
+  };
+//ARROW
+
+//FRONTLINE
+/*
+const frontlinePoints = [
+        [10.42076, 40.08804],
+        [25.42076, 80.08804],
+        [65.42076, 75.08804]
+    ];
+    */
+const frontlinePoints = [
+        [14.32076, 50.08804],
+        [15.42076, 51.08804],
+        [16.42076, 52.08804],
+        [18.42076, 50.08804]
+    ];
+const frontlineData = {
+    points: frontlinePoints,
+    splineStep: 0.08,
+    offsetDistance: 10000,
+    style: BOTH_SIDES,
+    };
+const protrusionData = {
+    length: 15000,
+    startSize: 5000,
+    endSize: 500,
+    gap: 15000,
+};
+//FRONTLINE
+
+//CIRCLE
+const circleCenter = [20, 80];
+const circleRadius = 120;
+const circleDensity = 20;
+//CIRCLE
+
+//MAP GRID
+function generateLatLonGrid(step = 10) {
+    const features = [];
+
+    for (let lat = -80; lat <= 80; lat += step) {
+        features.push({
+            type: "Feature",
+            geometry: {
+                type: "LineString",
+                coordinates: Array.from({ length: 37 }, (_, i) => [-180 + i * 10, lat])
+            }
+        });
+    }
+
+    for (let lon = -180; lon <= 180; lon += step) {
+        features.push({
+            type: "Feature",
+            geometry: {
+                type: "LineString",
+                coordinates: Array.from({ length: 17 }, (_, i) => [lon, -80 + i * 10])
+            }
+        });
+    }
+
+    return {
+        type: "FeatureCollection",
+        features
+    };
+}
+//MAP GRID

Polygon.js

@@ -0,0 +1,80 @@
+import * as turf from "@turf/turf";
+
+/**
+ * Converts an array of canvas-compatible points into a Turf.js Polygon.
+ *
+ * @param {{x: number, y: number}[]} points - Array of points with x and y properties.
+ *
+ * @returns {import('@turf/turf').Feature<import('@turf/turf').Polygon> | null} A Turf.js Polygon feature, or null if input is invalid.
+ */
+export function toTurfPolygon(points) {
+    if (!points || points.length < 3) {
+        console.error("Invalid input for polygon:", points);
+        return null;
+    }
+
+    const coords = points.map(p => [p.y, p.x]);
+    coords.push(coords[0]);
+    return turf.polygon([coords]);
+}
+
+/**
+ * Merges two polygons (in canvas format) into a single Turf.js polygon using turf.union.
+ *
+ * @param {{x: number, y: number}[]} polygonA - First polygon (array of points).
+ * @param {{x: number, y: number}[]} polygonB - Second polygon (array of points).
+ *
+ * @returns {import('@turf/turf').Feature<import('@turf/turf').Polygon> | null} A merged Turf.js polygon, or null on failure.
+ */
+export function mergeTurfPolygons(polygonA, polygonB) {
+    const turfPolygonA = toTurfPolygon(polygonA);
+    const turfPolygonB = toTurfPolygon(polygonB);
+
+    return turf.union(turf.featureCollection([turfPolygonA, turfPolygonB]));
+}
+
+/**
+ * Adds a new polygon to an existing merged Turf.js polygon.
+ *
+ * @param {import('@turf/turf').Feature<import('@turf/turf').Polygon>} polygonA - Existing merged Turf.js polygon.
+ * @param {{x: number, y: number}[]} polygonB - New polygon in canvas point format to add to the merge.
+ *
+ * @returns {import('@turf/turf').Feature<import('@turf/turf').Polygon>} Updated merged Turf.js polygon.
+ */
+export function addTurfPolygonToMerge(polygonA, polygonB) {
+    const testB = toTurfPolygon(polygonB);
+    return turf.union(turf.featureCollection([polygonA, testB]));
+}
+
+/**
+ * @param {{x: number, y: number}[][]} polygons
+ * @returns {Feature<Polygon | MultiPolygon, GeoJsonProperties>}
+ */
+
+export function mergePolygons(polygons) {
+
+    if (!polygons || polygons.length === 0)
+        return undefined;
+
+    if (polygons.length === 1)
+        return toTurfPolygon(polygons[0]);
+
+    return turf.union(turf.featureCollection(polygons.map(p => toTurfPolygon(p))));
+}
+
+/**
+ *
+ * @param {Array<Feature<Polygon | MultiPolygon, GeoJsonProperties>>|undefined} features
+ * @returns {Feature<Polygon | MultiPolygon, GeoJsonProperties>|undefined|*}
+ */
+export function mergePolygonFeatures(features) {
+
+    if (!features || features.length === 0)
+        return undefined;
+
+    if (features.length === 1)
+        return features[0];
+
+        console.log("3" + features.length)
+    return turf.union(turf.featureCollection(features));
+}

PolygonVisuals.js

@@ -0,0 +1,45 @@
+// Converts a Turf polygon into an array of canvas-compatible points
+function toCanvasPolygon(turfPolygon) {
+    if (!turfPolygon || !turfPolygon.geometry) return [];
+
+    let polygons = [];
+
+    if (turfPolygon.geometry.type === 'Polygon') {
+        polygons.push(turfPolygon.geometry.coordinates[0]);
+    } 
+    else if (turfPolygon.geometry.type === 'MultiPolygon') {
+        turfPolygon.geometry.coordinates.forEach(polygon => {
+            polygons.push(polygon[0]);
+        });
+    } 
+    else {
+        console.error("Unsupported geometry type:", turfPolygon.geometry.type);
+        return [];
+    }
+
+    return polygons.map(coords =>
+        coords.slice(0, -1).map(coord => ({ x: coord[0], y: coord[1] }))
+    );
+}
+
+// Draws a polygon on the canvas with a given color
+export function drawPolygon(turfPolygon, color, canvas) {
+    const ctx = canvas.getContext("2d");
+    ctx.fillStyle = color;
+
+    const polygons = toCanvasPolygon(turfPolygon);
+    if (!polygons.length) {
+        console.log("No valid polygons to draw.");
+        return;
+    }
+
+    polygons.forEach(points => {
+        if (points.length < 3) return;
+
+        ctx.beginPath();
+        ctx.moveTo(points[0].x, points[0].y);
+        points.forEach(p => ctx.lineTo(p.x, p.y));
+        ctx.closePath();
+        ctx.fill();
+    });
+}

index.html

@@ -1,3 +1,156 @@
+<!--
+MAPBOX - DRAWING
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Draw a polygon and calculate its area</title>
+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
+
+    <link href="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.css" rel="stylesheet">
+    <script src="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.js"></script>
+    <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
+    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.5.0/mapbox-gl-draw.js"></script>
+    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.5.0/mapbox-gl-draw.css" type="text/css">
+
+    <style>
+      body { margin: 0; padding: 0; }
+      #map { position: absolute; top: 0; bottom: 0; width: 100%; }
+
+      .calculation-box {
+          height: 75px;
+          width: 150px;
+          position: absolute;
+          bottom: 40px;
+          left: 10px;
+          background-color: rgba(255, 255, 255, 0.9);
+          padding: 15px;
+          text-align: center;
+      }
+
+      p {
+          font-family: 'Open Sans';
+          margin: 0;
+          font-size: 13px;
+      }
+
+      #arrow-editor {
+          position: absolute;
+          display: none;
+          background: white;
+          padding: 10px;
+          border: 1px solid gray;
+          z-index: 10;
+      }
+
+      #arrow-editor label {
+          display: block;
+          margin-bottom: 5px;
+          font-family: sans-serif;
+          font-size: 13px;
+      }
+
+      #applyArrowChanges {
+          margin-top: 10px;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div id="map"></div>
+    <div id="arrow-editor" style="position: absolute; background: white; padding: 10px; border: 1px solid #ccc; display: none; z-index: 1000;">
+    <h3>Arrow Editor</h3>
+    <label>Spline Step: <input id="splineStep" type="number" step="1"></label><br>
+    <label>Offset Distance: <input id="offsetDistance" type="number" step="1000"></label><br>
+    <label>Range: <input id="range" type="number" step="0.1" min="0"></label><br>
+    <label>Min Value: <input id="minValue" type="number" step="0.1" min="0"></label><br>
+    <label>Width Arrow: <input id="widthArrow" type="number" step="1"></label><br>
+    <label>Length Arrow: <input id="lengthArrow" type="number" step="1"></label><br>
+    
+    <label>Style:
+        <select id="styleArrow">
+            <option value=1>Constant</option>
+            <option value=2>Linear</option>
+            <option value=3>Exponential</option>
+        </select>
+    </label><br>
+
+    <h4>Styling</h4>
+    <label>Fill Color: <input id="arrowFillColor" type="color" value="#000000"></label><br>
+    <label>Outline Color: <input id="arrowOutlineColor" type="color" value="#000000"></label><br>
+    <label>Opacity: <input id="arrowOpacity" type="number" min="0" max="1" step="0.1" value="0.6"></label><br>
+
+    <button id="applyArrowChanges">Apply Changes</button>
+    <button id="removeArrow">Remove Arrow</button>
+
+</div>
+
+<div id="frontline-editor" style="position: absolute; background: white; padding: 10px; border: 1px solid #ccc; display: none; z-index: 1000;">
+    <h3>Frontline Editor</h3>
+    <label>Spline Step: <input id="splineStepFrontline" type="number" step="1"></label><br>
+    <label>Offset Distance: <input id="offsetDistanceFrontline" type="number" step="1000"></label><br>
+    <label>Style:
+        <select id="styleFrontline">
+            <option value=1>Left Side</option>
+            <option value=2>Right Side</option>
+            <option value=3>Both Sides</option>
+        </select>
+    </label><br>
+    <h4>Protrusion</h4>
+    <label>Length: <input id="protrusionLength" type="number" step="100"></label><br>
+    <label>Start Size: <input id="protrusionStartSize" type="number" step="100"></label><br>
+    <label>End Size: <input id="protrusionEndSize" type="number" step="100"></label><br>
+    <label>Gap: <input id="protrusionGap" type="number" step="100"></label><br>
+
+    <h4>Styling right side</h4>
+    <label>Fill Color: <input id="frontlineFillColorRight" type="color" value="#000000"></label><br>
+    <label>Outline Color: <input id="frontlineOutlineColorRight" type="color" value="#000000"></label><br>
+    <label>Opacity: <input id="frontlineOpacityRight" type="number" min="0" max="1" step="0.1" value="0.6"></label><br>
+
+    <h4>Styling left side</h4>
+    <label>Fill Color: <input id="frontlineFillColorLeft" type="color" value="#000000"></label><br>
+    <label>Outline Color: <input id="frontlineOutlineColorLeft" type="color" value="#000000"></label><br>
+    <label>Opacity: <input id="frontlineOpacityLeft" type="number" min="0" max="1" step="0.1" value="0.6"></label><br>
+
+    <button id="applyFrontlineChanges">Apply Changes</button>
+    <button id="removeFrontline">Remove Frontline</button>
+</div>
+
+    <div id="drawStyleButtons" style="position: absolute; top: 10px; left: 50px; background: white; padding: 5px; z-index: 10;">
+      <button data-style="frontline">Frontline</button>
+      <button data-style="arrow">Arrow</button>
+    </div>
+    <script type="module" src="Drawing.js"></script>
+  </body>
+</html>
+
+
+<!--
+MAPBOX
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Display a map on a webpage</title>
+<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
+<link href="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.css" rel="stylesheet">
+<script src="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.js"></script>
+<style>
+body { margin: 0; padding: 0; }
+#map { position: absolute; top: 0; bottom: 0; width: 100%; }
+</style>
+</head>
+<body>
+<div id="map"></div>
+    <script type="module" src="MapPolygons.js"></script>
+</body>
+</html>
+-->
+
+<!--
+CANVAS
+
 <!doctype html>
 <html lang="en">
   <head>
@@ -12,3 +165,4 @@
     <script type="module" src="ArrowPoints.js"></script>
   </body>
 </html>
+-->

package-lock.json

@@ -2718,7 +2718,7 @@
       "dev": true
     },
     "node_modules/athena-utils": {
-      "resolved": "git+https://git.projectathena.ca/andyaxxe/athena-utils.git#1fc49c63a2",
+      "resolved": "git+https://git.projectathena.ca/andyaxxe/athena-utils.git#4425aaa18d",
       "dev": true,
       "dependencies": {
         "@turf/turf": "7.2.0"