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

Split scripts

Browse Source
This commit is contained in:
Tomas Richtar 2025-07-24 13:05:11 +02:00
parent 0df4c7777d
commit c7d9dcde5e
4 changed files with 325 additions and 298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

328
Drawing.js
View File

@ -1,55 +1,15 @@
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 "athena-utils/shape/Frontline.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";
const ARROW = "arrow";
const FRONTLINE = "frontline";
const ADDITIONAL_SIDE = "additionalSide"; // used for Id in BOTH_SIDES style
export const ARROW = "arrow";
export const FRONTLINE = "frontline";
export const ADDITIONAL_SIDE = "additionalSide"; // used for Id in BOTH_SIDES style
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
}
};
let currentFeature = null;
let currentDrawStyle = ARROW;
const arrowParamsMap = new Map();
const frontlineParamsMap = new Map();
mapboxgl.accessToken = 'pk.eyJ1Ijoib3V0ZG9vcm1hcHBpbmdjb21wYW55IiwiYSI6ImNqYmh3cDdjYzNsMnozNGxsYzlvMmk2bTYifQ.QqcZ4LVoLWnXafXdjZxnZg';
const map = new mapboxgl.Map({
@ -130,252 +90,25 @@ const draw = new MapboxDraw({
// Map controlls
map.addControl(draw, 'top-left');
map.on('draw.create', handleDraw);
map.on('draw.update', handleDraw);
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);
handleClick(e, FRONTLINE, frontlineParamsMap, showFrontlineEditor);
handleClick(e, ARROW, arrowParamsMap, showArrowEditor, map, draw, currentDrawStyle);
handleClick(e, FRONTLINE, frontlineParamsMap, showFrontlineEditor, map, draw, currentDrawStyle);
});
map.dragPan.enable();
function handleDraw(e) {
const feature = e.features[0];
const coords = feature.geometry.coordinates;
const id = feature.id;
if (currentDrawStyle === ARROW) {
DrawArrow(coords, id);
} else if (currentDrawStyle === FRONTLINE) {
DrawFrontline(coords, id);
}
}
function handleClick(click, prefix, paramsMap, showEditorFunction) {
const features = map.queryRenderedFeatures(click.point, {
layers: map.getStyle().layers
.filter(l => l.id.startsWith(prefix + "-"))
.map(l => l.id)
});
if (features.length === 0) return;
currentDrawStyle = prefix;
updateButtonStyles();
const feature = features[0];
const featureId = feature.layer.id.replace(prefix + "-", '');
const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === featureId);
if (currentFeature) {
const params = paramsMap.get(featureId);
if (params) {
showEditorFunction(params);
}
draw.changeMode('direct_select', { featureId: featureId });
}
}
function DrawArrow(coordinates, polygonId) {
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);
}
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, drawOnMap, polygonToDraw, params.paintOptionsLeft);
let additionalPolygonToDraw = frontlineGeoJSON.rightPoly;
drawOnMap(additionalPolygonToDraw, FRONTLINE + "-" + (polygonId + ADDITIONAL_SIDE), params.paintOptionsRight);
return;
}
if (params.style == 1){ // LEFT_SIDE
updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsLeft);
}else if(params.style == 2){ // RIGHT_SIDE
updatePolygonOnMap(FRONTLINE, polygonId, drawOnMap, polygonToDraw, params.paintOptionsRight);
}
}
function updatePolygonOnMap(prefix, polygonId, drawFunction, geojson, paintOptions) {
const layerId = prefix + "-" + polygonId;
if (map.getLayer(layerId)) map.removeLayer(layerId);
if (map.getSource(layerId)) map.removeSource(layerId);
drawFunction(geojson, layerId, paintOptions);
const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === polygonId);
}
function drawOnMap(frontlineGeoJSON, id, paintOptions = {}) {
if (map.getLayer(id)) map.removeLayer(id);
if (map.getSource(id)) map.removeSource(id);
map.addSource(id, {
type: 'geojson',
data: frontlineGeoJSON
});
map.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']
}
});
}
function handleDelete(polygonType)
{
if (!currentFeature) return;
const id = currentFeature.id;
draw.delete(id);
//ARROW
if(polygonType == ARROW){
const arrowLayerId = polygonType + "-" + id;
DeleteFromMap(arrowLayerId, id);
}
//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);
DeleteFromMap(frontlineLayerIdB, id + ADDITIONAL_SIDE);
hideArrowEditor();
hideFrontlineEditor();
return;
}
DeleteFromMap(frontlineLayerId, id);
}
hideArrowEditor();
hideFrontlineEditor();
}
function DeleteFromMap(layerId, FeatureId){
if (map.getLayer(layerId)) map.removeLayer(layerId);
if (map.getSource(layerId)) map.removeSource(layerId);
arrowParamsMap.delete(FeatureId);
}
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('arrowFillColor').value = params.paintOptions["fill-color"];
document.getElementById('arrowOutlineColor').value = params.paintOptions["fill-outline-color"];
parseFloat(document.getElementById('arrowOpacity').value = params.paintOptions["fill-opacity"]);
}
function hideArrowEditor() {
const popup = document.getElementById('arrow-editor');
popup.style.display = 'none';
currentFeature = null;
}
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"]);
}
function hideFrontlineEditor() {
const popup = document.getElementById('frontline-editor');
popup.style.display = 'none';
currentFeature = null;
}
function updateButtonStyles() {
export function updateButtonStyles(drawStyle) {
currentDrawStyle = drawStyle;
const buttonsContainer = document.getElementById('drawStyleButtons');
Array.from(buttonsContainer.querySelectorAll('button')).forEach(btn => {
const isSelected = btn.getAttribute('data-style') === currentDrawStyle;
const isSelected = btn.getAttribute('data-style') === drawStyle;
btn.style.backgroundColor = isSelected ? '#333' : '#f0f0f0';
btn.style.color = isSelected ? '#fff' : '#000';
});
@ -383,11 +116,11 @@ function updateButtonStyles() {
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('removeArrow').addEventListener('click', () => {
handleDelete(ARROW);
handleDelete(ARROW, map, draw);
});
document.getElementById('removeFrontline').addEventListener('click', () => {
handleDelete(FRONTLINE);
handleDelete(FRONTLINE, map, draw);
});
document.getElementById('applyArrowChanges').addEventListener('click', () => {
@ -402,6 +135,7 @@ document.addEventListener('DOMContentLoaded', () => {
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;
@ -416,7 +150,7 @@ document.addEventListener('DOMContentLoaded', () => {
arrowParamsMap.set(id, {
splineStep,
offsetDistance,
calculation: ARROW_BODY_STYLE_LINEAR,
calculation,
range,
minValue,
widthArrow,
@ -429,7 +163,7 @@ document.addEventListener('DOMContentLoaded', () => {
splineStep,
offsetDistance
}, {
calculation: ARROW_BODY_STYLE_LINEAR,
calculation,
range,
minValue
}, {
@ -442,10 +176,10 @@ document.addEventListener('DOMContentLoaded', () => {
if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
if (map.getSource(arrowLayerId)) map.removeSource(arrowLayerId);
drawOnMap(arrowGeoJSON, ARROW + "-" + id, paintOptions);
drawOnMap(arrowGeoJSON, ARROW + "-" + id, paintOptions, map);
const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === id);
setCurrentFeature(allFeatures.find(f => f.id === id));
});
document.getElementById('applyFrontlineChanges').addEventListener('click', () => {
@ -517,11 +251,11 @@ document.addEventListener('DOMContentLoaded', () => {
if (map.getLayer(frontlineLayerId)) map.removeLayer(frontlineLayerId);
if (map.getSource(frontlineLayerId)) map.removeSource(frontlineLayerId);
drawOnMap(polygonToDrawLeft, FRONTLINE + "-" + id + ADDITIONAL_SIDE, paintOptionsLeft);
drawOnMap(polygonToDrawRight, FRONTLINE + "-" + (id), paintOptionsRight);
drawOnMap(polygonToDrawLeft, FRONTLINE + "-" + id + ADDITIONAL_SIDE, paintOptionsLeft, map);
drawOnMap(polygonToDrawRight, FRONTLINE + "-" + (id), paintOptionsRight, map);
const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === id);
setCurrentFeature(allFeatures.find(f => f.id === id));
return;
}
@ -540,10 +274,10 @@ document.addEventListener('DOMContentLoaded', () => {
paintOptions = paintOptionsRight;
}
drawOnMap(polygonToDraw, FRONTLINE + "-" + id, paintOptions);
drawOnMap(polygonToDraw, FRONTLINE + "-" + id, paintOptions, map);
const allFeatures = draw.getAll().features;
currentFeature = allFeatures.find(f => f.id === id);
setCurrentFeature(allFeatures.find(f => f.id === id));
});
const buttonsContainer = document.getElementById('drawStyleButtons');
@ -555,8 +289,8 @@ document.addEventListener('DOMContentLoaded', () => {
event.target.classList.add('active');
currentDrawStyle = event.target.getAttribute('data-style');
updateButtonStyles();
updateButtonStyles(currentDrawStyle);
});
updateButtonStyles();
updateButtonStyles(currentDrawStyle);
});

285
DrawingFunctions.js Normal file
View File

@ -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;
}

2
Frontline.js
View File

@ -182,7 +182,7 @@ function computeProtrusion(leftSidePoints, protrusionData, sideOffset) {
const localDistance = distance - currentSegmentPos;
const pointOnSegment = turf.along(turf.lineString([seg.p0, seg.p1]), localDistance, { units: METERS }).geometry.coordinates;
const thicknessOffset = sideOffset * 0.2;
const thicknessOffset = sideOffset * 0.1;
const adjustedPoint = movePoint(pointOnSegment, thicknessOffset, seg.bearing + 90);
const centerPoint = movePoint(adjustedPoint, protrusionData.length, seg.bearing - 90);

8
index.html
View File

@ -68,6 +68,14 @@ MAPBOX - DRAWING
<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>