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

Drawing

Browse Source
This commit is contained in:
Tomas Richtar
2025-07-07 14:39:38 +02:00
parent b0cfaee2e7
commit ef4dd49d74
3 changed files with 585 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
index.html
View File

@@ -1,6 +1,117 @@
<!--
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>
<!-- Editor parametrů šipky -->
<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>
<button id="applyArrowChanges">Apply Changes</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>Spacing: <input id="spacing" type="number" step="100"></label><br>
<label>Offset Distance: <input id="offsetDistanceFrontline" type="number" step="1000"></label><br>
<label>Style:
<select id="styleFrontline">
<option value="leftSide">Left Side</option>
<option value="rightSide">Right Side</option>
<option value="bothSides">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>
<button id="applyFrontlineChanges">Apply Changes</button>
</div>
<div id="drawStyleButtons" style="position: absolute; top: 10px; left: 50px; background: white; padding: 5px; z-index: 10;">
<button data-style="frontline" class="active">Frontline</button>
<button data-style="arrow">Arrow</button>
<!-- další styly můžeš přidat sem -->
</div>
<!-- Box pro výpis -->
<div class="calculation-box">
<p>Click the map to draw a polygon.</p>
<div id="calculated-area"></div>
</div>
<!-- Hlavní JS -->
<script type="module" src="Drawing.js"></script>
</body>
</html>
<!--
MAPBOX
-->
<!DOCTYPE html>
<html>
<head>
@@ -19,7 +130,7 @@ body { margin: 0; padding: 0; }
<script type="module" src="MapPolygons.js"></script>
</body>
</html>
-->
<!--
CANVAS