tomas.richtar/StorymapperArrow
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

Create, Update

Browse Source
This commit is contained in:
Tomas Richtar 2025-07-10 21:04:42 +02:00
parent 4e8169a679
commit 89d137e577
1 changed files with 333 additions and 330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

663
Drawing.js
View File

@ -1,11 +1,33 @@
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 {  ARROW_BODY_STYLE_CONSTANT, ARROW_BODY_STYLE_LINEAR, ARROW_BODY_STYLE_EXPONENTIAL  } from "athena-utils/shape/Arrow.js";
import { getFrontline } from "athena-utils/shape/Frontline.js"; import { getFrontline } from "athena-utils/shape/Frontline.js";
import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js"; import { LEFT_SIDE, RIGHT_SIDE, BOTH_SIDES } from "athena-utils/shape/Frontline.js";
const ARROW = "arrow"; const ARROW = "arrow";
const FRONTLINE = "frontline"; const FRONTLINE = "frontline";
const DEFAULT_ARROW_PARAMS = {
splineStep: 20,
offsetDistance: 12000,
calculation: ARROW_BODY_STYLE_LINEAR,
range: 1,
minValue: 0.1,
widthArrow: 5,
lengthArrow: 8
};
const DEFAULT_FRONTLINE_PARAMS = {
splineStep: 0.08,
offsetDistance: 10000,
style: LEFT_SIDE,
protrusion: {
length: 15000,
startSize: 5000,
endSize: 500,
gap: 15000
}
};
let currentFeature = null; let currentFeature = null;
let currentDrawStyle = ARROW; let currentDrawStyle = ARROW;
@ -47,7 +69,7 @@ const draw = new MapboxDraw({
{ {
id: 'gl-draw-line-inactive', id: 'gl-draw-line-inactive',
type: 'line', type: 'line',
filter: ['all', ['==', '$type', 'LineString'], ['==', 'active', 'false']], filter: ['all', ['==', '$type', 'LineString'], ['==', 'deactive', 'false']],
layout: { layout: {
'line-cap': 'round', 'line-cap': 'round',
'line-join': 'round' 'line-join': 'round'
@ -82,7 +104,7 @@ const draw = new MapboxDraw({
id: 'gl-draw-polygon-midpoint', id: 'gl-draw-polygon-midpoint',
type: 'circle', type: 'circle',
filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']], filter: ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']],
paint: { paint: {
'circle-radius': 4, 'circle-radius': 4,
'circle-color': 'rgb(0, 255, 174)' 'circle-color': 'rgb(0, 255, 174)'
} }
@ -94,110 +116,19 @@ const draw = new MapboxDraw({
map.addControl(draw, 'top-left'); map.addControl(draw, 'top-left');
map.on('draw.create', handleDraw); map.on('draw.create', handleDraw);
map.on('draw.update', handleDraw); map.on('draw.update', handleDraw);
map.on('click', (e) => { map.on('click', (e) => {
hideArrowEditor(); hideArrowEditor();
hideFrontlineEditor(); hideFrontlineEditor();
handleClick(e, ARROW, arrowParamsMap, showArrowEditor); handleClick(e, ARROW, arrowParamsMap, showArrowEditor);
handleClick(e, FRONTLINE, frontlineParamsMap, showFrontlineEditor); handleClick(e, FRONTLINE, frontlineParamsMap, showFrontlineEditor);
}); });
map.dragPan.enable();
function DrawArrow(coordinates, polygonId)
{
if (!arrowParamsMap.has(polygonId)) {
arrowParamsMap.set(polygonId, {
splineStep: 20,
offsetDistance: 12000,
calculation: ARROW_BODY_STYLE_LINEAR,
range: 1,
minValue: 0.1,
widthArrow: 5,
lengthArrow: 8
});
}
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 }
);
const arrowLayerId = ARROW + "-" + polygonId;
if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
drawArrowOnMap(arrowGeoJSON, ARROW + "-" + polygonId);
const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.polygonId === polygonId);
}
function DrawFrontline(coordinates, polygonId){
if (!frontlineParamsMap.has(polygonId)) {
frontlineParamsMap.set(polygonId, {
splineStep: 0.08,
offsetDistance: 10000,
style: LEFT_SIDE,
protrusion: {
length: 15000,
startSize: 5000,
endSize: 500,
gap: 15000
}
});
}
const params = frontlineParamsMap.get(polygonId);
const frontlineData = {
points: coordinates,
splineStep: params.splineStep,
offsetDistance: params.offsetDistance,
style: params.style
};
const protrusionData = params.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 + "-" + polygonId;
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
drawFrontlineOnMap(polygonToDrawLeft, FRONTLINE + "-" + polygonId);
drawFrontlineOnMap(polygonToDrawRight, FRONTLINE + "-" + (polygonId+1));
const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.polygonId === polygonId);
return;
}
const frontlineLayerId = FRONTLINE + "-" + polygonId;
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
drawFrontlineOnMap(polygonToDraw, FRONTLINE + "-" + polygonId);
const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.polygonId === polygonId);
}
function handleDraw(e) { function handleDraw(e) {
const feature = e.features[0]; const feature = e.features[0];
const coords = feature.geometry.coordinates; const coords = feature.geometry.coordinates;
const id = feature.id; const id = feature.id;
if (currentDrawStyle === ARROW) { if (currentDrawStyle === ARROW) {
DrawArrow(coords, id); DrawArrow(coords, id);
} else if (currentDrawStyle === FRONTLINE) { } else if (currentDrawStyle === FRONTLINE) {
@ -205,9 +136,7 @@ function handleDraw(e) {
} }
} }
function handleClick(click, prefix, paramsMap, showEditorFunction, hideEditorFunction) { function handleClick(click, prefix, paramsMap, showEditorFunction) {
console.log("currentFeature" + currentFeature);
const features = map.queryRenderedFeatures(click.point, { const features = map.queryRenderedFeatures(click.point, {
layers: map.getStyle().layers layers: map.getStyle().layers
.filter(l => l.id.startsWith(prefix + "-")) .filter(l => l.id.startsWith(prefix + "-"))
@ -216,13 +145,14 @@ function handleClick(click, prefix, paramsMap, showEditorFunction, hideEditorFun
if (features.length === 0) return; if (features.length === 0) return;
currentDrawStyle = prefix;
updateButtonStyles();
const feature = features[0]; const feature = features[0];
const featureId = feature.layer.id.replace(prefix + "-", ''); const featureId = feature.layer.id.replace(prefix + "-", '');
const allFeatures = draw.getAll().features; const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === featureId); currentFeature = allFeatures.find(f => f.id === featureId);
console.log("currentFeature" + currentFeature);
if (currentFeature) { if (currentFeature) {
const params = paramsMap.get(featureId); const params = paramsMap.get(featureId);
if (params) { if (params) {
@ -232,297 +162,370 @@ function handleClick(click, prefix, paramsMap, showEditorFunction, hideEditorFun
} }
} }
function MyDelete(polygonType) function DrawArrow(coordinates, polygonId) {
{ if (!arrowParamsMap.has(polygonId)) {
if (!currentFeature) return; arrowParamsMap.set(polygonId, structuredClone(DEFAULT_ARROW_PARAMS));
const id = currentFeature.id;
draw.delete(id);
//ARROW
if(polygonType == ARROW){
const arrowLayerId = polygonType + "-" + id;
if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
arrowParamsMap.delete(id);
} }
//Frontline
if(polygonType == FRONTLINE){
const frontlineLayerId = polygonType + "-" + id;
if (frontlineParamsMap.get(id).style == 3){ //BOTH_SIDES const params = arrowParamsMap.get(polygonId);
const arrowGeoJSON = getArrowPolygon(
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId); {
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId); points: coordinates,
const frontlineLayerIdB = polygonType + "-" + (id+1); splineStep: params.splineStep,
if (map.getLayer(frontlineLayerIdB)) map.removeLayer(frontlineLayerIdB); offsetDistance: params.offsetDistance
if (map.getSource(frontlineLayerIdB)) map.removeSource(frontlineLayerIdB); },
frontlineParamsMap.delete(id); {
frontlineParamsMap.delete(id+1); calculation: params.calculation,
range: params.range,
hideArrowEditor(); minValue: params.minValue
hideFrontlineEditor(); },
return; {
widthArrow: params.widthArrow,
lengthArrow: params.lengthArrow
} }
);
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId); updatePolygonOnMap(ARROW, polygonId, drawArrowOnMap, arrowGeoJSON);
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
frontlineParamsMap.delete(id);
}
hideArrowEditor();
hideFrontlineEditor();
} }
function DrawFrontline(coordinates, polygonId) {
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, drawFrontlineOnMap, polygonToDraw);
let additionalPolygonToDraw = frontlineGeoJSON.rightPoly;
drawFrontlineOnMap(additionalPolygonToDraw, FRONTLINE + "-" + (polygonId+1));
return;
}
updatePolygonOnMap(FRONTLINE, polygonId, drawFrontlineOnMap, polygonToDraw);
}
function updatePolygonOnMap(prefix, polygonId, drawFunction, geojson) {
const layerId =  prefix + "-" + polygonId;
if (map.getLayer(layerId)) map.removeLayer(layerId);
if (map.getSource(layerId)) map.removeSource(layerId);
drawFunction(geojson, layerId);
const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.polygonId === polygonId);
}
function drawArrowOnMap(geojson, id) { function drawArrowOnMap(geojson, id) {
map.addSource(id, {     map.addSource(id, {
type: 'geojson',         type: 'geojson',
data: geojson         data: geojson
});     });
map.addLayer({     map.addLayer({
id: id,         id: id,
type: 'fill',         type: 'fill',
source: id,         source: id,
paint: {         paint: {
'fill-color': '#ff0000',             'fill-color': '#ff0000',
'fill-opacity': 0.5             'fill-opacity': 0.5
}         }
});     });
} }
function drawFrontlineOnMap(frontlineGeoJSON, id) { function drawFrontlineOnMap(frontlineGeoJSON, id) {
if (map.getLayer(id)) map.removeLayer(id);     if (map.getLayer(id)) map.removeLayer(id);
if (map.getSource(id)) map.removeSource(id);     if (map.getSource(id)) map.removeSource(id);
map.addSource(id, {     map.addSource(id, {
type: 'geojson',         type: 'geojson',
data: frontlineGeoJSON         data: frontlineGeoJSON
});     });
map.addLayer({     map.addLayer({
id: id,         id: id,
type: 'fill',         type: 'fill',
source: id,         source: id,
paint: {         paint: {
'fill-color': '#ff6600',             'fill-color': '#ff6600',
'fill-opacity': 0.6,             'fill-opacity': 0.6,
'fill-outline-color': '#cc3300'             'fill-outline-color': '#cc3300'
}         }
});     });
} }
function MyDelete(polygonType)
{
    if (!currentFeature) return;
   
    const id = currentFeature.id;
    draw.delete(id);
    //ARROW
    if(polygonType == ARROW){
        const arrowLayerId = polygonType + "-" + id;
        if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
        if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
        arrowParamsMap.delete(id);
    }
   
    //Frontline
    if(polygonType == FRONTLINE){
        const frontlineLayerId = polygonType + "-" + id;
        if (frontlineParamsMap.get(id).style == 3){ //BOTH_SIDES
            if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
            if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
            const frontlineLayerIdB = polygonType + "-" + (id+1);
            if (map.getLayer(frontlineLayerIdB)) map.removeLayer(frontlineLayerIdB);
            if (map.getSource(frontlineLayerIdB)) map.removeSource(frontlineLayerIdB);
            frontlineParamsMap.delete(id);
            frontlineParamsMap.delete(id+1);
           
            hideArrowEditor();
            hideFrontlineEditor();
            return;
        }
        if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
        if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
        frontlineParamsMap.delete(id);
    }
   
    hideArrowEditor();
    hideFrontlineEditor();
}
function showArrowEditor(params) { function showArrowEditor(params) {
const popup = document.getElementById('arrow-editor');     const popup = document.getElementById('arrow-editor');
popup.style.display = 'block';     popup.style.display = 'block';
popup.style.left = '10px';     popup.style.left = '10px';
popup.style.top = '70px';     popup.style.top = '70px';
document.getElementById('splineStep').value = params.splineStep;     document.getElementById('splineStep').value = params.splineStep;
document.getElementById('offsetDistance').value = params.offsetDistance;     document.getElementById('offsetDistance').value = params.offsetDistance;
document.getElementById('range').value = params.range;     document.getElementById('range').value = params.range;
document.getElementById('minValue').value = params.minValue;     document.getElementById('minValue').value = params.minValue;
document.getElementById('widthArrow').value = params.widthArrow;     document.getElementById('widthArrow').value = params.widthArrow;
document.getElementById('lengthArrow').value = params.lengthArrow;     document.getElementById('lengthArrow').value = params.lengthArrow;
} }
function hideArrowEditor() { function hideArrowEditor() {
const popup = document.getElementById('arrow-editor');     const popup = document.getElementById('arrow-editor');
popup.style.display = 'none';     popup.style.display = 'none';
currentFeature = null;     currentFeature = null;
} }
function showFrontlineEditor(params) { function showFrontlineEditor(params) {
const popup = document.getElementById('frontline-editor');     const popup = document.getElementById('frontline-editor');
popup.style.display = 'block';     popup.style.display = 'block';
popup.style.left = '10px';     popup.style.left = '10px';
popup.style.top = '70px';     popup.style.top = '70px';
document.getElementById('splineStepFrontline').value = params.splineStep;     document.getElementById('splineStepFrontline').value = params.splineStep;
document.getElementById('offsetDistanceFrontline').value = params.offsetDistance;     document.getElementById('offsetDistanceFrontline').value = params.offsetDistance;
document.getElementById('styleFrontline').value = params.style;     document.getElementById('styleFrontline').value = params.style;
document.getElementById('protrusionLength').value = params.protrusion.length;     document.getElementById('protrusionLength').value = params.protrusion.length;
document.getElementById('protrusionStartSize').value = params.protrusion.startSize;     document.getElementById('protrusionStartSize').value = params.protrusion.startSize;
document.getElementById('protrusionEndSize').value = params.protrusion.endSize;     document.getElementById('protrusionEndSize').value = params.protrusion.endSize;
document.getElementById('protrusionGap').value = params.protrusion.gap;     document.getElementById('protrusionGap').value = params.protrusion.gap;
} }
function hideFrontlineEditor() { function hideFrontlineEditor() {
const popup = document.getElementById('frontline-editor');     const popup = document.getElementById('frontline-editor');
popup.style.display = 'none';     popup.style.display = 'none';
currentFeature = null;     currentFeature = null;
} }
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
document.getElementById('removeArrow').addEventListener('click', () => {     document.getElementById('removeArrow').addEventListener('click', () => {
       
MyDelete(ARROW);         MyDelete(ARROW);
});     });
document.getElementById('removeFrontline').addEventListener('click', () => {     document.getElementById('removeFrontline').addEventListener('click', () => {
       
MyDelete(FRONTLINE);         MyDelete(FRONTLINE);
});     });
document.getElementById('applyArrowChanges').addEventListener('click', () => {     document.getElementById('applyArrowChanges').addEventListener('click', () => {
       
if (!currentFeature) return;         if (!currentFeature) return;
console.log("Test");         console.log("Test");
const coords = currentFeature.geometry.coordinates;         const coords = currentFeature.geometry.coordinates;
const id = currentFeature.id;         const id = currentFeature.id;
const splineStep = parseFloat(document.getElementById('splineStep').value);         const splineStep = parseFloat(document.getElementById('splineStep').value);
const offsetDistance = parseFloat(document.getElementById('offsetDistance').value);         const offsetDistance = parseFloat(document.getElementById('offsetDistance').value);
const range = parseFloat(document.getElementById('range').value);         const range = parseFloat(document.getElementById('range').value);
const minValue = parseFloat(document.getElementById('minValue').value);         const minValue = parseFloat(document.getElementById('minValue').value);
const widthArrow = parseFloat(document.getElementById('widthArrow').value);         const widthArrow = parseFloat(document.getElementById('widthArrow').value);
const lengthArrow = parseFloat(document.getElementById('lengthArrow').value);         const lengthArrow = parseFloat(document.getElementById('lengthArrow').value);
arrowParamsMap.set(id, {         arrowParamsMap.set(id, {
splineStep,             splineStep,
offsetDistance,             offsetDistance,
calculation: ARROW_BODY_STYLE_LINEAR,             calculation: ARROW_BODY_STYLE_LINEAR,
range,             range,
minValue,             minValue,
widthArrow,             widthArrow,
lengthArrow             lengthArrow
});         });
const arrowGeoJSON = getArrowPolygon({         const arrowGeoJSON = getArrowPolygon({
points: coords,             points: coords,
splineStep,             splineStep,
offsetDistance             offsetDistance
}, {         }, {
calculation: ARROW_BODY_STYLE_LINEAR,             calculation: ARROW_BODY_STYLE_LINEAR,
range,             range,
minValue             minValue
}, {         }, {
widthArrow,             widthArrow,
lengthArrow             lengthArrow
});         });
//ARROW         //ARROW
const arrowLayerId = ARROW + "-" + id;         const arrowLayerId = ARROW + "-" + id;
if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);         if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);         if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
drawArrowOnMap(arrowGeoJSON, ARROW + "-" + id);         drawArrowOnMap(arrowGeoJSON, ARROW + "-" + id);
const allFeatures = draw.getAll().features;         const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === id);         currentFeature = allFeatures.find(f => f.id === id);
});     });
document.getElementById('applyFrontlineChanges').addEventListener('click', () => {     document.getElementById('applyFrontlineChanges').addEventListener('click', () => {
if (!currentFeature) return;         if (!currentFeature) return;
const coords = currentFeature.geometry.coordinates;         const coords = currentFeature.geometry.coordinates;
const id = currentFeature.id;         const id = currentFeature.id;
const splineStep = parseFloat(document.getElementById('splineStepFrontline').value);         const splineStep = parseFloat(document.getElementById('splineStepFrontline').value);
const offsetDistance = parseFloat(document.getElementById('offsetDistanceFrontline').value);         const offsetDistance = parseFloat(document.getElementById('offsetDistanceFrontline').value);
const style = parseInt(document.getElementById('styleFrontline').value);         const style = parseInt(document.getElementById('styleFrontline').value);
const length = parseFloat(document.getElementById('protrusionLength').value);         const length = parseFloat(document.getElementById('protrusionLength').value);
const startSize = parseFloat(document.getElementById('protrusionStartSize').value);         const startSize = parseFloat(document.getElementById('protrusionStartSize').value);
const endSize = parseFloat(document.getElementById('protrusionEndSize').value);         const endSize = parseFloat(document.getElementById('protrusionEndSize').value);
const gap = parseFloat(document.getElementById('protrusionGap').value);         const gap = parseFloat(document.getElementById('protrusionGap').value);
frontlineParamsMap.set(id, {         frontlineParamsMap.set(id, {
splineStep,             splineStep,
offsetDistance,             offsetDistance,
style,             style,
protrusion: {             protrusion: {
length,                 length,
startSize,                 startSize,
endSize,                 endSize,
gap                 gap
}             }
});         });
const frontlineData = {         const frontlineData = {
points: coords,             points: coords,
splineStep,             splineStep,
offsetDistance,             offsetDistance,
style             style
};         };
const protrusionData = frontlineParamsMap.get(id).protrusion;         const protrusionData = frontlineParamsMap.get(id).protrusion;
console.log("Update");         console.log("Update");
console.log(frontlineData);         console.log(frontlineData);
console.log(protrusionData);         console.log(protrusionData);
const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);         const frontlineGeoJSON = getFrontline(frontlineData, protrusionData);
console.log("frontlineGeoJSON", frontlineGeoJSON);         console.log("frontlineGeoJSON", frontlineGeoJSON);
let polygonToDraw = frontlineGeoJSON;         let polygonToDraw = frontlineGeoJSON;
if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {         if (frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly) {
polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;             polygonToDraw = frontlineGeoJSON.leftPoly || frontlineGeoJSON.rightPoly;
}         }
if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){         if(frontlineGeoJSON.leftPoly && frontlineGeoJSON.rightPoly){
let polygonToDrawLeft = frontlineGeoJSON.leftPoly;             let polygonToDrawLeft = frontlineGeoJSON.leftPoly;
let polygonToDrawRight = frontlineGeoJSON.rightPoly;             let polygonToDrawRight = frontlineGeoJSON.rightPoly;
console.log("polygonToDrawLeft", polygonToDrawLeft);             console.log("polygonToDrawLeft", polygonToDrawLeft);
console.log("polygonToDrawRight", polygonToDrawRight);             console.log("polygonToDrawRight", polygonToDrawRight);
           
const frontlineLayerId = FRONTLINE + "-" + id;             const frontlineLayerId = FRONTLINE + "-" + id;
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);             if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);             if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
console.log(frontlineLayerId);             console.log(frontlineLayerId);
console.log(FRONTLINE + "-" + (id+1));             console.log(FRONTLINE + "-" + (id+1));
drawFrontlineOnMap(polygonToDrawLeft, FRONTLINE + "-" + id);             drawFrontlineOnMap(polygonToDrawLeft, FRONTLINE + "-" + id);
drawFrontlineOnMap(polygonToDrawRight, FRONTLINE + "-" + (id+1));             drawFrontlineOnMap(polygonToDrawRight, FRONTLINE + "-" + (id+1));
           
const allFeatures = draw.getAll().features;             const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === id);             currentFeature = allFeatures.find(f => f.id === id);
return;             return;
}         }
//if (last was both destroy id+1) TODO         //if (last was both destroy id+1) TODO
console.log("Test2");         console.log("Test2");
const frontlineLayerId = FRONTLINE + "-" + id;         const frontlineLayerId = FRONTLINE + "-" + id;
if (map.getLayer(frontlineLayerId+1)) map.removeLayer(frontlineLayerId+1);         if (map.getLayer(frontlineLayerId+1)) map.removeLayer(frontlineLayerId+1);
if (map.getSource(frontlineLayerId+1)) map.removeSource(frontlineLayerId+1);         if (map.getSource(frontlineLayerId+1)) map.removeSource(frontlineLayerId+1);
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);         if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);         if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
drawFrontlineOnMap(polygonToDraw, FRONTLINE + "-" + id);         drawFrontlineOnMap(polygonToDraw, FRONTLINE + "-" + id);
       
const allFeatures = draw.getAll().features;         const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === id);         currentFeature = allFeatures.find(f => f.id === id);
});     });
const buttonsContainer = document.getElementById('drawStyleButtons');     const buttonsContainer = document.getElementById('drawStyleButtons');
buttonsContainer.addEventListener('click', (event) => {     buttonsContainer.addEventListener('click', (event) => {
if (event.target.tagName !== 'BUTTON') return;         if (event.target.tagName !== 'BUTTON') return;
Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => btn.classList.remove('active'));         Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => btn.classList.remove('active'));
event.target.classList.add('active');         event.target.classList.add('active');
currentDrawStyle = event.target.getAttribute('data-style');         currentDrawStyle = event.target.getAttribute('data-style');
updateButtonStyles();         updateButtonStyles();
});     });
updateButtonStyles();     updateButtonStyles();
function updateButtonStyles() { });
Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => {
const isSelected = btn.getAttribute('data-style') === currentDrawStyle; function updateButtonStyles() {
btn.style.backgroundColor = isSelected ? '#333' : '#f0f0f0';     const buttonsContainer = document.getElementById('drawStyleButtons');
btn.style.color = isSelected ? '#fff' : '#000';     Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => {
});         const isSelected = btn.getAttribute('data-style') === currentDrawStyle;
}         btn.style.backgroundColor = isSelected ? '#333' : '#f0f0f0';
});         btn.style.color = isSelected ? '#fff' : '#000';
    });
}