|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<!-- https://gist.github.com/eddy-geek/ff8c4f3d74e1be6747baf3c91b41a50c --> |
|
<!-- .../gh api --method PATCH /gists/ff8c4f3d74e1be6747baf3c91b41a50c -F "files[slope.html][content]=@slope.html" -F "files[slope.md][content]=@slope.md" --jq '.html_url' --> |
|
<meta charset="utf-8" /> |
|
<title>Slope viewer & editor</title> |
|
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" /> |
|
<link rel="icon" type="image/svg+xml" href="favicon.svg" /> |
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png" /> |
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16.png" /> |
|
<link rel="apple-touch-icon" href="apple-touch-icon.png" /> |
|
<link rel="manifest" href="manifest.json" /> |
|
|
|
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.20.0/dist/maplibre-gl.css" /> |
|
<style> |
|
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; } |
|
#map { position: relative; width: 100%; height: 100%; } |
|
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } |
|
|
|
#controls-wrapper { |
|
position: absolute; |
|
top: 10px; |
|
left: 10px; |
|
z-index: 10; |
|
} |
|
|
|
#toolbar { |
|
display: flex; |
|
align-items: center; |
|
gap: 6px; |
|
margin-bottom: 6px; |
|
} |
|
|
|
#controls-toggle { |
|
background: rgba(255,255,255,0.94); |
|
border: none; |
|
border-radius: 8px; |
|
padding: 6px 12px; |
|
box-shadow: 0 1px 6px rgba(0,0,0,0.25); |
|
font-size: 13px; |
|
font-weight: 600; |
|
cursor: pointer; |
|
white-space: nowrap; |
|
} |
|
#controls-toggle:hover { background: rgba(240,240,240,0.97); } |
|
|
|
#search-box { |
|
position: relative; |
|
display: flex; |
|
align-items: center; |
|
} |
|
#search-icon { |
|
background: rgba(255,255,255,0.94); |
|
border: none; |
|
border-radius: 8px; |
|
padding: 6px 8px; |
|
box-shadow: 0 1px 6px rgba(0,0,0,0.25); |
|
font-size: 15px; |
|
cursor: pointer; |
|
line-height: 1; |
|
} |
|
#search-icon:hover { background: rgba(240,240,240,0.97); } |
|
#search-input { |
|
width: 0; |
|
opacity: 0; |
|
border: none; |
|
outline: none; |
|
font-size: 13px; |
|
padding: 6px 8px; |
|
border-radius: 0 8px 8px 0; |
|
background: rgba(255,255,255,0.94); |
|
box-shadow: 0 1px 6px rgba(0,0,0,0.25); |
|
transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease; |
|
} |
|
#search-box.expanded #search-input { |
|
width: 200px; |
|
opacity: 1; |
|
padding: 6px 8px; |
|
} |
|
#search-box.expanded #search-icon { |
|
border-radius: 8px 0 0 8px; |
|
box-shadow: none; |
|
} |
|
#search-results { |
|
display: none; |
|
position: absolute; |
|
top: 100%; |
|
left: 0; |
|
right: 0; |
|
margin-top: 4px; |
|
background: rgba(255,255,255,0.97); |
|
border-radius: 8px; |
|
box-shadow: 0 2px 8px rgba(0,0,0,0.25); |
|
max-height: 240px; |
|
overflow-y: auto; |
|
font-size: 12px; |
|
z-index: 20; |
|
} |
|
#search-results.visible { display: block; } |
|
.search-result { |
|
padding: 7px 10px; |
|
cursor: pointer; |
|
border-bottom: 1px solid rgba(0,0,0,0.06); |
|
line-height: 1.3; |
|
} |
|
.search-result:last-child { border-bottom: none; } |
|
.search-result:hover { background: rgba(0,0,0,0.05); } |
|
.search-result-name { font-weight: 600; } |
|
.search-result-detail { opacity: 0.6; font-size: 11px; } |
|
|
|
.panel-surface { |
|
background: rgba(255,255,255,0.6); |
|
border-radius: 12px; |
|
box-shadow: 0 1px 6px rgba(0,0,0,0.25); |
|
backdrop-filter: blur(2px); |
|
-webkit-backdrop-filter: blur(2px); |
|
} |
|
|
|
.panel-padded { |
|
padding: 7px 9px; |
|
} |
|
|
|
#controls { |
|
min-width: 180px; |
|
font-size: 13px; |
|
max-height: calc(100vh - 60px - var(--bottom-overlay-bottom)); |
|
overflow-y: auto; |
|
} |
|
#controls.collapsed { display: none; } |
|
|
|
#advanced-toggle { |
|
display: flex; |
|
align-items: center; |
|
gap: 4px; |
|
background: none; |
|
border: none; |
|
padding: 4px 0; |
|
font-size: 12px; |
|
font-weight: 600; |
|
cursor: pointer; |
|
opacity: 0.7; |
|
width: 100%; |
|
color: inherit; |
|
} |
|
#advanced-toggle:hover { opacity: 1; } |
|
#advanced-toggle .arrow { display: inline-block; transition: transform 0.2s; font-size: 10px; } |
|
#advanced-toggle .arrow.open { transform: rotate(90deg); } |
|
#advanced-section { display: none; } |
|
#advanced-section.open { display: block; } |
|
|
|
#legend { |
|
position: absolute; |
|
left: 10px; |
|
bottom: var(--bottom-overlay-bottom); |
|
z-index: 10; |
|
min-width: 260px; |
|
font-size: 12px; |
|
line-height: 1.3; |
|
} |
|
#legend.cursor-only .ramp, |
|
#legend.cursor-only .labels { |
|
display: none; |
|
} |
|
#legend.cursor-only #cursor-info { |
|
margin-top: 0; |
|
} |
|
|
|
.row { margin: 6px 0; } |
|
.legend-title { font-weight: 700; margin-bottom: 6px; } |
|
.ramp { |
|
height: 12px; |
|
border-bottom: 1px solid rgba(0,0,0,0.4); |
|
margin: 6px 0 4px; |
|
} |
|
.labels { display: flex; justify-content: space-between; opacity: 0.85; position: relative; } |
|
.legend-ticks { position: absolute; top: -5px; left: 0; right: 0; height: 5px; display: flex; justify-content: space-between; pointer-events: none; } |
|
.legend-ticks span { width: 1px; height: 8px; background: rgba(0,0,0,0.25); } |
|
#cursor-info { margin-top: 6px; font-size: 11px; opacity: 0.85; } |
|
#cursor-info code { background: rgba(0,0,0,0.05); padding: 1px 4px; border-radius: 3px; } |
|
#status { font-size: 12px; opacity: 0.85; } |
|
#status code { background: rgba(0,0,0,0.05); padding: 1px 4px; border-radius: 3px; } |
|
|
|
/* Track editor */ |
|
.tb-btn { |
|
background: rgba(255,255,255,0.94); |
|
border: none; |
|
border-radius: 8px; |
|
padding: 6px 8px; |
|
box-shadow: 0 1px 6px rgba(0,0,0,0.25); |
|
font-size: 15px; |
|
cursor: pointer; |
|
line-height: 1; |
|
} |
|
.tb-btn:hover { background: rgba(240,240,240,0.97); } |
|
.tb-btn.active { background: #4a90d9; color: #fff; box-shadow: 0 1px 6px rgba(74,144,217,0.5); } |
|
.tb-btn:disabled { |
|
opacity: 0.4; |
|
cursor: default; |
|
color: rgba(0,0,0,0.45); |
|
box-shadow: 0 1px 4px rgba(0,0,0,0.08); |
|
} |
|
.tb-btn:disabled:hover { background: rgba(255,255,255,0.94); } |
|
|
|
#track-panel-shell { |
|
position: absolute; |
|
top: 10px; |
|
right: 10px; |
|
z-index: 11; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-end; |
|
gap: 6px; |
|
} |
|
#track-panel-shell.visible { |
|
padding: 8px 10px 10px; |
|
align-items: stretch; |
|
gap: 0; |
|
} |
|
#track-tool-row { |
|
display: flex; |
|
align-items: center; |
|
justify-content: flex-end; |
|
gap: 6px; |
|
} |
|
#draw-btn, |
|
#tracks-btn { |
|
position: static; |
|
z-index: auto; |
|
} |
|
#track-panel { |
|
position: static; |
|
z-index: auto; |
|
background: transparent; |
|
border-radius: 0; |
|
padding: 0; |
|
box-shadow: none; |
|
font-size: 12px; |
|
min-width: 180px; |
|
max-height: 50vh; |
|
overflow-y: auto; |
|
display: none; |
|
} |
|
#track-panel.visible { display: block; } |
|
.track-panel-header { |
|
display: flex; |
|
align-items: center; |
|
gap: 8px; |
|
margin-bottom: 4px; |
|
} |
|
#track-panel h3 { margin: 0; font-size: 13px; } |
|
#track-panel .track-panel-header #profile-toggle-btn { |
|
margin-left: auto; |
|
} |
|
#track-panel .track-panel-header #track-tool-row { |
|
flex-shrink: 0; |
|
} |
|
#profile-toggle-btn { |
|
background: rgba(74,144,217,0.12); |
|
color: #245480; |
|
border: none; |
|
border-radius: 999px; |
|
padding: 4px 10px; |
|
font-size: 11px; |
|
font-weight: 600; |
|
cursor: pointer; |
|
white-space: nowrap; |
|
} |
|
#profile-toggle-btn:hover { background: rgba(74,144,217,0.18); } |
|
#profile-toggle-btn.active { background: #4a90d9; color: #fff; } |
|
#profile-toggle-btn:disabled { opacity: 0.45; cursor: default; } |
|
.track-item { |
|
display: flex; |
|
align-items: center; |
|
gap: 4px; |
|
padding: 3px 0; |
|
border-bottom: 1px solid rgba(0,0,0,0.06); |
|
cursor: pointer; |
|
} |
|
.track-item:last-child { border-bottom: none; } |
|
.track-item.active { font-weight: 700; } |
|
.track-item .track-color { |
|
width: 10px; height: 10px; |
|
border-radius: 50%; |
|
flex-shrink: 0; |
|
} |
|
.track-item .track-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } |
|
.track-stats { font-size: 10px; opacity: 0.65; margin-left: 14px; } |
|
.track-item .track-del { |
|
background: none; border: none; cursor: pointer; font-size: 13px; opacity: 0.5; padding: 0 2px; |
|
} |
|
.track-item .track-del:hover { opacity: 1; } |
|
|
|
.track-group-header { |
|
display: flex; |
|
align-items: center; |
|
gap: 4px; |
|
padding: 4px 0 2px; |
|
cursor: pointer; |
|
font-size: 12px; |
|
border-bottom: 1px solid rgba(0,0,0,0.08); |
|
} |
|
.track-group-header.active { font-weight: 700; } |
|
.track-group-toggle { font-size: 10px; flex-shrink: 0; width: 10px; text-align: center; } |
|
.track-item-nested { padding-left: 18px; } |
|
|
|
.track-export-bar { display: flex; gap: 4px; margin-top: 6px; } |
|
.track-export-bar button { |
|
flex: 1; |
|
background: #4a90d9; |
|
color: #fff; |
|
border: none; |
|
border-radius: 4px; |
|
padding: 4px 6px; |
|
font-size: 11px; |
|
cursor: pointer; |
|
} |
|
.track-export-bar button:hover { background: #3a7bc8; } |
|
|
|
#drop-overlay { |
|
display: none; |
|
position: fixed; |
|
inset: 0; |
|
z-index: 1000; |
|
background: rgba(74,144,217,0.25); |
|
border: 3px dashed #4a90d9; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 22px; |
|
font-weight: 700; |
|
color: #2a5a8a; |
|
pointer-events: none; |
|
} |
|
#drop-overlay.visible { display: flex; } |
|
|
|
#mobile-move-hint { |
|
display: none; |
|
position: absolute; |
|
bottom: 60px; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
z-index: 10; |
|
background: rgba(0,0,0,0.75); |
|
color: #fff; |
|
padding: 6px 14px; |
|
border-radius: 20px; |
|
font-size: 12px; |
|
white-space: nowrap; |
|
} |
|
#mobile-move-hint.visible { display: block; } |
|
|
|
:root { |
|
--bottom-overlay-bottom: 12px; |
|
--bottom-right-surface: rgba(255,255,255,0.28); |
|
--bottom-right-surface-hover: rgba(255,255,255,0.62); |
|
} |
|
body.profile-open { |
|
--bottom-overlay-bottom: 148px; |
|
} |
|
.maplibregl-ctrl-bottom-right { |
|
right: 10px; |
|
bottom: var(--bottom-overlay-bottom); |
|
} |
|
.maplibregl-ctrl-bottom-right { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-end; |
|
gap: 8px; |
|
} |
|
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group, |
|
.maplibregl-ctrl-bottom-right .maplibregl-ctrl { |
|
margin: 0; |
|
box-shadow: 0 1px 6px rgba(0,0,0,0.1); |
|
background: var(--bottom-right-surface); |
|
backdrop-filter: blur(2px); |
|
-webkit-backdrop-filter: blur(2px); |
|
width: fit-content; |
|
max-width: none; |
|
} |
|
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group > button, |
|
.maplibregl-ctrl-bottom-right .maplibregl-ctrl button { |
|
background: transparent; |
|
width: 40px; |
|
height: 40px; |
|
} |
|
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group > button:hover, |
|
.maplibregl-ctrl-bottom-right .maplibregl-ctrl button:hover { |
|
background: rgba(255,255,255,0.14); |
|
} |
|
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group + .maplibregl-ctrl-group { |
|
margin-top: 0; |
|
} |
|
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-geolocate { |
|
border-radius: 999px; |
|
overflow: hidden; |
|
} |
|
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-scale { |
|
align-self: flex-end; |
|
background: var(--bottom-right-surface); |
|
border-radius: 8px; |
|
padding: 3px 8px; |
|
min-width: 0; |
|
text-align: center; |
|
color: rgba(0,0,0,0.8); |
|
box-sizing: border-box; |
|
} |
|
|
|
/* Elevation profile */ |
|
#profile-panel { |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
right: 0; |
|
z-index: 20; |
|
border-top: 1px solid rgba(0,0,0,0.12); |
|
height: 140px; |
|
display: none; |
|
} |
|
#profile-panel.visible { display: block; } |
|
#profile-panel canvas { width: 100% !important; } |
|
#profile-close { |
|
position: absolute; |
|
top: 2px; |
|
right: 6px; |
|
background: none; |
|
border: none; |
|
font-size: 16px; |
|
cursor: pointer; |
|
opacity: 0.5; |
|
z-index: 1; |
|
line-height: 1; |
|
} |
|
#profile-close:hover { opacity: 1; } |
|
|
|
/* Cursor tooltip (follows mouse) */ |
|
#cursor-tooltip { |
|
position: fixed; |
|
z-index: 30; |
|
pointer-events: none; |
|
background: rgba(255,255,255,0.92); |
|
border-radius: 6px; |
|
padding: 3px 7px; |
|
font-size: 11px; |
|
box-shadow: 0 1px 4px rgba(0,0,0,0.2); |
|
white-space: nowrap; |
|
display: none; |
|
} |
|
#cursor-tooltip.visible { display: block; } |
|
#cursor-tooltip code { background: rgba(0,0,0,0.05); padding: 1px 3px; border-radius: 2px; } |
|
|
|
/* Mobile crosshair (appears on tap) */ |
|
#mobile-crosshair { |
|
position: fixed; |
|
z-index: 25; |
|
pointer-events: none; |
|
display: none; |
|
width: 0; height: 0; |
|
} |
|
#mobile-crosshair.visible { display: block; } |
|
#mobile-crosshair::before, |
|
#mobile-crosshair::after { |
|
content: ''; |
|
position: absolute; |
|
background: rgba(0,0,0,0.55); |
|
} |
|
#mobile-crosshair::before { width: 1px; height: 24px; left: 0; top: -12px; } |
|
#mobile-crosshair::after { width: 24px; height: 1px; left: -12px; top: 0; } |
|
|
|
/* Draw-mode crosshair (center of screen, mobile) */ |
|
#draw-crosshair { |
|
position: absolute; |
|
top: 50%; left: 50%; |
|
z-index: 15; |
|
pointer-events: none; |
|
display: none; |
|
width: 0; height: 0; |
|
} |
|
#draw-crosshair.visible { display: block; } |
|
#draw-crosshair::before, |
|
#draw-crosshair::after { |
|
content: ''; |
|
position: absolute; |
|
background: rgba(74,144,217,0.7); |
|
} |
|
#draw-crosshair::before { width: 2px; height: 30px; left: -1px; top: -15px; } |
|
#draw-crosshair::after { width: 30px; height: 2px; left: -15px; top: -1px; } |
|
|
|
/* Toast notification */ |
|
#toast { |
|
position: absolute; |
|
bottom: 80px; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
z-index: 30; |
|
background: rgba(0,0,0,0.78); |
|
color: #fff; |
|
padding: 8px 18px; |
|
border-radius: 20px; |
|
font-size: 13px; |
|
white-space: nowrap; |
|
opacity: 0; |
|
transition: opacity 0.3s ease; |
|
pointer-events: none; |
|
} |
|
#toast.visible { opacity: 1; } |
|
|
|
/* Track edit button in track list */ |
|
.track-item .track-edit { |
|
background: none; border: none; cursor: pointer; |
|
font-size: 12px; opacity: 0.5; padding: 0 2px; |
|
} |
|
.track-item .track-edit:hover { opacity: 1; } |
|
.track-item .track-edit.active { opacity: 1; color: #4a90d9; } |
|
|
|
/* Undo-last-point button */ |
|
#undo-btn { font-size: 14px; } |
|
/* Mobile-friendly mode button */ |
|
#mobile-mode-btn { font-size: 14px; } |
|
#mobile-mode-btn.active { background: #4a90d9; color: #fff; } |
|
/* On-map insert popup near selected vertex */ |
|
.vertex-insert-popup { cursor: pointer; } |
|
.vertex-insert-popup .insert-popup-btn { |
|
background: rgba(255,255,255,0.94); |
|
border: 1.5px solid #4a90d9; |
|
border-radius: 50%; |
|
width: 24px; height: 24px; |
|
font-size: 16px; font-weight: 700; |
|
color: #4a90d9; |
|
cursor: pointer; |
|
display: flex; align-items: center; justify-content: center; |
|
box-shadow: 0 1px 4px rgba(0,0,0,0.18); |
|
line-height: 1; |
|
} |
|
.vertex-insert-popup .insert-popup-btn:hover, |
|
.vertex-insert-popup .insert-popup-btn.active { |
|
background: #4a90d9; color: #fff; |
|
} |
|
/* end track editor */ |
|
|
|
</style> |
|
<script src="https://unpkg.com/maplibre-gl@5.20.0/dist/maplibre-gl.js"></script> |
|
<script src="https://unpkg.com/maplibre-contour@0.0.5/dist/index.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3/dist/chartjs-plugin-annotation.min.js"></script> |
|
</head> |
|
<body> |
|
<div id="map"></div> |
|
|
|
<div id="controls-wrapper"> |
|
<div id="toolbar"> |
|
<button id="controls-toggle">🌍 Settings ▾</button> |
|
<div id="search-box"> |
|
<button id="search-icon">🔍</button> |
|
<input id="search-input" type="text" placeholder="Search location..." autocomplete="off" /> |
|
<div id="search-results"></div> |
|
</div> |
|
</div> |
|
<div id="controls" class="panel-surface panel-padded"> |
|
<div class="row"> |
|
<label for="mode"><strong>Mode</strong></label><br /> |
|
<select id="mode"> |
|
<option value=""></option> |
|
<option value="slope+relief" selected>Slope + Color relief</option> |
|
<option value="slope">Slope</option> |
|
<option value="aspect">Aspect</option> |
|
<option value="color-relief">Color relief</option> |
|
</select> |
|
</div> |
|
|
|
<div class="row"> |
|
<label for="basemap"><strong>Basemap</strong></label><br /> |
|
<select id="basemap"> |
|
<option value="osm" selected>OSM</option> |
|
<option value="otm">OTM</option> |
|
<option value="ign-plan">IGN plan (FR)</option> |
|
<option value="swisstopo-vector">SwissTopo vector</option> |
|
<option value="kartverket">Kartverket topo (NO)</option> |
|
</select> |
|
</div> |
|
|
|
<div class="row"> |
|
<label><input id="showContours" type="checkbox" checked /> Contour lines</label> |
|
</div> |
|
|
|
<div class="row"> |
|
<label><input id="showOpenSkiMap" type="checkbox" /> OpenSkiMap overlay</label> |
|
</div> |
|
|
|
<div class="row"> |
|
<label><input id="terrain3d" type="checkbox" /> 3D terrain</label> |
|
</div> |
|
|
|
<button id="advanced-toggle" type="button"><span class="arrow">▶</span> Advanced</button> |
|
<div id="advanced-section"> |
|
<div class="row"> |
|
<label for="basemapOpacity"><strong>Basemap opacity</strong>: <span id="basemapOpacityValue">1.00</span></label><br /> |
|
<input id="basemapOpacity" type="range" min="0" max="1" step="0.01" value="1" /> |
|
</div> |
|
|
|
<div class="row"> |
|
<label for="slopeOpacity"><strong>Analysis opacity</strong>: <span id="slopeOpacityValue">0.45</span></label><br /> |
|
<input id="slopeOpacity" type="range" min="0" max="1" step="0.01" value="0.45" /> |
|
</div> |
|
|
|
<div class="row"> |
|
<label for="hillshadeOpacity"><strong>Hillshade opacity</strong>: <span id="hillshadeOpacityValue">0.10</span></label><br /> |
|
<input id="hillshadeOpacity" type="range" min="0" max="1" step="0.01" value="0.10" /> |
|
</div> |
|
|
|
<div class="row"> |
|
<label for="hillshadeMethod"><strong>Hillshade method</strong></label><br /> |
|
<select id="hillshadeMethod"> |
|
<option value="standard">Standard</option> |
|
<option value="basic">Basic</option> |
|
<option value="combined">Combined</option> |
|
<option value="multidirectional" selected>Multidirectional</option> |
|
<option value="igor">Igor</option> |
|
</select> |
|
</div> |
|
|
|
<div class="row"> |
|
<label for="cursorInfoMode"><strong>Elevation & slope</strong></label><br /> |
|
<select id="cursorInfoMode"> |
|
<option value="cursor" selected>At cursor</option> |
|
<option value="corner">Corner</option> |
|
<option value="no">No</option> |
|
</select> |
|
</div> |
|
|
|
<div class="row"> |
|
<label><input id="multiplyBlend" type="checkbox" checked /> Multiply blend</label> |
|
</div> |
|
|
|
<div class="row"> |
|
<label><input id="showTileGrid" type="checkbox" /> Show DEM tile grid</label> |
|
</div> |
|
|
|
<div class="row"> |
|
<label for="terrainExaggeration"><strong>Terrain exaggeration</strong>: <span id="terrainExaggerationValue">1.40</span></label><br /> |
|
<input id="terrainExaggeration" type="range" min="1" max="3" step="0.1" value="1.4" disabled /> |
|
</div> |
|
|
|
<div id="status" class="row"> |
|
Internal backfilled DEM tiles: <code id="internalCount">0</code><br /> |
|
Fallback border-fixed tiles: <code id="fallbackCount">0</code> |
|
</div> |
|
|
|
<div class="row"> |
|
<button id="clear-data-btn" type="button" class="tb-btn" title="Clear saved tracks and settings from localStorage">Clear saved data</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div id="track-panel-shell"> |
|
<div id="track-tool-row"> |
|
<button id="mobile-mode-btn" class="tb-btn" title="Mobile-friendly edit mode" style="display:none">📱</button> |
|
<button id="undo-btn" class="tb-btn" title="Delete last point" style="display:none">🗑️</button> |
|
<button id="draw-btn" class="tb-btn" title="Draw track (click to add points, double-click to finish)">✎</button> |
|
<button id="tracks-btn" class="tb-btn" title="Track list" disabled>📍</button> |
|
</div> |
|
<div id="track-panel"> |
|
<div class="track-panel-header"> |
|
<h3>Tracks</h3> |
|
<button id="profile-toggle-btn" type="button">Profile</button> |
|
</div> |
|
<div id="track-list"></div> |
|
<div class="track-export-bar"> |
|
<button id="export-gpx-btn">Export GPX</button> |
|
<button id="export-geojson-btn">Export GeoJSON</button> |
|
<button id="export-all-gpx-btn">Export All</button> |
|
</div> |
|
<div class="track-export-bar"> |
|
<button id="open-folder-btn">Open folder…</button> |
|
<button id="save-folder-btn">Save to folder…</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div id="drop-overlay">Drop GPX / GeoJSON file here</div> |
|
<div id="mobile-move-hint">Pan map to move point • tap elsewhere to deselect</div> |
|
<div id="cursor-tooltip"></div> |
|
<div id="mobile-crosshair"></div> |
|
<div id="draw-crosshair"></div> |
|
<div id="toast"></div> |
|
|
|
<div id="profile-panel" class="panel-surface"> |
|
<button id="profile-close" title="Close">×</button> |
|
<canvas id="profile-canvas"></canvas> |
|
</div> |
|
|
|
<div id="legend" class="panel-surface panel-padded" style="background: rgba(255,255,255,0.3);"> |
|
<div id="legendRamp" class="ramp" title="Slope (degrees)"></div> |
|
<div id="legendLabels" class="labels"></div> |
|
<div id="cursor-info">Elevation: <code id="cursorElevation">n/a</code> · Slope: <code id="cursorSlope">n/a</code></div> |
|
</div> |
|
|
|
<script> |
|
(() => { |
|
var __getOwnPropNames = Object.getOwnPropertyNames; |
|
var __esm = (fn, res) => function __init() { |
|
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res; |
|
}; |
|
var __commonJS = (cb, mod) => function __require() { |
|
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; |
|
}; |
|
|
|
// utils.js |
|
function haversineKm(a, b) { |
|
const R = 6371; |
|
const dLat = (b[1] - a[1]) * Math.PI / 180; |
|
const dLon = (b[0] - a[0]) * Math.PI / 180; |
|
const la = a[1] * Math.PI / 180, lb = b[1] * Math.PI / 180; |
|
const h = Math.sin(dLat / 2) ** 2 + Math.cos(la) * Math.cos(lb) * Math.sin(dLon / 2) ** 2; |
|
return R * 2 * Math.atan2(Math.sqrt(h), Math.sqrt(1 - h)); |
|
} |
|
function normalizeTileX(x, z) { |
|
const n = Math.pow(2, z); |
|
return (x % n + n) % n; |
|
} |
|
function lonLatToTile(lon, lat, z) { |
|
const n = Math.pow(2, z); |
|
const x = Math.floor((lon + 180) / 360 * n); |
|
const latRad = lat * Math.PI / 180; |
|
const y = Math.floor((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2 * n); |
|
return { x, y }; |
|
} |
|
function tileToLngLatBounds(x, y, z) { |
|
const n = Math.pow(2, z); |
|
const west = x / n * 360 - 180; |
|
const east = (x + 1) / n * 360 - 180; |
|
const northRad = Math.atan(Math.sinh(Math.PI * (1 - 2 * y / n))); |
|
const southRad = Math.atan(Math.sinh(Math.PI * (1 - 2 * (y + 1) / n))); |
|
return { |
|
west, |
|
east, |
|
north: northRad * 180 / Math.PI, |
|
south: southRad * 180 / Math.PI |
|
}; |
|
} |
|
function mercatorVertsForTile(z, x, y, wrap) { |
|
const n = Math.pow(2, z); |
|
const x0 = x / n + wrap; |
|
const x1 = (x + 1) / n + wrap; |
|
const y0 = y / n; |
|
const y1 = (y + 1) / n; |
|
return new Float32Array([ |
|
x0, |
|
y0, |
|
0, |
|
0, |
|
x0, |
|
y1, |
|
0, |
|
1, |
|
x1, |
|
y0, |
|
1, |
|
0, |
|
x1, |
|
y1, |
|
1, |
|
1 |
|
]); |
|
} |
|
function decodeTerrarium(r, g, b) { |
|
return r * 256 + g + b / 256 - 32768; |
|
} |
|
function encodeTerrarium(elevation, out, byteIndex) { |
|
const v = elevation + 32768; |
|
let r = Math.floor(v / 256); |
|
let g = Math.floor(v - r * 256); |
|
let b = Math.round((v - r * 256 - g) * 256); |
|
r = Math.max(0, Math.min(255, r)); |
|
g = Math.max(0, Math.min(255, g)); |
|
b = Math.max(0, Math.min(255, b)); |
|
out[byteIndex] = r; |
|
out[byteIndex + 1] = g; |
|
out[byteIndex + 2] = b; |
|
out[byteIndex + 3] = 255; |
|
} |
|
function cssColorToRgb01(color) { |
|
colorCtx.clearRect(0, 0, 1, 1); |
|
colorCtx.fillStyle = "#000000"; |
|
colorCtx.fillStyle = color; |
|
colorCtx.fillRect(0, 0, 1, 1); |
|
const pixel = colorCtx.getImageData(0, 0, 1, 1).data; |
|
return [pixel[0] / 255, pixel[1] / 255, pixel[2] / 255]; |
|
} |
|
function downloadFile(name, content, mime) { |
|
const a = document.createElement("a"); |
|
a.href = URL.createObjectURL(new Blob([content], { type: mime })); |
|
a.download = name; |
|
a.click(); |
|
URL.revokeObjectURL(a.href); |
|
} |
|
function parseBooleanParam(value) { |
|
if (value == null || value === "") return null; |
|
const normalized = String(value).trim().toLowerCase(); |
|
if (["1", "true", "yes", "on"].includes(normalized)) return true; |
|
if (["0", "false", "no", "off"].includes(normalized)) return false; |
|
return null; |
|
} |
|
var colorCanvas, colorCtx; |
|
var init_utils = __esm({ |
|
"utils.js"() { |
|
colorCanvas = document.createElement("canvas"); |
|
colorCanvas.width = 1; |
|
colorCanvas.height = 1; |
|
colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true }); |
|
} |
|
}); |
|
|
|
// constants.js |
|
function demTileUrl(z, x, y) { |
|
return DEM_TILE_URL_TEMPLATE.replace("{z}", String(z)).replace("{x}", String(x)).replace("{y}", String(y)); |
|
} |
|
function parseStepRamp(expression, expectedInput) { |
|
if (!Array.isArray(expression) || expression[0] !== "step") { |
|
throw new Error("Color expression must be a step expression"); |
|
} |
|
const input = expression[1]; |
|
if (!Array.isArray(input) || input[0] !== expectedInput) { |
|
throw new Error(`Step input must be ["${expectedInput}"]`); |
|
} |
|
const defaultColor = expression[2]; |
|
const stepCount = Math.floor((expression.length - 3) / 2); |
|
if (stepCount > MAX_STEP_STOPS) { |
|
throw new Error(`Too many step stops. Max supported is ${MAX_STEP_STOPS}`); |
|
} |
|
const values = new Float32Array(MAX_STEP_STOPS); |
|
const colors = new Float32Array((MAX_STEP_STOPS + 1) * 3); |
|
const c0 = cssColorToRgb01(defaultColor); |
|
colors[0] = c0[0]; |
|
colors[1] = c0[1]; |
|
colors[2] = c0[2]; |
|
for (let i = 0; i < stepCount; i++) { |
|
values[i] = Number(expression[3 + i * 2]); |
|
const c = cssColorToRgb01(expression[4 + i * 2]); |
|
colors[(i + 1) * 3 + 0] = c[0]; |
|
colors[(i + 1) * 3 + 1] = c[1]; |
|
colors[(i + 1) * 3 + 2] = c[2]; |
|
} |
|
return { stepCount, values, colors }; |
|
} |
|
function parseInterpolateStops(expression, expectedInput) { |
|
if (!Array.isArray(expression) || expression[0] !== "interpolate") { |
|
throw new Error("Color expression must be an interpolate expression"); |
|
} |
|
const input = expression[2]; |
|
if (!Array.isArray(input) || input[0] !== expectedInput) { |
|
throw new Error(`Interpolate input must be ["${expectedInput}"]`); |
|
} |
|
const stops = []; |
|
for (let i = 3; i < expression.length; i += 2) { |
|
stops.push({ |
|
value: Number(expression[i]), |
|
color: String(expression[i + 1]) |
|
}); |
|
} |
|
return stops; |
|
} |
|
function rampToLegendCss(mode) { |
|
const ramp = PARSED_RAMPS[mode]; |
|
const range = ANALYSIS_RANGE[mode]; |
|
const min = range[0]; |
|
const max = range[1]; |
|
const parts = []; |
|
function pct(value) { |
|
return Math.max(0, Math.min(100, (value - min) / (max - min) * 100)); |
|
} |
|
function rgb(i) { |
|
const r = Math.round(ramp.colors[i * 3 + 0] * 255); |
|
const g = Math.round(ramp.colors[i * 3 + 1] * 255); |
|
const b = Math.round(ramp.colors[i * 3 + 2] * 255); |
|
return `rgb(${r}, ${g}, ${b})`; |
|
} |
|
for (let i = 0; i <= ramp.stepCount; i++) { |
|
const startPct = i === 0 ? 0 : pct(ramp.values[i - 1]); |
|
const endPct = i < ramp.stepCount ? pct(ramp.values[i]) : 100; |
|
parts.push(`${rgb(i)} ${startPct.toFixed(2)}% ${endPct.toFixed(2)}%`); |
|
} |
|
return `linear-gradient(to right, ${parts.join(", ")})`; |
|
} |
|
function interpolateStopsToLegendCss(stops) { |
|
const parts = stops.map(({ value, color }, index) => { |
|
const position = Math.max(0, Math.min(100, (value - stops[0].value) / (stops[stops.length - 1].value - stops[0].value) * 100)); |
|
return `${color} ${position.toFixed(2)}%`; |
|
}); |
|
return `linear-gradient(to right, ${parts.join(", ")})`; |
|
} |
|
var DEM_TILE_URL_TEMPLATE, MAX_STEP_STOPS, DEM_SOURCE_ID, DEM_MAX_Z, SLOPE_RELIEF_CROSSFADE_Z, CORE_DIM, PAD_STRIDE, TRACK_COLORS, ANALYSIS_COLOR, ANALYSIS_RANGE, PARSED_RAMPS, COLOR_RELIEF_STOPS, BASEMAP_LAYER_GROUPS, BASEMAP_DEFAULT_VIEW, OPENSKIMAP_LAYER_IDS, ALL_BASEMAP_LAYER_IDS; |
|
var init_constants = __esm({ |
|
"constants.js"() { |
|
init_utils(); |
|
DEM_TILE_URL_TEMPLATE = "https://tiles.mapterhorn.com/{z}/{x}/{y}.webp"; |
|
MAX_STEP_STOPS = 16; |
|
DEM_SOURCE_ID = "dem"; |
|
DEM_MAX_Z = 14; |
|
SLOPE_RELIEF_CROSSFADE_Z = 11; |
|
CORE_DIM = 512; |
|
PAD_STRIDE = CORE_DIM + 2; |
|
TRACK_COLORS = ["#e040fb", "#ff5252", "#00e676", "#ffab00", "#2979ff", "#00e5ff", "#ff6e40", "#d500f9"]; |
|
ANALYSIS_COLOR = { |
|
slope: [ |
|
"step", |
|
["slope"], |
|
"#ffffff", |
|
// white |
|
20, |
|
"#c0ffff", |
|
// light sky blue |
|
24, |
|
"#57ffff", |
|
// bright cyan |
|
28, |
|
"#00d3db", |
|
// aqua blue |
|
31, |
|
"#fffa32", |
|
// sunshine yellow |
|
34, |
|
"#ffc256", |
|
// macaroni |
|
37, |
|
"#fd7100", |
|
// orange |
|
40, |
|
"#ff0000", |
|
// cherry red |
|
43, |
|
"#e958ff", |
|
// heliotrope |
|
47, |
|
"#a650ff", |
|
// lighter purple |
|
52, |
|
"#5e1eff", |
|
// purplish blue |
|
57, |
|
"#0000ff", |
|
// rich blue |
|
65, |
|
"#aaaaaa" |
|
// cool grey |
|
], |
|
aspect: [ |
|
"step", |
|
["aspect"], |
|
"#ff0000", |
|
45, |
|
"#ffff00", |
|
135, |
|
"#00ff00", |
|
225, |
|
"#00ffff", |
|
315, |
|
"#0000ff" |
|
], |
|
"color-relief": [ |
|
"interpolate", |
|
["linear"], |
|
["elevation"], |
|
-250, |
|
"#315C8D", |
|
-0.1, |
|
"#A9D4E8", |
|
0, |
|
"#A9D4E8", |
|
0.1, |
|
"#A9D4E8", |
|
50, |
|
"#809E47", |
|
100, |
|
"#B3C57D", |
|
250, |
|
"#D1D98C", |
|
500, |
|
"#C8B75F", |
|
750, |
|
"#A38766", |
|
1e3, |
|
"#836A4E", |
|
1500, |
|
"#705B43", |
|
2e3, |
|
"#604E39", |
|
2500, |
|
"#C2AB94", |
|
3e3, |
|
"#D9CCBF", |
|
4e3, |
|
"#ECE6DF", |
|
5e3, |
|
"#F6F2EF", |
|
6e3, |
|
"#FFFFFF", |
|
8e3, |
|
"#F5FDFF" |
|
] |
|
}; |
|
ANALYSIS_RANGE = { |
|
slope: [0, 90], |
|
aspect: [0, 360], |
|
"color-relief": [-250, 8e3] |
|
}; |
|
PARSED_RAMPS = { |
|
slope: parseStepRamp(ANALYSIS_COLOR.slope, "slope"), |
|
aspect: parseStepRamp(ANALYSIS_COLOR.aspect, "aspect") |
|
}; |
|
COLOR_RELIEF_STOPS = parseInterpolateStops(ANALYSIS_COLOR["color-relief"], "elevation"); |
|
BASEMAP_LAYER_GROUPS = { |
|
"osm": ["basemap-osm"], |
|
"otm": ["basemap-otm"], |
|
"ign-plan": ["basemap-ign"], |
|
"swisstopo-vector": [ |
|
"basemap-swiss-landcover", |
|
"basemap-swiss-water", |
|
"basemap-swiss-transport", |
|
"basemap-swiss-boundary", |
|
"basemap-swiss-label" |
|
], |
|
"kartverket": ["basemap-kartverket"] |
|
}; |
|
BASEMAP_DEFAULT_VIEW = { |
|
"kartverket": { center: [13, 67], zoom: 6, bounds: [3, 57, 32, 72] }, |
|
"ign-plan": { center: [2.35, 46.8], zoom: 6, bounds: [-5.5, 41, 10, 51.5] }, |
|
"swisstopo-vector": { center: [8.23, 46.82], zoom: 8, bounds: [5.9, 45.8, 10.5, 47.8] } |
|
}; |
|
OPENSKIMAP_LAYER_IDS = [ |
|
"basemap-ski-areas", |
|
"basemap-ski-runs", |
|
"basemap-ski-lifts", |
|
"basemap-ski-spots" |
|
]; |
|
ALL_BASEMAP_LAYER_IDS = [...new Set(Object.values(BASEMAP_LAYER_GROUPS).flat())]; |
|
} |
|
}); |
|
|
|
// state.js |
|
function createStore(initial, onChange) { |
|
return new Proxy({ ...initial }, { |
|
set(target, key, value) { |
|
const old = target[key]; |
|
target[key] = value; |
|
if (old !== value && onChange) onChange(key, value, old); |
|
return true; |
|
} |
|
}); |
|
} |
|
var STATE_DEFAULTS; |
|
var init_state = __esm({ |
|
"state.js"() { |
|
STATE_DEFAULTS = { |
|
mode: "slope+relief", |
|
basemap: "osm", |
|
basemapOpacity: 1, |
|
hillshadeOpacity: 0.1, |
|
hillshadeMethod: "igor", |
|
slopeOpacity: 0.45, |
|
effectiveSlopeOpacity: 0.45, |
|
showContours: true, |
|
showOpenSkiMap: false, |
|
showTileGrid: false, |
|
cursorInfoMode: "cursor", |
|
multiplyBlend: true, |
|
terrain3d: false, |
|
terrainExaggeration: 1.4, |
|
internalCount: 0, |
|
fallbackCount: 0 |
|
}; |
|
} |
|
}); |
|
|
|
// ui.js |
|
function setLayerVisibilitySafe(map4, layerId, visible) { |
|
if (!map4.getLayer(layerId)) return; |
|
map4.setLayoutProperty(layerId, "visibility", visible ? "visible" : "none"); |
|
} |
|
function setGlobalStatePropertySafe(map4, name, value) { |
|
if (typeof map4.setGlobalStateProperty === "function") { |
|
map4.setGlobalStateProperty(name, value); |
|
} |
|
} |
|
function basemapOpacityExpr(multiplier = 1) { |
|
const base = ["coalesce", ["global-state", "basemapOpacity"], 1]; |
|
if (multiplier === 1) return base; |
|
return ["*", multiplier, base]; |
|
} |
|
function applyBasemapSelection(map4, state4, flyIfOutside) { |
|
const activeList = BASEMAP_LAYER_GROUPS[state4.basemap] || BASEMAP_LAYER_GROUPS.osm; |
|
const active = new Set(activeList); |
|
for (const layerId of ALL_BASEMAP_LAYER_IDS) { |
|
setLayerVisibilitySafe(map4, layerId, active.has(layerId)); |
|
} |
|
for (const layerId of activeList) { |
|
if (map4.getLayer(layerId) && map4.getLayer("dem-loader")) { |
|
map4.moveLayer(layerId, "dem-loader"); |
|
} |
|
} |
|
for (const layerId of OPENSKIMAP_LAYER_IDS) { |
|
if (map4.getLayer(layerId) && map4.getLayer("dem-loader")) { |
|
map4.moveLayer(layerId, "dem-loader"); |
|
} |
|
} |
|
if (flyIfOutside) { |
|
const dv = BASEMAP_DEFAULT_VIEW[state4.basemap]; |
|
if (dv && dv.bounds) { |
|
const c = map4.getCenter(); |
|
const [w, s, e, n] = dv.bounds; |
|
if (c.lng < w || c.lng > e || c.lat < s || c.lat > n) { |
|
map4.flyTo({ center: dv.center, zoom: dv.zoom, duration: 1500 }); |
|
} |
|
} |
|
} |
|
const shouldShowContours = state4.basemap === "osm"; |
|
state4.showContours = shouldShowContours; |
|
const contourCb = document.getElementById("showContours"); |
|
if (contourCb) contourCb.checked = shouldShowContours; |
|
applyContourVisibility(map4, state4); |
|
} |
|
function applyContourVisibility(map4, state4) { |
|
setLayerVisibilitySafe(map4, "contours", state4.showContours); |
|
setLayerVisibilitySafe(map4, "contour-text", state4.showContours); |
|
} |
|
function applyOpenSkiMapOverlay(map4, state4) { |
|
for (const id of OPENSKIMAP_LAYER_IDS) { |
|
setLayerVisibilitySafe(map4, id, state4.showOpenSkiMap); |
|
} |
|
} |
|
function applyTerrainState(map4, state4) { |
|
if (state4.terrain3d) { |
|
map4.setTerrain({ source: DEM_SOURCE_ID, exaggeration: state4.terrainExaggeration }); |
|
} else { |
|
map4.setTerrain(null); |
|
} |
|
} |
|
function updateLegend(state4, map4) { |
|
const legend = document.getElementById("legend"); |
|
const ramp = document.getElementById("legendRamp"); |
|
const labels = document.getElementById("legendLabels"); |
|
const effectiveMode = state4.mode === "slope+relief" ? typeof map4 !== "undefined" && map4.getZoom() < SLOPE_RELIEF_CROSSFADE_Z ? "color-relief" : "slope" : state4.mode; |
|
if (!effectiveMode) { |
|
legend.classList.add("cursor-only"); |
|
ramp.title = ""; |
|
ramp.style.background = "none"; |
|
labels.innerHTML = ""; |
|
} else if (effectiveMode === "slope") { |
|
legend.classList.remove("cursor-only"); |
|
ramp.title = "Slope (degrees)"; |
|
ramp.style.background = rampToLegendCss("slope"); |
|
labels.innerHTML = '<div class="legend-ticks"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><div class="legend-ticks"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><span>0\xB0</span><span>15\xB0</span><span>30\xB0</span><span>45\xB0</span><span>60\xB0</span><span>75\xB0</span><span>90\xB0</span>'; |
|
} else if (effectiveMode === "aspect") { |
|
legend.classList.remove("cursor-only"); |
|
ramp.title = "Aspect (compass direction)"; |
|
ramp.style.background = rampToLegendCss("aspect"); |
|
labels.innerHTML = '<div class="legend-ticks"><span></span><span></span><span></span><span></span><span></span></div><span>N</span><span>E</span><span>S</span><span>W</span><span>N</span>'; |
|
} else { |
|
legend.classList.remove("cursor-only"); |
|
ramp.title = "Elevation color relief (meters)"; |
|
ramp.style.background = interpolateStopsToLegendCss(COLOR_RELIEF_STOPS); |
|
labels.innerHTML = '<div class="legend-ticks"><span></span><span></span><span></span><span></span><span></span><span></span></div><span>-250 m</span><span>0 m</span><span>500 m</span><span>1500 m</span><span>3000 m</span><span>8000 m</span>'; |
|
} |
|
} |
|
function computeEffectiveSlopeOpacity(state4, map4) { |
|
if (state4.mode !== "slope+relief") { |
|
state4.effectiveSlopeOpacity = state4.slopeOpacity; |
|
return; |
|
} |
|
const z = map4.getZoom(); |
|
const t = Math.max(0, Math.min(1, z - (SLOPE_RELIEF_CROSSFADE_Z - 1))); |
|
state4.effectiveSlopeOpacity = state4.slopeOpacity * t; |
|
} |
|
function applyModeState(map4, state4) { |
|
computeEffectiveSlopeOpacity(state4, map4); |
|
if (map4.getLayer("dem-color-relief")) { |
|
if (state4.mode === "slope+relief") { |
|
map4.setLayoutProperty("dem-color-relief", "visibility", "visible"); |
|
map4.setPaintProperty( |
|
"dem-color-relief", |
|
"color-relief-opacity", |
|
[ |
|
"interpolate", |
|
["linear"], |
|
["zoom"], |
|
SLOPE_RELIEF_CROSSFADE_Z - 1, |
|
state4.slopeOpacity, |
|
SLOPE_RELIEF_CROSSFADE_Z, |
|
0 |
|
] |
|
); |
|
} else { |
|
map4.setLayoutProperty("dem-color-relief", "visibility", state4.mode === "color-relief" ? "visible" : "none"); |
|
map4.setPaintProperty("dem-color-relief", "color-relief-opacity", state4.slopeOpacity); |
|
} |
|
} |
|
} |
|
function setCursorInfo(state4, eleText, slopeText) { |
|
if (state4.cursorInfoMode === "corner") { |
|
const el = document.getElementById("cursorElevation"); |
|
if (el) el.textContent = eleText; |
|
const sl = document.getElementById("cursorSlope"); |
|
if (sl) sl.textContent = slopeText || "n/a"; |
|
} |
|
} |
|
function showCursorTooltipAt(state4, screenX, screenY, eleText, slopeText) { |
|
if (state4.cursorInfoMode !== "cursor") { |
|
cursorTooltip.classList.remove("visible"); |
|
return; |
|
} |
|
cursorTooltip.innerHTML = `Elev: <code>${eleText}</code> \xB7 Slope: <code>${slopeText || "n/a"}</code>`; |
|
cursorTooltip.style.left = screenX + 15 + "px"; |
|
cursorTooltip.style.top = screenY + 15 + "px"; |
|
cursorTooltip.classList.add("visible"); |
|
} |
|
function hideCursorTooltip() { |
|
cursorTooltip.classList.remove("visible"); |
|
} |
|
function updateCursorInfoVisibility(state4) { |
|
const cursorInfoEl = document.getElementById("cursor-info"); |
|
if (state4.cursorInfoMode === "corner") { |
|
if (cursorInfoEl) cursorInfoEl.style.display = ""; |
|
} else { |
|
if (cursorInfoEl) cursorInfoEl.style.display = "none"; |
|
hideCursorTooltip(); |
|
} |
|
} |
|
function parseHashParams() { |
|
const hash = window.location.hash.replace(/^#/, ""); |
|
const fallback = { |
|
center: [6.8652, 45.8326], |
|
zoom: 12, |
|
basemap: null, |
|
mode: "slope+relief", |
|
slopeOpacity: 0.45, |
|
terrain3d: false, |
|
terrainExaggeration: 1.4, |
|
bearing: 0, |
|
pitch: 0 |
|
}; |
|
if (hash.includes("=")) { |
|
const params = new URLSearchParams(hash); |
|
const lngRaw = Number(params.get("lng")); |
|
const latRaw = Number(params.get("lat")); |
|
const zoomRaw = Number(params.get("zoom")); |
|
const basemapRaw = (params.get("basemap") || "").trim(); |
|
const modeRaw = (params.get("mode") || "").trim(); |
|
const opacityRaw = Number(params.get("opacity")); |
|
const terrain3dRaw = parseBooleanParam(params.get("terrain")); |
|
const terrainExaggerationRaw = Number(params.get("exaggeration")); |
|
const bearingRaw = Number(params.get("bearing")); |
|
const pitchRaw = Number(params.get("pitch")); |
|
const hasLng = Number.isFinite(lngRaw) && lngRaw >= -180 && lngRaw <= 180; |
|
const hasLat = Number.isFinite(latRaw) && latRaw >= -85.051129 && latRaw <= 85.051129; |
|
const hasZoom = Number.isFinite(zoomRaw) && zoomRaw >= 0 && zoomRaw <= 24; |
|
const hasOpacity = Number.isFinite(opacityRaw) && opacityRaw >= 0 && opacityRaw <= 1; |
|
const hasTerrainExaggeration = Number.isFinite(terrainExaggerationRaw) && terrainExaggerationRaw >= 1 && terrainExaggerationRaw <= 3; |
|
const hasBearing = Number.isFinite(bearingRaw); |
|
const hasPitch = Number.isFinite(pitchRaw) && pitchRaw >= 0 && pitchRaw <= 85; |
|
const validModes = /* @__PURE__ */ new Set(["", "slope+relief", "slope", "aspect", "color-relief"]); |
|
return { |
|
center: hasLng && hasLat ? [lngRaw, latRaw] : fallback.center, |
|
zoom: hasZoom ? zoomRaw : fallback.zoom, |
|
basemap: basemapRaw && BASEMAP_LAYER_GROUPS[basemapRaw] ? basemapRaw : null, |
|
mode: validModes.has(modeRaw) ? modeRaw : fallback.mode, |
|
slopeOpacity: hasOpacity ? opacityRaw : fallback.slopeOpacity, |
|
terrain3d: terrain3dRaw == null ? fallback.terrain3d : terrain3dRaw, |
|
terrainExaggeration: hasTerrainExaggeration ? terrainExaggerationRaw : fallback.terrainExaggeration, |
|
bearing: hasBearing ? bearingRaw : fallback.bearing, |
|
pitch: hasPitch ? pitchRaw : fallback.pitch |
|
}; |
|
} |
|
return fallback; |
|
} |
|
function syncViewToUrl(map4, state4) { |
|
const center = map4.getCenter(); |
|
const zoom = map4.getZoom(); |
|
const bearing = map4.getBearing(); |
|
const pitch = map4.getPitch(); |
|
const params = new URLSearchParams(); |
|
params.set("lng", center.lng.toFixed(6)); |
|
params.set("lat", center.lat.toFixed(6)); |
|
params.set("zoom", zoom.toFixed(2)); |
|
params.set("basemap", state4.basemap); |
|
params.set("mode", state4.mode); |
|
params.set("opacity", state4.slopeOpacity.toFixed(2)); |
|
params.set("terrain", state4.terrain3d ? "1" : "0"); |
|
params.set("exaggeration", state4.terrainExaggeration.toFixed(2)); |
|
params.set("bearing", bearing.toFixed(2)); |
|
params.set("pitch", pitch.toFixed(2)); |
|
const hash = `#${params.toString()}`; |
|
window.history.replaceState(null, "", `${window.location.pathname}${window.location.search}${hash}`); |
|
} |
|
function updateStatus(state4) { |
|
document.getElementById("internalCount").textContent = String(state4.internalCount); |
|
document.getElementById("fallbackCount").textContent = String(state4.fallbackCount); |
|
} |
|
function getVisibleTriplesForMap(map4) { |
|
const z = Math.min(DEM_MAX_Z, Math.max(0, Math.floor(map4.getZoom()))); |
|
const bounds = map4.getBounds(); |
|
const north = bounds.getNorth(); |
|
const south = bounds.getSouth(); |
|
const west = bounds.getWest(); |
|
const east = bounds.getEast(); |
|
const lonRanges = west <= east ? [[west, east]] : [[west, 180], [-180, east]]; |
|
const out = []; |
|
for (const range of lonRanges) { |
|
const nw = lonLatToTile(range[0], north, z); |
|
const se = lonLatToTile(range[1], south, z); |
|
const xMin = Math.min(nw.x, se.x); |
|
const xMax = Math.max(nw.x, se.x); |
|
const yMin = Math.min(nw.y, se.y); |
|
const yMax = Math.max(nw.y, se.y); |
|
for (let y = yMin; y <= yMax; y++) { |
|
if (y < 0 || y >= Math.pow(2, z)) continue; |
|
for (let x = xMin; x <= xMax; x++) { |
|
const wx = normalizeTileX(x, z); |
|
out.push({ z, x: wx, y, key: `${z}/${wx}/${y}` }); |
|
} |
|
} |
|
} |
|
return out; |
|
} |
|
function initSearch(map4) { |
|
const searchBox = document.getElementById("search-box"); |
|
const searchIcon = document.getElementById("search-icon"); |
|
const searchInput = document.getElementById("search-input"); |
|
const searchResults = document.getElementById("search-results"); |
|
let searchDebounce = 0; |
|
let searchAbort = null; |
|
function expandSearch() { |
|
searchBox.classList.add("expanded"); |
|
searchInput.focus(); |
|
} |
|
function collapseSearch() { |
|
searchBox.classList.remove("expanded"); |
|
searchInput.value = ""; |
|
searchResults.classList.remove("visible"); |
|
searchResults.innerHTML = ""; |
|
} |
|
searchIcon.addEventListener("click", () => { |
|
if (searchBox.classList.contains("expanded")) { |
|
collapseSearch(); |
|
} else { |
|
expandSearch(); |
|
} |
|
}); |
|
searchBox.addEventListener("mouseenter", () => { |
|
if (!searchBox.classList.contains("expanded")) expandSearch(); |
|
}); |
|
document.addEventListener("click", (e) => { |
|
if (!searchBox.contains(e.target)) collapseSearch(); |
|
}); |
|
searchInput.addEventListener("keydown", (e) => { |
|
if (e.key === "Escape") collapseSearch(); |
|
}); |
|
async function nominatimSearch(query) { |
|
if (searchAbort) searchAbort.abort(); |
|
searchAbort = new AbortController(); |
|
const url = `https://nominatim.openstreetmap.org/search?format=json&limit=5&q=${encodeURIComponent(query)}`; |
|
const resp = await fetch(url, { |
|
signal: searchAbort.signal, |
|
headers: { "Accept-Language": navigator.language || "en" } |
|
}); |
|
return resp.json(); |
|
} |
|
function renderResults(results) { |
|
searchResults.innerHTML = ""; |
|
if (!results.length) { |
|
searchResults.classList.remove("visible"); |
|
return; |
|
} |
|
for (const r of results) { |
|
const div = document.createElement("div"); |
|
div.className = "search-result"; |
|
const nameParts = r.display_name.split(", "); |
|
const name = nameParts[0]; |
|
const detail = nameParts.slice(1, 3).join(", "); |
|
div.innerHTML = `<div class="search-result-name">${name}</div><div class="search-result-detail">${detail}</div>`; |
|
div.addEventListener("click", () => { |
|
const lon = parseFloat(r.lon); |
|
const lat = parseFloat(r.lat); |
|
const bbox = r.boundingbox; |
|
if (bbox) { |
|
map4.fitBounds([[parseFloat(bbox[2]), parseFloat(bbox[0])], [parseFloat(bbox[3]), parseFloat(bbox[1])]], { |
|
padding: 40, |
|
maxZoom: 15, |
|
duration: 1500 |
|
}); |
|
} else { |
|
map4.flyTo({ center: [lon, lat], zoom: 13, duration: 1500 }); |
|
} |
|
collapseSearch(); |
|
}); |
|
searchResults.appendChild(div); |
|
} |
|
searchResults.classList.add("visible"); |
|
} |
|
searchInput.addEventListener("input", () => { |
|
const q = searchInput.value.trim(); |
|
clearTimeout(searchDebounce); |
|
if (q.length < 2) { |
|
searchResults.classList.remove("visible"); |
|
searchResults.innerHTML = ""; |
|
return; |
|
} |
|
searchDebounce = setTimeout(async () => { |
|
try { |
|
const results = await nominatimSearch(q); |
|
renderResults(results); |
|
} catch (err) { |
|
if (err.name !== "AbortError") console.error("Search failed:", err); |
|
} |
|
}, 350); |
|
}); |
|
} |
|
var cursorTooltip; |
|
var init_ui = __esm({ |
|
"ui.js"() { |
|
init_constants(); |
|
init_utils(); |
|
cursorTooltip = document.getElementById("cursor-tooltip"); |
|
} |
|
}); |
|
|
|
// dem.js |
|
function sampleElevationFromDEMData(dem, fx, fy) { |
|
if (!dem || typeof dem.get !== "function" || typeof dem.dim !== "number") return null; |
|
const dim = dem.dim; |
|
const px = Math.max(0, Math.min(dim - 1, fx * dim)); |
|
const py = Math.max(0, Math.min(dim - 1, fy * dim)); |
|
const x0 = Math.floor(px); |
|
const y0 = Math.floor(py); |
|
const x1 = Math.min(x0 + 1, dim - 1); |
|
const y1 = Math.min(y0 + 1, dim - 1); |
|
const tx = px - x0; |
|
const ty = py - y0; |
|
const e00 = dem.get(x0, y0); |
|
const e10 = dem.get(x1, y0); |
|
const e01 = dem.get(x0, y1); |
|
const e11 = dem.get(x1, y1); |
|
return (1 - tx) * (1 - ty) * e00 + tx * (1 - ty) * e10 + (1 - tx) * ty * e01 + tx * ty * e11; |
|
} |
|
function queryLoadedElevationAtLngLat(map4, lngLat) { |
|
const style = map4 && map4.style; |
|
const tileManager = style && style.tileManagers && style.tileManagers[DEM_SOURCE_ID]; |
|
if (!tileManager || !tileManager.getRenderableIds || !tileManager.getTileByID) return null; |
|
const tilesByCanonical = /* @__PURE__ */ new Map(); |
|
for (const id of tileManager.getRenderableIds()) { |
|
const tile = tileManager.getTileByID(id); |
|
if (!tile || !tile.dem || !tile.tileID || !tile.tileID.canonical) continue; |
|
const c = tile.tileID.canonical; |
|
tilesByCanonical.set(`${c.z}/${c.x}/${c.y}`, tile); |
|
} |
|
const lat = Math.max(-85.051129, Math.min(85.051129, lngLat.lat)); |
|
const lngWrapped = ((lngLat.lng + 180) % 360 + 360) % 360 - 180; |
|
const rad = lat * Math.PI / 180; |
|
const mx = Math.max(0, Math.min(1 - 1e-15, (lngWrapped + 180) / 360)); |
|
const my = Math.max(0, Math.min(1 - 1e-15, (1 - Math.log(Math.tan(rad) + 1 / Math.cos(rad)) / Math.PI) / 2)); |
|
const maxZ = Math.min(typeof tileManager.maxzoom === "number" ? tileManager.maxzoom : DEM_MAX_Z, DEM_MAX_Z); |
|
const minZ = Math.max(typeof tileManager.minzoom === "number" ? tileManager.minzoom : 0, 0); |
|
for (let z = maxZ; z >= minZ; z--) { |
|
const n = Math.pow(2, z); |
|
const x = Math.min(Math.floor(mx * n), n - 1); |
|
const y = Math.min(Math.floor(my * n), n - 1); |
|
const tile = tilesByCanonical.get(`${z}/${x}/${y}`); |
|
if (!tile || !tile.dem) continue; |
|
const fx = mx * n - x; |
|
const fy = my * n - y; |
|
const elevation = sampleElevationFromDEMData(tile.dem, fx, fy); |
|
if (elevation === null) continue; |
|
const dim = tile.dem.dim; |
|
const px = fx * dim, py = fy * dim; |
|
const dx = 1; |
|
const eL = sampleElevationFromDEMData(tile.dem, Math.max(0, px - dx) / dim, fy); |
|
const eR = sampleElevationFromDEMData(tile.dem, Math.min(dim - 1, px + dx) / dim, fy); |
|
const eD = sampleElevationFromDEMData(tile.dem, fx, Math.max(0, py - dx) / dim); |
|
const eU = sampleElevationFromDEMData(tile.dem, fx, Math.min(dim - 1, py + dx) / dim); |
|
let slopeDeg = null; |
|
if (eL != null && eR != null && eD != null && eU != null) { |
|
const latRad = lat * Math.PI / 180; |
|
const cellMeters = 400750167e-1 / n / dim * Math.cos(latRad); |
|
const dzx = (eR - eL) / (2 * cellMeters); |
|
const dzy = (eU - eD) / (2 * cellMeters); |
|
slopeDeg = Math.atan(Math.sqrt(dzx * dzx + dzy * dzy)) * 180 / Math.PI; |
|
} |
|
return { elevation, slopeDeg, tileZoom: z }; |
|
} |
|
return null; |
|
} |
|
function idxPad(x, y) { |
|
return (y + 1) * PAD_STRIDE + (x + 1); |
|
} |
|
function createFallbackTileRecord(z, x, y) { |
|
return { |
|
key: `${z}/${x}/${y}`, |
|
z, |
|
x, |
|
y, |
|
core: new Float32Array(CORE_DIM * CORE_DIM), |
|
padded: new Float32Array(PAD_STRIDE * PAD_STRIDE), |
|
texture: null, |
|
loaded: false, |
|
dirtyTexture: true |
|
}; |
|
} |
|
function initPaddedFromCore(tile) { |
|
for (let y = 0; y < CORE_DIM; y++) { |
|
for (let x = 0; x < CORE_DIM; x++) { |
|
tile.padded[idxPad(x, y)] = tile.core[y * CORE_DIM + x]; |
|
} |
|
} |
|
for (let x = 0; x < CORE_DIM; x++) { |
|
tile.padded[idxPad(x, -1)] = tile.padded[idxPad(x, 0)]; |
|
tile.padded[idxPad(x, CORE_DIM)] = tile.padded[idxPad(x, CORE_DIM - 1)]; |
|
} |
|
for (let y = 0; y < CORE_DIM; y++) { |
|
tile.padded[idxPad(-1, y)] = tile.padded[idxPad(0, y)]; |
|
tile.padded[idxPad(CORE_DIM, y)] = tile.padded[idxPad(CORE_DIM - 1, y)]; |
|
} |
|
tile.padded[idxPad(-1, -1)] = tile.padded[idxPad(0, 0)]; |
|
tile.padded[idxPad(CORE_DIM, -1)] = tile.padded[idxPad(CORE_DIM - 1, 0)]; |
|
tile.padded[idxPad(-1, CORE_DIM)] = tile.padded[idxPad(0, CORE_DIM - 1)]; |
|
tile.padded[idxPad(CORE_DIM, CORE_DIM)] = tile.padded[idxPad(CORE_DIM - 1, CORE_DIM - 1)]; |
|
tile.dirtyTexture = true; |
|
} |
|
function adjustedDx(aTile, bTile) { |
|
const world = Math.pow(2, aTile.z); |
|
let dx = bTile.x - aTile.x; |
|
if (Math.abs(dx) > 1) { |
|
if (Math.abs(dx + world) === 1) dx += world; |
|
else if (Math.abs(dx - world) === 1) dx -= world; |
|
} |
|
return dx; |
|
} |
|
function backfillBorder(dstTile, srcTile, dx, dy) { |
|
let xMin = dx * CORE_DIM; |
|
let xMax = dx * CORE_DIM + CORE_DIM; |
|
let yMin = dy * CORE_DIM; |
|
let yMax = dy * CORE_DIM + CORE_DIM; |
|
if (dx === -1) xMin = xMax - 1; |
|
if (dx === 1) xMax = xMin + 1; |
|
if (dy === -1) yMin = yMax - 1; |
|
if (dy === 1) yMax = yMin + 1; |
|
const ox = -dx * CORE_DIM; |
|
const oy = -dy * CORE_DIM; |
|
for (let y = yMin; y < yMax; y++) { |
|
for (let x = xMin; x < xMax; x++) { |
|
dstTile.padded[idxPad(x, y)] = srcTile.padded[idxPad(x + ox, y + oy)]; |
|
} |
|
} |
|
dstTile.dirtyTexture = true; |
|
} |
|
function uploadPaddedTexture(gl, tile) { |
|
if (!tile.loaded || !tile.dirtyTexture) return; |
|
const bytes = new Uint8Array(PAD_STRIDE * PAD_STRIDE * 4); |
|
for (let i = 0; i < tile.padded.length; i++) { |
|
encodeTerrarium(tile.padded[i], bytes, i * 4); |
|
} |
|
if (!tile.texture) tile.texture = gl.createTexture(); |
|
gl.bindTexture(gl.TEXTURE_2D, tile.texture); |
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); |
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); |
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); |
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); |
|
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); |
|
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, PAD_STRIDE, PAD_STRIDE, 0, gl.RGBA, gl.UNSIGNED_BYTE, bytes); |
|
tile.dirtyTexture = false; |
|
} |
|
function createHybridBorderLayer(state4, getVisibleTriplesForMap2, updateStatus2) { |
|
return { |
|
id: "dem-analysis-hybrid-border", |
|
type: "custom", |
|
renderingMode: "2d", |
|
map: null, |
|
program: null, |
|
buffer: null, |
|
aPos: -1, |
|
aUv: -1, |
|
uMatrix: null, |
|
uDem: null, |
|
uOpacity: null, |
|
uMode: null, |
|
uZoom: null, |
|
uLatRange: null, |
|
uTileSize: null, |
|
uTexel: null, |
|
uUvOffset: null, |
|
uUvScale: null, |
|
internalTextures: /* @__PURE__ */ new Map(), |
|
fallbackTiles: /* @__PURE__ */ new Map(), |
|
fallbackInFlight: /* @__PURE__ */ new Set(), |
|
onAdd(map4, gl) { |
|
this.map = map4; |
|
const vertexSource = ` |
|
precision highp float; |
|
uniform mat4 u_matrix; |
|
attribute vec2 a_pos; |
|
attribute vec2 a_uv; |
|
varying vec2 v_uv; |
|
void main() { |
|
v_uv = a_uv; |
|
gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0); |
|
} |
|
`; |
|
const fragmentSource = ` |
|
precision highp float; |
|
uniform sampler2D u_dem; |
|
uniform float u_opacity; |
|
uniform int u_mode; |
|
uniform float u_zoom; |
|
uniform vec2 u_latrange; |
|
uniform float u_tile_size; |
|
uniform vec2 u_texel; |
|
uniform float u_uv_offset; |
|
uniform float u_uv_scale; |
|
uniform int u_step_count; |
|
uniform float u_step_values[${MAX_STEP_STOPS}]; |
|
uniform vec3 u_step_colors[${MAX_STEP_STOPS + 1}]; |
|
varying vec2 v_uv; |
|
|
|
float decodeTerrarium(vec4 c) { |
|
float r = c.r * 255.0; |
|
float g = c.g * 255.0; |
|
float b = c.b * 255.0; |
|
return (r * 256.0 + g + b / 256.0) - 32768.0; |
|
} |
|
|
|
vec2 paddedUV(vec2 uv) { |
|
return uv * u_uv_scale + vec2(u_uv_offset); |
|
} |
|
|
|
float elevationAt(vec2 uv) { |
|
return decodeTerrarium(texture2D(u_dem, clamp(uv, vec2(0.0), vec2(1.0)))); |
|
} |
|
|
|
vec2 coreUVForDeriv(vec2 uvCore) { |
|
vec2 tileCoord = floor(clamp(uvCore, vec2(0.0), vec2(1.0)) * u_tile_size); |
|
tileCoord = clamp(tileCoord, vec2(0.0), vec2(u_tile_size - 1.0)); |
|
return (tileCoord + vec2(0.5)) / u_tile_size; |
|
} |
|
|
|
vec2 hornDeriv(vec2 uvCore) { |
|
vec2 uv = paddedUV(uvCore); |
|
vec2 e = u_texel; |
|
|
|
float a = elevationAt(uv + vec2(-e.x, -e.y)); |
|
float b = elevationAt(uv + vec2(0.0, -e.y)); |
|
float c = elevationAt(uv + vec2(e.x, -e.y)); |
|
float d = elevationAt(uv + vec2(-e.x, 0.0)); |
|
float f = elevationAt(uv + vec2(e.x, 0.0)); |
|
float g = elevationAt(uv + vec2(-e.x, e.y)); |
|
float h = elevationAt(uv + vec2(0.0, e.y)); |
|
float i = elevationAt(uv + vec2(e.x, e.y)); |
|
|
|
float dzdx = (c + 2.0 * f + i) - (a + 2.0 * d + g); |
|
float dzdy = (g + 2.0 * h + i) - (a + 2.0 * b + c); |
|
|
|
vec2 deriv = vec2(dzdx, dzdy) * u_tile_size / pow(2.0, 28.2562 - u_zoom); |
|
float lat = (u_latrange.x - u_latrange.y) * (1.0 - uvCore.y) + u_latrange.y; |
|
deriv /= max(cos(radians(lat)), 0.0001); |
|
return deriv; |
|
} |
|
|
|
vec3 colorFromStep(float value) { |
|
vec3 color = u_step_colors[0]; |
|
for (int i = 0; i < ${MAX_STEP_STOPS}; i++) { |
|
if (i >= u_step_count) break; |
|
if (value >= u_step_values[i]) { |
|
color = u_step_colors[i + 1]; |
|
} |
|
} |
|
return color; |
|
} |
|
|
|
void main() { |
|
vec2 d = hornDeriv(coreUVForDeriv(v_uv)); |
|
float gradient = length(d); |
|
float slopeDeg = clamp(degrees(atan(gradient)), 0.0, 90.0); |
|
|
|
float aspectDeg = degrees(atan(d.y, -d.x)); |
|
aspectDeg = mod(90.0 - aspectDeg, 360.0); |
|
if (gradient < 0.0001) aspectDeg = 0.0; |
|
|
|
float scalar = (u_mode == 0) ? slopeDeg : aspectDeg; |
|
vec3 color = colorFromStep(scalar); |
|
gl_FragColor = vec4(color * u_opacity, u_opacity); |
|
} |
|
`; |
|
function compile(gl2, type, src) { |
|
const shader = gl2.createShader(type); |
|
gl2.shaderSource(shader, src); |
|
gl2.compileShader(shader); |
|
if (!gl2.getShaderParameter(shader, gl2.COMPILE_STATUS)) { |
|
throw new Error(gl2.getShaderInfoLog(shader) || "Shader compile failed"); |
|
} |
|
return shader; |
|
} |
|
const vs = compile(gl, gl.VERTEX_SHADER, vertexSource); |
|
const fs = compile(gl, gl.FRAGMENT_SHADER, fragmentSource); |
|
this.program = gl.createProgram(); |
|
gl.attachShader(this.program, vs); |
|
gl.attachShader(this.program, fs); |
|
gl.linkProgram(this.program); |
|
if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) { |
|
throw new Error(gl.getProgramInfoLog(this.program) || "Program link failed"); |
|
} |
|
this.aPos = gl.getAttribLocation(this.program, "a_pos"); |
|
this.aUv = gl.getAttribLocation(this.program, "a_uv"); |
|
this.uMatrix = gl.getUniformLocation(this.program, "u_matrix"); |
|
this.uDem = gl.getUniformLocation(this.program, "u_dem"); |
|
this.uOpacity = gl.getUniformLocation(this.program, "u_opacity"); |
|
this.uMode = gl.getUniformLocation(this.program, "u_mode"); |
|
this.uZoom = gl.getUniformLocation(this.program, "u_zoom"); |
|
this.uLatRange = gl.getUniformLocation(this.program, "u_latrange"); |
|
this.uTileSize = gl.getUniformLocation(this.program, "u_tile_size"); |
|
this.uTexel = gl.getUniformLocation(this.program, "u_texel"); |
|
this.uUvOffset = gl.getUniformLocation(this.program, "u_uv_offset"); |
|
this.uUvScale = gl.getUniformLocation(this.program, "u_uv_scale"); |
|
this.uStepCount = gl.getUniformLocation(this.program, "u_step_count"); |
|
this.uStepValues = gl.getUniformLocation(this.program, "u_step_values"); |
|
this.uStepColors = gl.getUniformLocation(this.program, "u_step_colors"); |
|
this.buffer = gl.createBuffer(); |
|
}, |
|
getDemTileManager() { |
|
const style = this.map && this.map.style; |
|
if (!style || !style.tileManagers) return null; |
|
return style.tileManagers[DEM_SOURCE_ID] || null; |
|
}, |
|
getVisibleTriples() { |
|
return getVisibleTriplesForMap2(this.map); |
|
}, |
|
updateInternalTexture(gl, internalTile) { |
|
if (!internalTile.dem || !internalTile.dem.getPixels || typeof internalTile.dem.stride !== "number") return null; |
|
const uid = String(internalTile.dem.uid); |
|
const cacheKey = `dem:${uid}`; |
|
const stride = internalTile.dem.stride; |
|
const cached = this.internalTextures.get(cacheKey); |
|
if (cached) return cached; |
|
const pixels = internalTile.dem.getPixels(); |
|
const tex = gl.createTexture(); |
|
gl.bindTexture(gl.TEXTURE_2D, tex); |
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); |
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); |
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); |
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); |
|
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); |
|
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, stride, stride, 0, gl.RGBA, gl.UNSIGNED_BYTE, pixels.data); |
|
const entry = { |
|
texture: tex, |
|
stride |
|
}; |
|
this.internalTextures.set(cacheKey, entry); |
|
return entry; |
|
}, |
|
async ensureFallbackTile(v, gl) { |
|
if (!this.fallbackTiles.has(v.key)) { |
|
this.fallbackTiles.set(v.key, createFallbackTileRecord(v.z, v.x, v.y)); |
|
} |
|
const tile = this.fallbackTiles.get(v.key); |
|
if (tile.loaded || this.fallbackInFlight.has(v.key)) return tile; |
|
this.fallbackInFlight.add(v.key); |
|
try { |
|
const url = demTileUrl(v.z, v.x, v.y); |
|
const response = await fetch(url, { mode: "cors", cache: "force-cache" }); |
|
if (!response.ok) throw new Error(`DEM tile ${v.key}: HTTP ${response.status}`); |
|
const blob = await response.blob(); |
|
const bitmap = await createImageBitmap(blob); |
|
const canvas = document.createElement("canvas"); |
|
canvas.width = CORE_DIM; |
|
canvas.height = CORE_DIM; |
|
const ctx = canvas.getContext("2d", { willReadFrequently: true }); |
|
ctx.drawImage(bitmap, 0, 0, CORE_DIM, CORE_DIM); |
|
const bytes = ctx.getImageData(0, 0, CORE_DIM, CORE_DIM).data; |
|
for (let i = 0; i < CORE_DIM * CORE_DIM; i++) { |
|
const bi = i * 4; |
|
tile.core[i] = decodeTerrarium(bytes[bi], bytes[bi + 1], bytes[bi + 2]); |
|
} |
|
initPaddedFromCore(tile); |
|
tile.loaded = true; |
|
for (let dy = -1; dy <= 1; dy++) { |
|
for (let dx0 = -1; dx0 <= 1; dx0++) { |
|
if (dx0 === 0 && dy === 0) continue; |
|
const nx = normalizeTileX(tile.x + dx0, tile.z); |
|
const ny = tile.y + dy; |
|
if (ny < 0 || ny >= Math.pow(2, tile.z)) continue; |
|
const nKey = `${tile.z}/${nx}/${ny}`; |
|
const neighbor = this.fallbackTiles.get(nKey); |
|
if (!neighbor || !neighbor.loaded) continue; |
|
const dx = adjustedDx(tile, neighbor); |
|
const ddy = neighbor.y - tile.y; |
|
if (Math.abs(dx) > 1 || Math.abs(ddy) > 1 || dx === 0 && ddy === 0) continue; |
|
backfillBorder(tile, neighbor, dx, ddy); |
|
backfillBorder(neighbor, tile, -dx, -ddy); |
|
} |
|
} |
|
uploadPaddedTexture(gl, tile); |
|
this.map.triggerRepaint(); |
|
} catch (err) { |
|
console.error("Fallback DEM fetch failed:", v.key, err); |
|
} finally { |
|
this.fallbackInFlight.delete(v.key); |
|
} |
|
return tile; |
|
}, |
|
render(gl, args) { |
|
if (!state4.mode || state4.mode === "color-relief" || state4.effectiveSlopeOpacity <= 0) { |
|
state4.internalCount = 0; |
|
state4.fallbackCount = 0; |
|
updateStatus2(); |
|
return; |
|
} |
|
state4.internalCount = 0; |
|
state4.fallbackCount = 0; |
|
gl.useProgram(this.program); |
|
gl.uniformMatrix4fv(this.uMatrix, false, args.defaultProjectionData.mainMatrix); |
|
gl.uniform1f(this.uOpacity, state4.effectiveSlopeOpacity); |
|
const renderAsSlope = state4.mode === "slope" || state4.mode === "slope+relief"; |
|
gl.uniform1i(this.uMode, renderAsSlope ? 0 : 1); |
|
const ramp = renderAsSlope ? PARSED_RAMPS.slope : PARSED_RAMPS.aspect; |
|
gl.uniform1i(this.uStepCount, ramp.stepCount); |
|
gl.uniform1fv(this.uStepValues, ramp.values); |
|
gl.uniform3fv(this.uStepColors, ramp.colors); |
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); |
|
gl.enableVertexAttribArray(this.aPos); |
|
gl.vertexAttribPointer(this.aPos, 2, gl.FLOAT, false, 16, 0); |
|
gl.enableVertexAttribArray(this.aUv); |
|
gl.vertexAttribPointer(this.aUv, 2, gl.FLOAT, false, 16, 8); |
|
gl.enable(gl.BLEND); |
|
if (state4.multiplyBlend) { |
|
gl.blendFunc(gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA); |
|
} else { |
|
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); |
|
} |
|
const tileManager = this.getDemTileManager(); |
|
const visible = this.getVisibleTriples(); |
|
const internalByCanonical = /* @__PURE__ */ new Map(); |
|
if (tileManager && tileManager.getRenderableIds && tileManager.getTileByID) { |
|
const ids = tileManager.getRenderableIds(); |
|
for (const id of ids) { |
|
const tile = tileManager.getTileByID(id); |
|
if (!tile || !tile.tileID || !tile.tileID.canonical) continue; |
|
const cz = tile.tileID.canonical.z; |
|
const cx = tile.tileID.canonical.x; |
|
const cy = tile.tileID.canonical.y; |
|
internalByCanonical.set(`${cz}/${cx}/${cy}`, tile); |
|
} |
|
} |
|
for (const v of visible) { |
|
const tileBounds = tileToLngLatBounds(v.x, v.y, v.z); |
|
const canonicalKey = `${v.z}/${v.x}/${v.y}`; |
|
let texture = null; |
|
let stride = PAD_STRIDE; |
|
let wrap = 0; |
|
const internalTile = internalByCanonical.get(canonicalKey); |
|
if (internalTile) { |
|
const internalTex = this.updateInternalTexture(gl, internalTile); |
|
if (internalTex) { |
|
texture = internalTex.texture; |
|
stride = internalTex.stride; |
|
wrap = internalTile.tileID && typeof internalTile.tileID.wrap === "number" ? internalTile.tileID.wrap : 0; |
|
state4.internalCount += 1; |
|
} |
|
} |
|
if (!texture) { |
|
this.ensureFallbackTile(v, gl); |
|
const fallback = this.fallbackTiles.get(v.key); |
|
if (!fallback || !fallback.loaded) continue; |
|
uploadPaddedTexture(gl, fallback); |
|
if (!fallback.texture) continue; |
|
texture = fallback.texture; |
|
stride = PAD_STRIDE; |
|
wrap = 0; |
|
state4.fallbackCount += 1; |
|
} |
|
const verts = mercatorVertsForTile(v.z, v.x, v.y, wrap); |
|
gl.uniform1f(this.uZoom, v.z); |
|
gl.uniform2f(this.uLatRange, tileBounds.north, tileBounds.south); |
|
gl.uniform1f(this.uTileSize, stride - 2); |
|
gl.uniform2f(this.uTexel, 1 / stride, 1 / stride); |
|
gl.uniform1f(this.uUvOffset, 1 / stride); |
|
gl.uniform1f(this.uUvScale, (stride - 2) / stride); |
|
gl.activeTexture(gl.TEXTURE0); |
|
gl.bindTexture(gl.TEXTURE_2D, texture); |
|
gl.uniform1i(this.uDem, 0); |
|
gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STREAM_DRAW); |
|
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); |
|
} |
|
updateStatus2(); |
|
}, |
|
onRemove(_map, gl) { |
|
for (const entry of this.internalTextures.values()) { |
|
if (entry.texture) gl.deleteTexture(entry.texture); |
|
} |
|
for (const tile of this.fallbackTiles.values()) { |
|
if (tile.texture) gl.deleteTexture(tile.texture); |
|
} |
|
this.internalTextures.clear(); |
|
this.fallbackTiles.clear(); |
|
this.fallbackInFlight.clear(); |
|
if (this.buffer) gl.deleteBuffer(this.buffer); |
|
if (this.program) gl.deleteProgram(this.program); |
|
} |
|
}; |
|
} |
|
var init_dem = __esm({ |
|
"dem.js"() { |
|
init_utils(); |
|
init_constants(); |
|
} |
|
}); |
|
|
|
// track-edit.js |
|
function showToast(msg, durationMs) { |
|
toastEl.textContent = msg; |
|
toastEl.classList.add("visible"); |
|
clearTimeout(toastTimer); |
|
toastTimer = setTimeout(() => toastEl.classList.remove("visible"), durationMs || 2500); |
|
} |
|
function isTrackEditing(tId) { |
|
return tId != null && tId === editingTrackId; |
|
} |
|
function elevationAt(lngLat) { |
|
return tracksFns.elevationAt(lngLat); |
|
} |
|
function updateInsertPopup() { |
|
const t = editingTrackId ? tracksFns.findTrack(editingTrackId) : null; |
|
if (!t || selectedVertexIndex == null || selectedVertexIndex >= t.coords.length) { |
|
removeInsertPopup(); |
|
return; |
|
} |
|
const coord = t.coords[selectedVertexIndex]; |
|
const lngLat = [coord[0], coord[1]]; |
|
if (!insertPopupMarker) { |
|
const el = document.createElement("div"); |
|
el.className = "vertex-insert-popup"; |
|
el.innerHTML = '<button class="insert-popup-btn" title="Insert points after this vertex">+</button>'; |
|
el.querySelector(".insert-popup-btn").addEventListener("click", (e) => { |
|
e.stopPropagation(); |
|
if (insertAfterIdx != null) { |
|
insertAfterIdx = null; |
|
} else if (selectedVertexIndex != null) { |
|
insertAfterIdx = selectedVertexIndex; |
|
} |
|
syncUndoBtn(); |
|
}); |
|
insertPopupMarker = new maplibregl.Marker({ element: el, anchor: "left", offset: [8, 0] }).setLngLat(lngLat).addTo(map); |
|
} else { |
|
insertPopupMarker.setLngLat(lngLat); |
|
} |
|
const btn = insertPopupMarker.getElement().querySelector(".insert-popup-btn"); |
|
if (btn) btn.classList.toggle("active", insertAfterIdx != null); |
|
} |
|
function removeInsertPopup() { |
|
if (insertPopupMarker) { |
|
insertPopupMarker.remove(); |
|
insertPopupMarker = null; |
|
} |
|
} |
|
function clearHoverInsertMarker() { |
|
hoverInsertInfo = null; |
|
const src = map.getSource(HOVER_INSERT_SOURCE_ID); |
|
if (src) src.setData({ type: "FeatureCollection", features: [] }); |
|
} |
|
function showHoverInsertMarker(lngLat) { |
|
const src = map.getSource(HOVER_INSERT_SOURCE_ID); |
|
if (src) { |
|
src.setData({ type: "FeatureCollection", features: [{ |
|
type: "Feature", |
|
geometry: { type: "Point", coordinates: [lngLat.lng, lngLat.lat] }, |
|
properties: {} |
|
}] }); |
|
} |
|
} |
|
function updateInsertPreview() { |
|
const src = map.getSource("insert-preview-line"); |
|
if (!src) return; |
|
const t = editingTrackId ? tracksFns.findTrack(editingTrackId) : null; |
|
if (!t || !t.coords.length) { |
|
src.setData({ type: "FeatureCollection", features: [] }); |
|
return; |
|
} |
|
let target = insertPreviewLngLat; |
|
if (mobileFriendlyMode && editingTrackId) { |
|
const center = map.getCenter(); |
|
target = { lng: center.lng, lat: center.lat }; |
|
} |
|
if (!target) { |
|
src.setData({ type: "FeatureCollection", features: [] }); |
|
return; |
|
} |
|
const features = []; |
|
const tCoord = [target.lng, target.lat]; |
|
if (insertAfterIdx != null && insertAfterIdx < t.coords.length) { |
|
const prev = t.coords[insertAfterIdx]; |
|
features.push({ |
|
type: "Feature", |
|
geometry: { type: "LineString", coordinates: [[prev[0], prev[1]], tCoord] }, |
|
properties: {} |
|
}); |
|
if (insertAfterIdx + 1 < t.coords.length) { |
|
const next = t.coords[insertAfterIdx + 1]; |
|
features.push({ |
|
type: "Feature", |
|
geometry: { type: "LineString", coordinates: [tCoord, [next[0], next[1]]] }, |
|
properties: {} |
|
}); |
|
} |
|
} else if (t.coords.length > 0) { |
|
const last = t.coords[t.coords.length - 1]; |
|
features.push({ |
|
type: "Feature", |
|
geometry: { type: "LineString", coordinates: [[last[0], last[1]], tCoord] }, |
|
properties: {} |
|
}); |
|
} |
|
src.setData({ type: "FeatureCollection", features }); |
|
} |
|
function findClosestPointOnTrack(t, mousePoint) { |
|
if (!t || t.coords.length < 2) return null; |
|
let bestDist = Infinity; |
|
let bestLngLat = null; |
|
let bestSegment = -1; |
|
for (let i = 0; i < t.coords.length - 1; i++) { |
|
const a = map.project([t.coords[i][0], t.coords[i][1]]); |
|
const b = map.project([t.coords[i + 1][0], t.coords[i + 1][1]]); |
|
const dx = b.x - a.x, dy = b.y - a.y; |
|
const len2 = dx * dx + dy * dy; |
|
let tp = 0; |
|
if (len2 > 0) { |
|
tp = ((mousePoint.x - a.x) * dx + (mousePoint.y - a.y) * dy) / len2; |
|
tp = Math.max(0, Math.min(1, tp)); |
|
} |
|
if (tp < 0.1 || tp > 0.9) continue; |
|
const px = a.x + tp * dx, py = a.y + tp * dy; |
|
const dist = Math.sqrt((mousePoint.x - px) ** 2 + (mousePoint.y - py) ** 2); |
|
if (dist < bestDist) { |
|
bestDist = dist; |
|
bestLngLat = map.unproject([px, py]); |
|
bestSegment = i; |
|
} |
|
} |
|
if (bestDist < 20 && bestSegment >= 0) { |
|
return { lngLat: bestLngLat, insertAfter: bestSegment, distance: bestDist }; |
|
} |
|
return null; |
|
} |
|
function hitTestVertex(point) { |
|
const tId = editingTrackId; |
|
if (!tId) return null; |
|
const t = tracksFns.findTrack(tId); |
|
if (!t) return null; |
|
const layerId = tracksFns.trackPtsLayerId(t); |
|
if (!map.getLayer(layerId)) return null; |
|
const r = 12; |
|
const features = map.queryRenderedFeatures( |
|
[[point.x - r, point.y - r], [point.x + r, point.y + r]], |
|
{ layers: [layerId] } |
|
); |
|
if (!features.length) return null; |
|
const real = features.find((f) => f.properties.idx != null); |
|
if (real) return { trackId: t.id, index: real.properties.idx }; |
|
return null; |
|
} |
|
function syncUndoBtn() { |
|
if (!tracksFns.getActiveTrack) return; |
|
const t = tracksFns.getActiveTrack(); |
|
const show = t && t.coords.length > 0 && isTrackEditing(t.id); |
|
undoBtn.style.display = show ? "" : "none"; |
|
mobileModeBtn.style.display = (isMobile || isLocalhost) && show ? "" : "none"; |
|
mobileModeBtn.classList.toggle("active", mobileFriendlyMode); |
|
tracksFns.updateVertexHighlight(editingTrackId, selectedVertexIndex); |
|
updateInsertPopup(); |
|
updateInsertPreview(); |
|
} |
|
function setDefaultMapCursor() { |
|
if (!editingTrackId) map.getCanvas().style.cursor = "cell"; |
|
} |
|
function enterEditMode(tId) { |
|
if (editingTrackId && editingTrackId !== tId) exitEditMode(); |
|
editingTrackId = tId; |
|
selectedVertexIndex = null; |
|
insertAfterIdx = null; |
|
map.getCanvas().style.cursor = "crosshair"; |
|
drawBtn.classList.add("active"); |
|
tracksFns.updateVertexHighlight(editingTrackId, selectedVertexIndex); |
|
tracksFns.renderTrackList(); |
|
syncUndoBtn(); |
|
if (mobileFriendlyMode) { |
|
drawCrosshair.classList.add("visible"); |
|
showToast("Tap anywhere to add a point at center", 3e3); |
|
} |
|
} |
|
function exitEditMode() { |
|
const wasNewTrack = editingIsNewTrack; |
|
editingIsNewTrack = false; |
|
selectedVertexIndex = null; |
|
insertAfterIdx = null; |
|
removeInsertPopup(); |
|
drawBtn.classList.remove("active"); |
|
setDefaultMapCursor(); |
|
drawCrosshair.classList.remove("visible"); |
|
if (mobileSelectedVertex) cancelMobileMove(); |
|
const t = editingTrackId ? tracksFns.findTrack(editingTrackId) : null; |
|
if (wasNewTrack && t && t.coords.length < 2) { |
|
tracksFns.removeIncompleteNewTrack(t); |
|
} else if (t) { |
|
updateProfileFn(); |
|
} |
|
editingTrackId = null; |
|
clearHoverInsertMarker(); |
|
tracksFns.updateVertexHighlight(editingTrackId, selectedVertexIndex); |
|
tracksFns.renderTrackList(); |
|
syncUndoBtn(); |
|
} |
|
function startNewTrack() { |
|
if (editingTrackId) exitEditMode(); |
|
editingIsNewTrack = true; |
|
const t = tracksFns.createNewTrack(); |
|
enterEditMode(t.id); |
|
} |
|
function cancelMobileMove() { |
|
mobileSelectedVertex = null; |
|
mobileHint.classList.remove("visible"); |
|
map.dragPan.enable(); |
|
const t = tracksFns.getActiveTrack(); |
|
if (t) { |
|
tracksFns.renderTrackList(); |
|
updateProfileFn(); |
|
syncUndoBtn(); |
|
} |
|
} |
|
function getEditState() { |
|
return { |
|
get editingTrackId() { |
|
return editingTrackId; |
|
}, |
|
get editingIsNewTrack() { |
|
return editingIsNewTrack; |
|
}, |
|
get selectedVertexIndex() { |
|
return selectedVertexIndex; |
|
}, |
|
get insertAfterIdx() { |
|
return insertAfterIdx; |
|
}, |
|
get mobileFriendlyMode() { |
|
return mobileFriendlyMode; |
|
}, |
|
isTrackEditing, |
|
enterEditMode, |
|
exitEditMode, |
|
startNewTrack, |
|
syncUndoBtn |
|
}; |
|
} |
|
function initTrackEdit(mapRef, stateRef, updateProfile2, fns) { |
|
map = mapRef; |
|
state = stateRef; |
|
updateProfileFn = updateProfile2; |
|
tracksFns = fns; |
|
drawBtn = document.getElementById("draw-btn"); |
|
undoBtn = document.getElementById("undo-btn"); |
|
mobileModeBtn = document.getElementById("mobile-mode-btn"); |
|
mobileHint = document.getElementById("mobile-move-hint"); |
|
toastEl = document.getElementById("toast"); |
|
drawCrosshair = document.getElementById("draw-crosshair"); |
|
drawBtn.addEventListener("click", () => { |
|
if (editingTrackId) exitEditMode(); |
|
else startNewTrack(); |
|
}); |
|
undoBtn.addEventListener("click", () => { |
|
const t = tracksFns.getActiveTrack(); |
|
if (!t || !t.coords.length) return; |
|
t.coords.pop(); |
|
if (selectedVertexIndex != null && selectedVertexIndex >= t.coords.length) { |
|
selectedVertexIndex = t.coords.length > 0 ? t.coords.length - 1 : null; |
|
} |
|
if (insertAfterIdx != null && insertAfterIdx >= t.coords.length) { |
|
insertAfterIdx = t.coords.length > 0 ? t.coords.length - 1 : null; |
|
} |
|
tracksFns.onTrackCoordsChanged(t); |
|
syncUndoBtn(); |
|
}); |
|
mobileModeBtn.addEventListener("click", () => { |
|
mobileFriendlyMode = !mobileFriendlyMode; |
|
mobileModeBtn.classList.toggle("active", mobileFriendlyMode); |
|
if (mobileFriendlyMode && editingTrackId) { |
|
drawCrosshair.classList.add("visible"); |
|
showToast("Tap anywhere to add a point at center", 3e3); |
|
} else { |
|
drawCrosshair.classList.remove("visible"); |
|
if (mobileSelectedVertex) cancelMobileMove(); |
|
} |
|
syncUndoBtn(); |
|
}); |
|
map.on("click", (e) => { |
|
if (suppressNextMapClick) { |
|
suppressNextMapClick = false; |
|
return; |
|
} |
|
if (editingTrackId) { |
|
const t = tracksFns.findTrack(editingTrackId); |
|
if (!t) return; |
|
if (e.originalEvent.shiftKey || e.originalEvent.ctrlKey || e.originalEvent.metaKey) { |
|
const hit = hitTestVertex(e.point); |
|
if (hit && hit.index != null) { |
|
t.coords.splice(hit.index, 1); |
|
if (selectedVertexIndex != null) { |
|
if (hit.index < selectedVertexIndex) selectedVertexIndex--; |
|
else if (hit.index === selectedVertexIndex) selectedVertexIndex = null; |
|
} |
|
if (insertAfterIdx != null) { |
|
if (hit.index <= insertAfterIdx) insertAfterIdx = Math.max(0, insertAfterIdx - 1); |
|
} |
|
tracksFns.onTrackCoordsChanged(t); |
|
if (t.coords.length === 0) tracksFns.deleteTrack(t.id); |
|
} |
|
return; |
|
} |
|
const hitPt = hitTestVertex(e.point); |
|
if (hitPt && hitPt.index != null) { |
|
if (mobileFriendlyMode) { |
|
selectedVertexIndex = hitPt.index; |
|
mobileSelectedVertex = hitPt; |
|
mobileHint.textContent = "Drag screen to move point \xB7 tap elsewhere to deselect"; |
|
mobileHint.classList.add("visible"); |
|
map.dragPan.disable(); |
|
showToast("Drag screen to move", 2e3); |
|
syncUndoBtn(); |
|
return; |
|
} |
|
if (selectedVertexIndex === hitPt.index) { |
|
selectedVertexIndex = null; |
|
insertAfterIdx = null; |
|
} else { |
|
selectedVertexIndex = hitPt.index; |
|
if (insertAfterIdx != null) insertAfterIdx = hitPt.index; |
|
} |
|
syncUndoBtn(); |
|
return; |
|
} |
|
if (mobileFriendlyMode && mobileSelectedVertex) { |
|
cancelMobileMove(); |
|
} |
|
let insertLngLat = e.lngLat; |
|
if (mobileFriendlyMode) { |
|
insertLngLat = map.getCenter(); |
|
} |
|
const ele = elevationAt(insertLngLat); |
|
if (insertAfterIdx != null) { |
|
t.coords.splice(insertAfterIdx + 1, 0, [insertLngLat.lng, insertLngLat.lat, ele]); |
|
insertAfterIdx++; |
|
selectedVertexIndex = insertAfterIdx; |
|
} else { |
|
t.coords.push([insertLngLat.lng, insertLngLat.lat, ele]); |
|
} |
|
tracksFns.onTrackCoordsChanged(t); |
|
syncUndoBtn(); |
|
return; |
|
} |
|
}); |
|
setDefaultMapCursor(); |
|
map.on("dblclick", (e) => { |
|
if (editingTrackId) { |
|
e.preventDefault(); |
|
exitEditMode(); |
|
} |
|
}); |
|
document.addEventListener("keydown", (e) => { |
|
if (e.key === "Escape" && editingTrackId) exitEditMode(); |
|
if (e.key === "Escape" && mobileSelectedVertex) cancelMobileMove(); |
|
if ((e.ctrlKey || e.metaKey) && e.key === "z" && isTrackEditing(tracksFns.getActiveTrack()?.id)) { |
|
const t = tracksFns.getActiveTrack(); |
|
if (t && t.coords.length > 0) { |
|
e.preventDefault(); |
|
t.coords.pop(); |
|
if (selectedVertexIndex != null && selectedVertexIndex >= t.coords.length) { |
|
selectedVertexIndex = t.coords.length > 0 ? t.coords.length - 1 : null; |
|
} |
|
if (insertAfterIdx != null && insertAfterIdx >= t.coords.length) { |
|
insertAfterIdx = t.coords.length > 0 ? t.coords.length - 1 : null; |
|
} |
|
tracksFns.onTrackCoordsChanged(t); |
|
syncUndoBtn(); |
|
} |
|
} |
|
}); |
|
if (!isMobile) { |
|
let finishVertexDrag = function() { |
|
if (!dragVertexInfo) return; |
|
const t = tracksFns.findTrack(dragVertexInfo.trackId); |
|
if (!dragMoved && t) { |
|
selectedVertexIndex = dragVertexInfo.index; |
|
if (insertAfterIdx != null) insertAfterIdx = dragVertexInfo.index; |
|
} |
|
dragVertexInfo = null; |
|
hoverInsertDrag = false; |
|
map.dragPan.enable(); |
|
hoveredVertex = false; |
|
if (dragMoved) suppressNextMapClick = true; |
|
dragMoved = false; |
|
setDefaultMapCursor(); |
|
if (t) { |
|
tracksFns.onTrackCoordsChanged(t); |
|
syncUndoBtn(); |
|
} |
|
}; |
|
let hoveredVertex = false; |
|
let dragMoved = false; |
|
let hoverInsertDrag = false; |
|
map.on("mousedown", (e) => { |
|
if (!editingTrackId) return; |
|
const hit = hitTestVertex(e.point); |
|
if (hit && hit.index != null) { |
|
e.preventDefault(); |
|
e.originalEvent.stopPropagation(); |
|
dragVertexInfo = hit; |
|
dragMoved = false; |
|
map.dragPan.disable(); |
|
map.getCanvas().style.cursor = "grabbing"; |
|
return; |
|
} |
|
if (hoverInsertInfo) { |
|
const hiPt = map.project([hoverInsertInfo.lngLat.lng, hoverInsertInfo.lngLat.lat]); |
|
const dist = Math.sqrt((e.point.x - hiPt.x) ** 2 + (e.point.y - hiPt.y) ** 2); |
|
if (dist < 20) { |
|
const t = tracksFns.findTrack(editingTrackId); |
|
if (t) { |
|
const ele = elevationAt(hoverInsertInfo.lngLat); |
|
t.coords.splice( |
|
hoverInsertInfo.insertAfter + 1, |
|
0, |
|
[hoverInsertInfo.lngLat.lng, hoverInsertInfo.lngLat.lat, ele] |
|
); |
|
tracksFns.invalidateAndRefresh(t); |
|
e.preventDefault(); |
|
e.originalEvent.stopPropagation(); |
|
dragVertexInfo = { trackId: t.id, index: hoverInsertInfo.insertAfter + 1 }; |
|
hoverInsertDrag = true; |
|
dragMoved = false; |
|
clearHoverInsertMarker(); |
|
map.dragPan.disable(); |
|
map.getCanvas().style.cursor = "grabbing"; |
|
return; |
|
} |
|
} |
|
} |
|
}); |
|
map.on("mousemove", (e) => { |
|
if (dragVertexInfo) { |
|
const t = tracksFns.findTrack(dragVertexInfo.trackId); |
|
if (!t) return; |
|
const c = t.coords[dragVertexInfo.index]; |
|
c[0] = e.lngLat.lng; |
|
c[1] = e.lngLat.lat; |
|
c[2] = elevationAt(e.lngLat); |
|
dragMoved = true; |
|
tracksFns.refreshTrackSource(t); |
|
return; |
|
} |
|
if (editingTrackId) { |
|
if (!mobileFriendlyMode) { |
|
insertPreviewLngLat = e.lngLat; |
|
updateInsertPreview(); |
|
} |
|
const hit = hitTestVertex(e.point); |
|
const isRealVertex = Boolean(hit && hit.index != null); |
|
if (isRealVertex && !hoveredVertex) { |
|
hoveredVertex = true; |
|
clearHoverInsertMarker(); |
|
map.getCanvas().style.cursor = "grab"; |
|
} else if (!isRealVertex && hoveredVertex) { |
|
hoveredVertex = false; |
|
map.getCanvas().style.cursor = "crosshair"; |
|
} |
|
if (!isRealVertex && !hoveredVertex) { |
|
const t = tracksFns.findTrack(editingTrackId); |
|
const closest = findClosestPointOnTrack(t, e.point); |
|
if (closest) { |
|
hoverInsertInfo = closest; |
|
showHoverInsertMarker(closest.lngLat); |
|
map.getCanvas().style.cursor = "copy"; |
|
} else { |
|
if (hoverInsertInfo) { |
|
clearHoverInsertMarker(); |
|
map.getCanvas().style.cursor = "crosshair"; |
|
} |
|
} |
|
} else if (hoverInsertInfo) { |
|
clearHoverInsertMarker(); |
|
} |
|
} |
|
}); |
|
map.on("mouseup", () => { |
|
finishVertexDrag(); |
|
}); |
|
window.addEventListener("mouseup", finishVertexDrag); |
|
} |
|
if (isMobile) { |
|
let touchLongPressTimer = null; |
|
let touchStartPt = null; |
|
let mobileDragVertex = null; |
|
map.getCanvas().addEventListener("touchstart", (e) => { |
|
if (!editingTrackId || mobileFriendlyMode) return; |
|
if (e.touches.length !== 1) return; |
|
const touch = e.touches[0]; |
|
const rect = map.getCanvas().getBoundingClientRect(); |
|
const pt = { x: touch.clientX - rect.left, y: touch.clientY - rect.top }; |
|
touchStartPt = pt; |
|
const hit = hitTestVertex(pt); |
|
if (hit && hit.index != null) { |
|
touchLongPressTimer = setTimeout(() => { |
|
mobileDragVertex = { ...hit, screenX: touch.clientX, screenY: touch.clientY }; |
|
map.dragPan.disable(); |
|
showToast("Drag to move point", 1500); |
|
}, 400); |
|
} |
|
}, { passive: true }); |
|
map.getCanvas().addEventListener("touchmove", (e) => { |
|
if (touchLongPressTimer && touchStartPt) { |
|
const touch = e.touches[0]; |
|
const rect = map.getCanvas().getBoundingClientRect(); |
|
const dx = touch.clientX - rect.left - touchStartPt.x; |
|
const dy = touch.clientY - rect.top - touchStartPt.y; |
|
if (Math.sqrt(dx * dx + dy * dy) > 10) { |
|
clearTimeout(touchLongPressTimer); |
|
touchLongPressTimer = null; |
|
} |
|
} |
|
if (mobileDragVertex && e.touches.length === 1) { |
|
const touch = e.touches[0]; |
|
const rect = map.getCanvas().getBoundingClientRect(); |
|
const pt = { x: touch.clientX - rect.left, y: touch.clientY - rect.top }; |
|
const lngLat = map.unproject([pt.x, pt.y]); |
|
const t = tracksFns.findTrack(mobileDragVertex.trackId); |
|
if (t) { |
|
const c = t.coords[mobileDragVertex.index]; |
|
c[0] = lngLat.lng; |
|
c[1] = lngLat.lat; |
|
c[2] = elevationAt(lngLat); |
|
tracksFns.invalidateAndRefresh(t); |
|
} |
|
e.preventDefault(); |
|
} |
|
}, { passive: false }); |
|
map.getCanvas().addEventListener("touchend", () => { |
|
if (touchLongPressTimer) { |
|
clearTimeout(touchLongPressTimer); |
|
touchLongPressTimer = null; |
|
} |
|
if (mobileDragVertex) { |
|
const t = tracksFns.findTrack(mobileDragVertex.trackId); |
|
mobileDragVertex = null; |
|
map.dragPan.enable(); |
|
if (t) { |
|
tracksFns.onTrackCoordsChanged(t); |
|
syncUndoBtn(); |
|
} |
|
} |
|
touchStartPt = null; |
|
}, { passive: true }); |
|
map.on("move", () => { |
|
if (!mobileSelectedVertex) return; |
|
const t = tracksFns.findTrack(mobileSelectedVertex.trackId); |
|
if (!t) return; |
|
const center = map.getCenter(); |
|
const c = t.coords[mobileSelectedVertex.index]; |
|
c[0] = center.lng; |
|
c[1] = center.lat; |
|
c[2] = elevationAt(center); |
|
tracksFns.invalidateAndRefresh(t); |
|
}); |
|
map.on("touchend", () => { |
|
if (!mobileSelectedVertex) return; |
|
cancelMobileMove(); |
|
}); |
|
} |
|
map.on("move", () => { |
|
if (mobileFriendlyMode && editingTrackId) { |
|
updateInsertPreview(); |
|
} |
|
}); |
|
} |
|
var map, state, updateProfileFn, tracksFns, editingTrackId, editingIsNewTrack, dragVertexInfo, mobileSelectedVertex, suppressNextMapClick, hoverInsertInfo, selectedVertexIndex, insertAfterIdx, insertPopupMarker, insertPreviewLngLat, isMobile, isLocalhost, mobileFriendlyMode, drawBtn, undoBtn, mobileModeBtn, mobileHint, drawCrosshair, toastEl, toastTimer, HOVER_INSERT_SOURCE_ID; |
|
var init_track_edit = __esm({ |
|
"track-edit.js"() { |
|
init_ui(); |
|
updateProfileFn = () => { |
|
}; |
|
tracksFns = {}; |
|
editingTrackId = null; |
|
editingIsNewTrack = false; |
|
dragVertexInfo = null; |
|
mobileSelectedVertex = null; |
|
suppressNextMapClick = false; |
|
hoverInsertInfo = null; |
|
selectedVertexIndex = null; |
|
insertAfterIdx = null; |
|
insertPopupMarker = null; |
|
insertPreviewLngLat = null; |
|
isMobile = "ontouchstart" in window || navigator.maxTouchPoints > 0; |
|
isLocalhost = location.hostname === "localhost" || location.hostname === "127.0.0.1"; |
|
mobileFriendlyMode = isMobile; |
|
toastTimer = 0; |
|
HOVER_INSERT_SOURCE_ID = "hover-insert-point"; |
|
} |
|
}); |
|
|
|
// node_modules/@we-gold/gpxjs/dist/gpxjs.js |
|
function stringifyGPX(gpx, customXmlSerializer) { |
|
const doc = gpx.xml.implementation.createDocument(GPX_NS, "gpx"); |
|
return doc.documentElement.setAttribute("version", "1.1"), doc.documentElement.setAttribute("creator", "gpxjs"), new XmlMapper(doc).mapObject(GPX_MAPPING, gpx, doc.documentElement), (customXmlSerializer ?? new XMLSerializer()).serializeToString(doc); |
|
} |
|
function ExtensionsMapping(doc, srcObj, dstElem) { |
|
for (const key in srcObj) { |
|
const elem = doc.createElementNS(GPX_NS, key); |
|
dstElem.append(elem); |
|
const value = srcObj[key]; |
|
if (typeof value == "object") |
|
ExtensionsMapping(doc, value, elem); |
|
else { |
|
const node = doc.createTextNode(value.toString()); |
|
elem.append(node); |
|
} |
|
} |
|
} |
|
var __defProp, __defNormalProp, __name, __publicField, DEFAULT_OPTIONS, calculateDistance, haversineDistance, calculateDuration, calculateElevation, calculateSlopes, parseGPX, parseGPXWithCustomParser, parseExtensions, getElementValue, querySelectDirectDescendant, deleteNullFields, _ParsedGPX, ParsedGPX, GPX_NS, EXPR_PROPERTY, FOR_PROPERTY, FUNC_PROPERTY, LINK_MAPPING, POINT_MAPPING, GPX_MAPPING, _XmlMapper, XmlMapper; |
|
var init_gpxjs = __esm({ |
|
"node_modules/@we-gold/gpxjs/dist/gpxjs.js"() { |
|
__defProp = Object.defineProperty; |
|
__defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; |
|
__name = (target, value) => __defProp(target, "name", { value, configurable: true }); |
|
__publicField = (obj, key, value) => (__defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value), value); |
|
DEFAULT_OPTIONS = { |
|
// delete null fields in output |
|
removeEmptyFields: true, |
|
// average speed threshold (in m/ms) used to determine the moving duration |
|
avgSpeedThreshold: 215e-6 |
|
}; |
|
calculateDistance = /* @__PURE__ */ __name((points) => { |
|
const cumulativeDistance = [0]; |
|
for (let i = 0; i < points.length - 1; i++) { |
|
const currentTotalDistance = cumulativeDistance[i] + haversineDistance(points[i], points[i + 1]); |
|
cumulativeDistance.push(currentTotalDistance); |
|
} |
|
return { |
|
cumulative: cumulativeDistance, |
|
total: cumulativeDistance[cumulativeDistance.length - 1] |
|
}; |
|
}, "calculateDistance"); |
|
haversineDistance = /* @__PURE__ */ __name((point1, point2) => { |
|
const toRadians = /* @__PURE__ */ __name((degrees) => degrees * Math.PI / 180, "toRadians"), lat1Radians = toRadians(point1.latitude), lat2Radians = toRadians(point2.latitude), sinDeltaLatitude = Math.sin( |
|
toRadians(point2.latitude - point1.latitude) / 2 |
|
), sinDeltaLongitude = Math.sin( |
|
toRadians(point2.longitude - point1.longitude) / 2 |
|
), a = sinDeltaLatitude ** 2 + Math.cos(lat1Radians) * Math.cos(lat2Radians) * sinDeltaLongitude ** 2; |
|
return 6371e3 * (2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))); |
|
}, "haversineDistance"); |
|
calculateDuration = /* @__PURE__ */ __name((points, distance, calculOptions = DEFAULT_OPTIONS) => { |
|
var _a; |
|
const { avgSpeedThreshold } = calculOptions, allTimedPoints = [], cumulative = [0]; |
|
let lastTime = 0; |
|
for (let i = 0; i < points.length - 1; i++) { |
|
const time = points[i].time, dist = distance.cumulative[i], previousPoint = cumulative[i]; |
|
if (time !== null) { |
|
const movingTime = time.getTime() - lastTime; |
|
if (movingTime > 0) { |
|
let sumDistances = 0, sumTime = 0; |
|
for (let j = i; j >= 0; j--) { |
|
const prevTime = (_a = points[j].time) == null ? void 0 : _a.getTime(); |
|
if (prevTime !== void 0) { |
|
const timeDiff = time.getTime() - prevTime; |
|
if (timeDiff > 1e4) |
|
break; |
|
sumDistances += distance.cumulative[j + 1] - distance.cumulative[j], sumTime += timeDiff; |
|
} |
|
} |
|
const nextCumul = (sumTime > 0 ? sumDistances / sumTime : 0) > avgSpeedThreshold ? previousPoint + movingTime : previousPoint; |
|
cumulative.push(nextCumul); |
|
} else |
|
cumulative.push(previousPoint); |
|
lastTime = time.getTime(), allTimedPoints.push({ time, distance: dist }); |
|
} else |
|
cumulative.push(previousPoint); |
|
} |
|
const totalDuration = allTimedPoints.length === 0 ? 0 : allTimedPoints[allTimedPoints.length - 1].time.getTime() - allTimedPoints[0].time.getTime(); |
|
return { |
|
startTime: allTimedPoints.length ? allTimedPoints[0].time : null, |
|
endTime: allTimedPoints.length ? allTimedPoints[allTimedPoints.length - 1].time : null, |
|
cumulative, |
|
movingDuration: cumulative[cumulative.length - 1] / 1e3, |
|
// Convert to seconds |
|
totalDuration: totalDuration / 1e3 |
|
// Convert to seconds |
|
}; |
|
}, "calculateDuration"); |
|
calculateElevation = /* @__PURE__ */ __name((points) => { |
|
var _a, _b; |
|
let dp = 0, dn = 0; |
|
const elevation = []; |
|
let sum = 0; |
|
for (let i = 0; i < points.length - 1; i++) { |
|
const nextElevation = (_a = points[i + 1]) == null ? void 0 : _a.elevation, currentElevation = (_b = points[i]) == null ? void 0 : _b.elevation; |
|
if (nextElevation !== null && currentElevation !== null) { |
|
const diff = nextElevation - currentElevation; |
|
diff < 0 ? dn += diff : diff > 0 && (dp += diff); |
|
} |
|
} |
|
for (const point of points) |
|
point.elevation !== null && (elevation.push(point.elevation), sum += point.elevation); |
|
let max = elevation[0] ?? null, min = elevation[0] ?? null; |
|
for (let i = 1; i < elevation.length; i++) |
|
elevation[i] > max && (max = elevation[i]), elevation[i] < min && (min = elevation[i]); |
|
return { |
|
maximum: max, |
|
minimum: min, |
|
positive: Math.abs(dp) || null, |
|
negative: Math.abs(dn) || null, |
|
average: elevation.length ? sum / elevation.length : null |
|
}; |
|
}, "calculateElevation"); |
|
calculateSlopes = /* @__PURE__ */ __name((points, cumulativeDistance) => { |
|
var _a, _b; |
|
const slopes = []; |
|
for (let i = 0; i < points.length - 1; i++) { |
|
const nextElevation = (_a = points[i + 1]) == null ? void 0 : _a.elevation, currentElevation = (_b = points[i]) == null ? void 0 : _b.elevation; |
|
if (nextElevation !== null && currentElevation !== null) { |
|
const elevationDifference = nextElevation - currentElevation, displacement = cumulativeDistance[i + 1] - cumulativeDistance[i], slope = elevationDifference * 100 / displacement; |
|
slopes.push(slope); |
|
} |
|
} |
|
return slopes; |
|
}, "calculateSlopes"); |
|
parseGPX = /* @__PURE__ */ __name((gpxSource, options = DEFAULT_OPTIONS) => { |
|
const parseMethod = /* @__PURE__ */ __name((gpxSource2) => typeof document > "u" ? null : typeof window > "u" ? (console.error( |
|
"window is undefined, try to use the parseGPXWithCustomParser method" |
|
), null) : new window.DOMParser().parseFromString(gpxSource2, "text/xml"), "parseMethod"), allOptions = { ...DEFAULT_OPTIONS, ...options }; |
|
return parseGPXWithCustomParser(gpxSource, parseMethod, allOptions); |
|
}, "parseGPX"); |
|
parseGPXWithCustomParser = /* @__PURE__ */ __name((gpxSource, parseGPXToXML, options = DEFAULT_OPTIONS) => { |
|
const parsedSource = parseGPXToXML(gpxSource); |
|
if (parsedSource === null) |
|
return [null, new Error("Provided parsing method failed.")]; |
|
const output = { |
|
xml: parsedSource, |
|
metadata: { |
|
name: "", |
|
description: "", |
|
time: "", |
|
author: null, |
|
link: null |
|
}, |
|
waypoints: [], |
|
tracks: [], |
|
routes: [] |
|
}, metadata = output.xml.querySelector("metadata"); |
|
if (metadata !== null) { |
|
output.metadata.name = getElementValue(metadata, "name"), output.metadata.description = getElementValue(metadata, "desc"), output.metadata.time = getElementValue(metadata, "time"); |
|
const authorElement = metadata.querySelector("author"); |
|
if (authorElement !== null) { |
|
const emailElement = authorElement.querySelector("email"), linkElement2 = authorElement.querySelector("link"); |
|
output.metadata.author = { |
|
name: getElementValue(authorElement, "name"), |
|
email: emailElement !== null ? { |
|
id: emailElement.getAttribute("id") ?? "", |
|
domain: emailElement.getAttribute("domain") ?? "" |
|
} : null, |
|
link: linkElement2 !== null ? { |
|
href: linkElement2.getAttribute("href") ?? "", |
|
text: getElementValue(linkElement2, "text"), |
|
type: getElementValue(linkElement2, "type") |
|
} : null |
|
}; |
|
} |
|
const linkElement = querySelectDirectDescendant(metadata, "link"); |
|
linkElement !== null && (output.metadata.link = { |
|
href: linkElement.getAttribute("href") ?? "", |
|
text: getElementValue(linkElement, "text"), |
|
type: getElementValue(linkElement, "type") |
|
}); |
|
} |
|
const waypoints2 = Array.from(output.xml.querySelectorAll("wpt")); |
|
for (const waypoint of waypoints2) { |
|
const point = { |
|
name: getElementValue(waypoint, "name"), |
|
symbol: getElementValue(waypoint, "sym"), |
|
latitude: parseFloat(waypoint.getAttribute("lat") ?? ""), |
|
longitude: parseFloat(waypoint.getAttribute("lon") ?? ""), |
|
elevation: null, |
|
comment: getElementValue(waypoint, "cmt"), |
|
description: getElementValue(waypoint, "desc"), |
|
time: null |
|
}, rawElevation = parseFloat(getElementValue(waypoint, "ele") ?? ""); |
|
point.elevation = isNaN(rawElevation) ? null : rawElevation; |
|
const rawTime = getElementValue(waypoint, "time"); |
|
point.time = rawTime == null ? null : new Date(rawTime), output.waypoints.push(point); |
|
} |
|
const routes = Array.from(output.xml.querySelectorAll("rte")); |
|
for (const routeElement of routes) { |
|
const route = { |
|
name: getElementValue(routeElement, "name"), |
|
comment: getElementValue(routeElement, "cmt"), |
|
description: getElementValue(routeElement, "desc"), |
|
src: getElementValue(routeElement, "src"), |
|
number: getElementValue(routeElement, "number"), |
|
type: null, |
|
link: null, |
|
points: [], |
|
distance: { |
|
cumulative: [], |
|
total: 0 |
|
}, |
|
duration: { |
|
cumulative: [], |
|
movingDuration: 0, |
|
totalDuration: 0, |
|
endTime: null, |
|
startTime: null |
|
}, |
|
elevation: { |
|
maximum: null, |
|
minimum: null, |
|
average: null, |
|
positive: null, |
|
negative: null |
|
}, |
|
slopes: [] |
|
}, type = querySelectDirectDescendant(routeElement, "type"); |
|
route.type = (type == null ? void 0 : type.innerHTML) ?? (type == null ? void 0 : type.textContent) ?? null; |
|
const linkElement = routeElement.querySelector("link"); |
|
linkElement !== null && (route.link = { |
|
href: linkElement.getAttribute("href") ?? "", |
|
text: getElementValue(linkElement, "text"), |
|
type: getElementValue(linkElement, "type") |
|
}); |
|
const routePoints = Array.from(routeElement.querySelectorAll("rtept")); |
|
for (const routePoint of routePoints) { |
|
const point = { |
|
latitude: parseFloat(routePoint.getAttribute("lat") ?? ""), |
|
longitude: parseFloat(routePoint.getAttribute("lon") ?? ""), |
|
elevation: null, |
|
time: null, |
|
extensions: null |
|
}, rawElevation = parseFloat( |
|
getElementValue(routePoint, "ele") ?? "" |
|
); |
|
point.elevation = isNaN(rawElevation) ? null : rawElevation; |
|
const rawTime = getElementValue(routePoint, "time"); |
|
point.time = rawTime == null ? null : new Date(rawTime), route.points.push(point); |
|
} |
|
route.distance = calculateDistance(route.points), route.duration = calculateDuration( |
|
route.points, |
|
route.distance, |
|
options |
|
), route.elevation = calculateElevation(route.points), route.slopes = calculateSlopes(route.points, route.distance.cumulative), output.routes.push(route); |
|
} |
|
const tracks2 = Array.from(output.xml.querySelectorAll("trk")); |
|
for (const trackElement of tracks2) { |
|
const track = { |
|
name: getElementValue(trackElement, "name"), |
|
comment: getElementValue(trackElement, "cmt"), |
|
description: getElementValue(trackElement, "desc"), |
|
src: getElementValue(trackElement, "src"), |
|
number: getElementValue(trackElement, "number"), |
|
type: null, |
|
link: null, |
|
points: [], |
|
distance: { |
|
cumulative: [], |
|
total: 0 |
|
}, |
|
duration: { |
|
cumulative: [], |
|
movingDuration: 0, |
|
totalDuration: 0, |
|
startTime: null, |
|
endTime: null |
|
}, |
|
elevation: { |
|
maximum: null, |
|
minimum: null, |
|
average: null, |
|
positive: null, |
|
negative: null |
|
}, |
|
slopes: [] |
|
}, type = querySelectDirectDescendant(trackElement, "type"); |
|
track.type = (type == null ? void 0 : type.innerHTML) ?? (type == null ? void 0 : type.textContent) ?? null; |
|
const linkElement = trackElement.querySelector("link"); |
|
linkElement !== null && (track.link = { |
|
href: linkElement.getAttribute("href") ?? "", |
|
text: getElementValue(linkElement, "text"), |
|
type: getElementValue(linkElement, "type") |
|
}); |
|
const trackPoints = Array.from(trackElement.querySelectorAll("trkpt")); |
|
for (const trackPoint of trackPoints) { |
|
const point = { |
|
latitude: parseFloat(trackPoint.getAttribute("lat") ?? ""), |
|
longitude: parseFloat(trackPoint.getAttribute("lon") ?? ""), |
|
elevation: null, |
|
time: null, |
|
extensions: null |
|
}, extensionsElement = trackPoint.querySelector("extensions"); |
|
if (extensionsElement !== null) { |
|
let extensions = {}; |
|
extensions = parseExtensions( |
|
extensions, |
|
extensionsElement.childNodes |
|
), point.extensions = extensions; |
|
} |
|
const rawElevation = parseFloat( |
|
getElementValue(trackPoint, "ele") ?? "" |
|
); |
|
point.elevation = isNaN(rawElevation) ? null : rawElevation; |
|
const rawTime = getElementValue(trackPoint, "time"); |
|
point.time = rawTime == null ? null : new Date(rawTime), track.points.push(point); |
|
} |
|
track.distance = calculateDistance(track.points), track.duration = calculateDuration( |
|
track.points, |
|
track.distance, |
|
options |
|
), track.elevation = calculateElevation(track.points), track.slopes = calculateSlopes(track.points, track.distance.cumulative), output.tracks.push(track); |
|
} |
|
return options.removeEmptyFields && (deleteNullFields(output.metadata), deleteNullFields(output.waypoints), deleteNullFields(output.tracks), deleteNullFields(output.routes)), [new ParsedGPX(output, options), null]; |
|
}, "parseGPXWithCustomParser"); |
|
parseExtensions = /* @__PURE__ */ __name((extensions, extensionChildrenCollection) => (Array.from(extensionChildrenCollection).filter((child) => child.nodeType === 1).forEach((child) => { |
|
var _a; |
|
const tagName = child.nodeName; |
|
if (((_a = child.childNodes) == null ? void 0 : _a.length) === 1 && child.childNodes[0].nodeType === 3 && child.childNodes[0].textContent) { |
|
const textContent = child.childNodes[0].textContent.trim(), value = isNaN(+textContent) ? textContent : parseFloat(textContent); |
|
extensions[tagName] = value; |
|
} else |
|
extensions[tagName] = {}, extensions[tagName] = parseExtensions( |
|
extensions[tagName], |
|
child.childNodes |
|
); |
|
}), extensions), "parseExtensions"); |
|
getElementValue = /* @__PURE__ */ __name((parent, tag) => { |
|
var _a; |
|
const element = parent.querySelector(tag); |
|
return element !== null ? ((_a = element.firstChild) == null ? void 0 : _a.textContent) ?? element.innerHTML ?? null : null; |
|
}, "getElementValue"); |
|
querySelectDirectDescendant = /* @__PURE__ */ __name((parent, tag) => { |
|
try { |
|
return parent.querySelector(`:scope > ${tag}`); |
|
} catch { |
|
return parent.childNodes ? Array.from(parent.childNodes).find( |
|
(element) => element.tagName == tag |
|
) ?? null : null; |
|
} |
|
}, "querySelectDirectDescendant"); |
|
deleteNullFields = /* @__PURE__ */ __name((object) => { |
|
if (!(typeof object != "object" || object === null || object === void 0)) { |
|
if (Array.isArray(object)) { |
|
object.forEach(deleteNullFields); |
|
return; |
|
} |
|
for (const [key, value] of Object.entries(object)) |
|
value == null || value == null ? delete object[key] : deleteNullFields(value); |
|
} |
|
}, "deleteNullFields"); |
|
_ParsedGPX = class _ParsedGPX2 { |
|
constructor({ xml, metadata, waypoints: waypoints2, tracks: tracks2, routes }, options) { |
|
__publicField(this, "xml"); |
|
__publicField(this, "metadata"); |
|
__publicField(this, "waypoints"); |
|
__publicField(this, "tracks"); |
|
__publicField(this, "routes"); |
|
__publicField(this, "options"); |
|
this.xml = xml, this.metadata = metadata, this.waypoints = waypoints2, this.tracks = tracks2, this.routes = routes, this.options = options; |
|
} |
|
/** |
|
* Outputs the GPX data as GeoJSON, returning a JavaScript Object. |
|
* |
|
* @returns The GPX data converted to the GeoJSON format |
|
*/ |
|
toGeoJSON() { |
|
const GeoJSON2 = { |
|
type: "FeatureCollection", |
|
features: [], |
|
properties: this.metadata |
|
}, addFeature = /* @__PURE__ */ __name((track) => { |
|
const { |
|
name, |
|
comment, |
|
description, |
|
src, |
|
number, |
|
link, |
|
type, |
|
points |
|
} = track, feature = { |
|
type: "Feature", |
|
geometry: { type: "LineString", coordinates: [] }, |
|
properties: { |
|
name, |
|
comment, |
|
description, |
|
src, |
|
number, |
|
link, |
|
type |
|
} |
|
}; |
|
for (const point of points) { |
|
const { longitude, latitude, elevation } = point; |
|
feature.geometry.coordinates.push([ |
|
longitude, |
|
latitude, |
|
elevation |
|
]); |
|
} |
|
GeoJSON2.features.push(feature); |
|
}, "addFeature"); |
|
for (const track of [...this.tracks, ...this.routes]) |
|
addFeature(track); |
|
for (const waypoint of this.waypoints) { |
|
const { |
|
name, |
|
symbol, |
|
comment, |
|
description, |
|
longitude, |
|
latitude, |
|
elevation |
|
} = waypoint, feature = { |
|
type: "Feature", |
|
geometry: { |
|
type: "Point", |
|
coordinates: [longitude, latitude, elevation] |
|
}, |
|
properties: { name, symbol, comment, description } |
|
}; |
|
GeoJSON2.features.push(feature); |
|
} |
|
return this.options.removeEmptyFields && deleteNullFields(GeoJSON2), GeoJSON2; |
|
} |
|
applyToTrack(trackIndex, func, ...args) { |
|
if (trackIndex < 0 || trackIndex >= this.tracks.length) { |
|
console.error("The track index is out of bounds."); |
|
return; |
|
} |
|
try { |
|
return func(this.tracks[trackIndex].points, ...args); |
|
} catch (error) { |
|
throw new Error( |
|
`An error occurred in the applyToTrack function. |
|
${error} |
|
|
|
Check that the track index is valid, and that the function has the correct arguments.` |
|
); |
|
} |
|
} |
|
applyToRoute(routeIndex, func, ...args) { |
|
if (routeIndex < 0 || routeIndex >= this.routes.length) { |
|
console.error("The route index is out of bounds."); |
|
return; |
|
} |
|
try { |
|
return func(this.routes[routeIndex].points, ...args); |
|
} catch (error) { |
|
throw new Error( |
|
`An error occurred in the applyToRoute function. |
|
${error} |
|
|
|
Check that the route index is valid, and that the function has the correct arguments.` |
|
); |
|
} |
|
} |
|
}; |
|
__name(_ParsedGPX, "ParsedGPX"); |
|
ParsedGPX = _ParsedGPX; |
|
__name(stringifyGPX, "stringifyGPX"); |
|
GPX_NS = "http://www.topografix.com/GPX/1/1"; |
|
EXPR_PROPERTY = "$expr"; |
|
FOR_PROPERTY = "$for"; |
|
FUNC_PROPERTY = "$func"; |
|
LINK_MAPPING = { |
|
"@href": "=", |
|
text: "=", |
|
type: "=" |
|
}; |
|
__name(ExtensionsMapping, "ExtensionsMapping"); |
|
POINT_MAPPING = { |
|
"@lat": "latitude", |
|
"@lon": "longitude", |
|
ele: "elevation", |
|
time: "=", |
|
extensions: { |
|
$func: ExtensionsMapping |
|
} |
|
}; |
|
GPX_MAPPING = { |
|
metadata: { |
|
name: "=", |
|
desc: "description", |
|
author: { |
|
name: "=", |
|
email: { |
|
"@id": "=", |
|
"@domain": "=" |
|
}, |
|
link: LINK_MAPPING |
|
}, |
|
link: LINK_MAPPING, |
|
time: "=" |
|
}, |
|
wpt: { |
|
$expr: "waypoints", |
|
$for: { |
|
"@lat": "latitude", |
|
"@lon": "longitude", |
|
name: "=", |
|
desc: "description", |
|
ele: "elevation", |
|
time: "=", |
|
cmt: "comment" |
|
} |
|
}, |
|
trk: { |
|
$expr: "tracks", |
|
$for: { |
|
name: "=", |
|
cmt: "comment", |
|
desc: "description", |
|
src: "=", |
|
number: "=", |
|
link: LINK_MAPPING, |
|
type: "=", |
|
trkseg: { |
|
$expr: ".", |
|
trkpt: { |
|
$expr: "points", |
|
$for: POINT_MAPPING |
|
} |
|
} |
|
} |
|
}, |
|
rte: { |
|
$expr: "routes", |
|
$for: { |
|
name: "=", |
|
cmt: "comment", |
|
desc: "description", |
|
src: "=", |
|
number: "=", |
|
link: LINK_MAPPING, |
|
type: "=", |
|
rtept: { |
|
$expr: "points", |
|
$for: POINT_MAPPING |
|
} |
|
} |
|
} |
|
}; |
|
_XmlMapper = class _XmlMapper2 { |
|
constructor(doc) { |
|
__publicField(this, "doc"); |
|
this.doc = doc; |
|
} |
|
/** |
|
* Generate XML attributes and elements using the given mapping. |
|
*/ |
|
mapObject(objectMapping, srcObj, dstElem) { |
|
for (const field in objectMapping) |
|
field !== EXPR_PROPERTY && this.mapField(field, objectMapping[field], srcObj, dstElem); |
|
} |
|
/** |
|
* Generate XML elements and attributes for the specified field. |
|
*/ |
|
mapField(fieldExpr, mapping, srcObj, dstElem) { |
|
const isAttribute = fieldExpr.startsWith("@"), fieldName = isAttribute ? fieldExpr.substring(1) : fieldExpr; |
|
if (typeof mapping == "object") { |
|
const fieldMapping = mapping, fieldValue = this.evalExpr(srcObj, fieldMapping[EXPR_PROPERTY] ?? "=", fieldName); |
|
if (fieldValue == null) |
|
return; |
|
const forMapping = fieldMapping[FOR_PROPERTY]; |
|
if (forMapping) |
|
for (const value of fieldValue) { |
|
const elem = this.doc.createElementNS(GPX_NS, fieldName); |
|
dstElem.append(elem), this.mapObject(forMapping, value, elem); |
|
} |
|
else { |
|
const elem = this.doc.createElementNS(GPX_NS, fieldName); |
|
dstElem.append(elem); |
|
const funcMapping = fieldMapping[FUNC_PROPERTY]; |
|
funcMapping ? funcMapping(this.doc, fieldValue, elem) : this.mapObject(mapping, fieldValue, elem); |
|
} |
|
} else if (typeof mapping == "string") { |
|
const value = this.evalExpr(srcObj, mapping, fieldName); |
|
if (value == null) |
|
return; |
|
if (isAttribute) |
|
dstElem.setAttribute(fieldName, value); |
|
else { |
|
const valueElem = this.doc.createElementNS(GPX_NS, fieldName); |
|
dstElem.append(valueElem); |
|
const node = this.doc.createTextNode(value); |
|
valueElem.append(node); |
|
} |
|
} else |
|
throw new Error(`Unsupported field mapping: ${mapping}`); |
|
} |
|
/** |
|
* Evalutes a field expression for the specified object. If the expression |
|
* equals `=`, then the specified `fieldName` will be used. |
|
*/ |
|
evalExpr(srcObj, expr, fieldName) { |
|
let property = expr; |
|
if (expr === ".") |
|
return srcObj; |
|
expr === "=" && (property = fieldName); |
|
const value = srcObj[property]; |
|
return value != null && typeof value == "object" && fieldName === "time" ? value.toISOString() : value; |
|
} |
|
}; |
|
__name(_XmlMapper, "XmlMapper"); |
|
XmlMapper = _XmlMapper; |
|
} |
|
}); |
|
|
|
// io.js |
|
function parseGPXTracks(text, baseName) { |
|
const [parsed, err] = parseGPX(text, { removeEmptyFields: false }); |
|
if (err || !parsed) { |
|
console.warn("GPX parse error:", err); |
|
return { tracks: [], waypoints: [] }; |
|
} |
|
const result = { tracks: [], waypoints: [], _gpxParsed: parsed }; |
|
const xml = parsed.xml; |
|
const trkEls = Array.from(xml.querySelectorAll("trk")); |
|
for (let ti = 0; ti < trkEls.length && ti < parsed.tracks.length; ti++) { |
|
const trkEl = trkEls[ti]; |
|
const nameEl = trkEl.querySelector(":scope > name"); |
|
const trkName = nameEl ? nameEl.textContent.trim() : baseName; |
|
const segs = trkEl.querySelectorAll("trkseg"); |
|
const gpxTrack = parsed.tracks[ti]; |
|
if (segs.length <= 1) { |
|
const coords = gpxTrack.points.map((p) => [p.longitude, p.latitude, p.elevation]); |
|
if (coords.length) { |
|
result.tracks.push({ name: trkName, coords, _gpxParsed: parsed, _gpxTrackIdx: ti }); |
|
} |
|
} else { |
|
const groupId = "grp-" + Date.now() + "-" + Math.random().toString(36).slice(2, 6); |
|
let offset = 0; |
|
for (let si = 0; si < segs.length; si++) { |
|
const segPtCount = segs[si].querySelectorAll("trkpt").length; |
|
const segPoints = gpxTrack.points.slice(offset, offset + segPtCount); |
|
const coords = segPoints.map((p) => [p.longitude, p.latitude, p.elevation]); |
|
if (coords.length) { |
|
result.tracks.push({ |
|
name: `${trkName} seg${si + 1}`, |
|
coords, |
|
_gpxParsed: parsed, |
|
_gpxTrackIdx: ti, |
|
_segmentIndex: si, |
|
groupId, |
|
groupName: trkName, |
|
segmentLabel: `seg ${si + 1}` |
|
}); |
|
} |
|
offset += segPtCount; |
|
} |
|
} |
|
} |
|
for (let i = 0; i < parsed.routes.length; i++) { |
|
const gr = parsed.routes[i]; |
|
const name = gr.name || baseName; |
|
const coords = gr.points.map((p) => [p.longitude, p.latitude, p.elevation]); |
|
if (coords.length) { |
|
result.tracks.push({ name, coords, _gpxParsed: parsed, _gpxRouteIdx: i }); |
|
} |
|
} |
|
for (const wp of parsed.waypoints) { |
|
result.waypoints.push({ |
|
name: wp.name, |
|
coords: [wp.longitude, wp.latitude, wp.elevation], |
|
sym: wp.symbol, |
|
desc: wp.description, |
|
comment: wp.comment |
|
}); |
|
} |
|
return result; |
|
} |
|
function parseGeoJSON(text) { |
|
const gj = JSON.parse(text); |
|
const results = []; |
|
function extractCoords(geom) { |
|
if (geom.type === "LineString") { |
|
results.push(geom.coordinates.map((c) => [c[0], c[1], c[2] != null ? c[2] : null])); |
|
} else if (geom.type === "MultiLineString") { |
|
for (const line of geom.coordinates) { |
|
results.push(line.map((c) => [c[0], c[1], c[2] != null ? c[2] : null])); |
|
} |
|
} |
|
} |
|
if (gj.type === "FeatureCollection") { |
|
for (const f of gj.features) extractCoords(f.geometry); |
|
} else if (gj.type === "Feature") { |
|
extractCoords(gj.geometry); |
|
} else { |
|
extractCoords(gj); |
|
} |
|
return results; |
|
} |
|
function importFileContent(filename, text) { |
|
const baseName = filename.replace(/\.[^.]+$/, ""); |
|
if (filename.endsWith(".gpx")) { |
|
const result = parseGPXTracks(text, baseName); |
|
if (!result.tracks.length && !result.waypoints.length) { |
|
console.warn("No tracks or waypoints found in", filename); |
|
return; |
|
} |
|
for (const trk of result.tracks) { |
|
const t = tracksFns2.createTrack(trk.name, trk.coords, { |
|
groupId: trk.groupId, |
|
groupName: trk.groupName, |
|
segmentLabel: trk.segmentLabel |
|
}); |
|
tracksFns2.fitToTrack(t); |
|
} |
|
if (result.waypoints.length && tracksFns2.addWaypoints) { |
|
tracksFns2.addWaypoints(result.waypoints); |
|
} |
|
} else { |
|
const coordsList = parseGeoJSON(text); |
|
if (!coordsList.length) { |
|
console.warn("No tracks found in", filename); |
|
return; |
|
} |
|
for (let i = 0; i < coordsList.length; i++) { |
|
const name = coordsList.length > 1 ? `${baseName} (${i + 1})` : baseName; |
|
const t = tracksFns2.createTrack(name, coordsList[i]); |
|
tracksFns2.fitToTrack(t); |
|
} |
|
} |
|
} |
|
function escapeXml(s) { |
|
return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """); |
|
} |
|
function buildTrackGPXString(name, coords) { |
|
const pts = coords.map((c) => { |
|
const ele = c[2] != null ? `<ele>${c[2]}</ele>` : ""; |
|
return ` <trkpt lat="${c[1]}" lon="${c[0]}">${ele}</trkpt>`; |
|
}).join("\n"); |
|
return `<?xml version="1.0" encoding="UTF-8"?> |
|
<gpx version="1.1" creator="slope-editor"> |
|
<trk> |
|
<name>${escapeXml(name)}</name> |
|
<trkseg> |
|
${pts} |
|
</trkseg> |
|
</trk> |
|
</gpx>`; |
|
} |
|
function exportActiveGPX() { |
|
const t = tracksFns2.getActiveTrack(); |
|
if (!t || !t.coords.length) return; |
|
downloadFile(t.name + ".gpx", buildTrackGPXString(t.name, t.coords), "application/gpx+xml"); |
|
} |
|
function exportActiveGeoJSON() { |
|
const t = tracksFns2.getActiveTrack(); |
|
if (!t || !t.coords.length) return; |
|
const gj = { |
|
type: "Feature", |
|
properties: { name: t.name }, |
|
geometry: { |
|
type: "LineString", |
|
coordinates: t.coords.map((c) => c[2] != null ? [c[0], c[1], c[2]] : [c[0], c[1]]) |
|
} |
|
}; |
|
downloadFile(t.name + ".geojson", JSON.stringify(gj, null, 2), "application/geo+json"); |
|
} |
|
function buildWaypointsGPXFragment(waypoints2) { |
|
if (!waypoints2 || !waypoints2.length) return ""; |
|
return waypoints2.map((wp) => { |
|
const ele = wp.coords[2] != null ? ` |
|
<ele>${wp.coords[2]}</ele>` : ""; |
|
const name = wp.name ? ` |
|
<name>${escapeXml(wp.name)}</name>` : ""; |
|
const sym = wp.sym ? ` |
|
<sym>${escapeXml(wp.sym)}</sym>` : ""; |
|
const desc = wp.desc ? ` |
|
<desc>${escapeXml(wp.desc)}</desc>` : ""; |
|
const cmt = wp.comment ? ` |
|
<cmt>${escapeXml(wp.comment)}</cmt>` : ""; |
|
return ` <wpt lat="${wp.coords[1]}" lon="${wp.coords[0]}">${ele}${name}${sym}${desc}${cmt} |
|
</wpt>`; |
|
}).join("\n"); |
|
} |
|
function exportAllGPX() { |
|
const tracks2 = tracksFns2.getTracks(); |
|
const wpts = tracksFns2.getWaypoints ? tracksFns2.getWaypoints() : []; |
|
if (!tracks2.length && !wpts.length) return; |
|
const wptXml = buildWaypointsGPXFragment(wpts); |
|
const trkFragments = []; |
|
const grouped = /* @__PURE__ */ new Map(); |
|
const ungrouped = []; |
|
for (const t of tracks2) { |
|
if (t.groupId) { |
|
if (!grouped.has(t.groupId)) grouped.set(t.groupId, []); |
|
grouped.get(t.groupId).push(t); |
|
} else { |
|
ungrouped.push(t); |
|
} |
|
} |
|
for (const [, group] of grouped) { |
|
const name = group[0].groupName || group[0].name; |
|
const segs = group.map((t) => { |
|
const pts = t.coords.map((c) => { |
|
const ele = c[2] != null ? `<ele>${c[2]}</ele>` : ""; |
|
return ` <trkpt lat="${c[1]}" lon="${c[0]}">${ele}</trkpt>`; |
|
}).join("\n"); |
|
return ` <trkseg> |
|
${pts} |
|
</trkseg>`; |
|
}).join("\n"); |
|
trkFragments.push(` <trk> |
|
<name>${escapeXml(name)}</name> |
|
${segs} |
|
</trk>`); |
|
} |
|
for (const t of ungrouped) { |
|
const pts = t.coords.map((c) => { |
|
const ele = c[2] != null ? `<ele>${c[2]}</ele>` : ""; |
|
return ` <trkpt lat="${c[1]}" lon="${c[0]}">${ele}</trkpt>`; |
|
}).join("\n"); |
|
trkFragments.push(` <trk> |
|
<name>${escapeXml(t.name)}</name> |
|
<trkseg> |
|
${pts} |
|
</trkseg> |
|
</trk>`); |
|
} |
|
const gpx = `<?xml version="1.0" encoding="UTF-8"?> |
|
<gpx version="1.1" creator="slope-editor"> |
|
${wptXml} |
|
${trkFragments.join("\n")} |
|
</gpx>`; |
|
downloadFile("all-tracks.gpx", gpx, "application/gpx+xml"); |
|
} |
|
function initIO(deps) { |
|
tracksFns2 = deps; |
|
const dropOverlay = document.getElementById("drop-overlay"); |
|
let dragCounter = 0; |
|
document.addEventListener("dragenter", (e) => { |
|
e.preventDefault(); |
|
dragCounter++; |
|
dropOverlay.classList.add("visible"); |
|
}); |
|
document.addEventListener("dragleave", (e) => { |
|
e.preventDefault(); |
|
dragCounter--; |
|
if (dragCounter <= 0) { |
|
dragCounter = 0; |
|
dropOverlay.classList.remove("visible"); |
|
} |
|
}); |
|
document.addEventListener("dragover", (e) => { |
|
e.preventDefault(); |
|
e.dataTransfer.dropEffect = "copy"; |
|
}); |
|
document.addEventListener("drop", async (e) => { |
|
e.preventDefault(); |
|
dragCounter = 0; |
|
dropOverlay.classList.remove("visible"); |
|
const items = e.dataTransfer.items; |
|
if (items && items.length) { |
|
const entries = []; |
|
for (const item of items) { |
|
const entry = item.webkitGetAsEntry?.(); |
|
if (entry) entries.push(entry); |
|
} |
|
if (entries.some((en) => en.isDirectory)) { |
|
for (const entry of entries) { |
|
if (entry.isDirectory) await readDirectoryEntries(entry); |
|
else if (entry.isFile) await readFileEntry(entry); |
|
} |
|
return; |
|
} |
|
} |
|
for (const file of e.dataTransfer.files) { |
|
const reader = new FileReader(); |
|
reader.onload = () => importFileContent(file.name, reader.result); |
|
reader.readAsText(file); |
|
} |
|
}); |
|
document.getElementById("export-gpx-btn").addEventListener("click", exportActiveGPX); |
|
document.getElementById("export-geojson-btn").addEventListener("click", exportActiveGeoJSON); |
|
document.getElementById("export-all-gpx-btn").addEventListener("click", exportAllGPX); |
|
const openFolderBtn = document.getElementById("open-folder-btn"); |
|
if (openFolderBtn) { |
|
openFolderBtn.addEventListener("click", openFolder); |
|
} |
|
const saveFolderBtn = document.getElementById("save-folder-btn"); |
|
if (saveFolderBtn) { |
|
if ("showDirectoryPicker" in window) { |
|
saveFolderBtn.addEventListener("click", saveToFolder); |
|
} else { |
|
saveFolderBtn.style.display = "none"; |
|
} |
|
} |
|
} |
|
async function openDirectoryPicker() { |
|
const dirHandle = await window.showDirectoryPicker({ mode: "read" }); |
|
for await (const [name, handle] of dirHandle.entries()) { |
|
if (handle.kind === "file" && FILE_PATTERN.test(name)) { |
|
const file = await handle.getFile(); |
|
const text = await file.text(); |
|
importFileContent(name, text); |
|
} |
|
} |
|
} |
|
function openDirectoryInput() { |
|
const input = document.createElement("input"); |
|
input.type = "file"; |
|
input.webkitdirectory = true; |
|
input.multiple = true; |
|
input.accept = ".gpx,.geojson,.json"; |
|
input.addEventListener("change", () => { |
|
for (const file of input.files) { |
|
if (FILE_PATTERN.test(file.name)) { |
|
file.text().then((text) => importFileContent(file.name, text)); |
|
} |
|
} |
|
}); |
|
input.click(); |
|
} |
|
async function openFolder() { |
|
if ("showDirectoryPicker" in window) { |
|
try { |
|
await openDirectoryPicker(); |
|
return; |
|
} catch (e) { |
|
if (e.name === "AbortError") return; |
|
console.warn("showDirectoryPicker failed, falling back:", e); |
|
} |
|
} |
|
openDirectoryInput(); |
|
} |
|
async function saveToFolder() { |
|
const tracks2 = tracksFns2.getTracks(); |
|
if (!tracks2.length) return; |
|
const dirHandle = await window.showDirectoryPicker({ mode: "readwrite" }); |
|
for (const t of tracks2) { |
|
const safeName = t.name.replace(/[^a-z0-9._-]/gi, "_"); |
|
const fileHandle = await dirHandle.getFileHandle(safeName + ".gpx", { create: true }); |
|
const writable = await fileHandle.createWritable(); |
|
await writable.write(buildTrackGPXString(t.name, t.coords)); |
|
await writable.close(); |
|
} |
|
} |
|
async function readDirectoryEntries(dirEntry) { |
|
const reader = dirEntry.createReader(); |
|
const entries = await new Promise((resolve) => { |
|
reader.readEntries(resolve); |
|
}); |
|
for (const entry of entries) { |
|
if (entry.isFile && FILE_PATTERN.test(entry.name)) { |
|
await readFileEntry(entry); |
|
} else if (entry.isDirectory) { |
|
await readDirectoryEntries(entry); |
|
} |
|
} |
|
} |
|
function readFileEntry(entry) { |
|
return new Promise((resolve) => { |
|
entry.file((file) => { |
|
file.text().then((text) => { |
|
importFileContent(file.name, text); |
|
resolve(); |
|
}); |
|
}); |
|
}); |
|
} |
|
var tracksFns2, FILE_PATTERN; |
|
var init_io = __esm({ |
|
"io.js"() { |
|
init_gpxjs(); |
|
init_utils(); |
|
tracksFns2 = {}; |
|
FILE_PATTERN = /\.(gpx|geojson|json)$/i; |
|
} |
|
}); |
|
|
|
// persist.js |
|
function serializeTracks(tracks2) { |
|
return tracks2.map((t) => ({ |
|
name: t.name, |
|
color: t.color, |
|
coords: t.coords, |
|
groupId: t.groupId || void 0, |
|
groupName: t.groupName || void 0, |
|
segmentLabel: t.segmentLabel || void 0 |
|
})); |
|
} |
|
function saveTracks(tracks2) { |
|
try { |
|
localStorage.setItem(TRACKS_KEY, JSON.stringify(serializeTracks(tracks2))); |
|
} catch { |
|
} |
|
} |
|
function loadTracks() { |
|
try { |
|
const raw = localStorage.getItem(TRACKS_KEY); |
|
return raw ? JSON.parse(raw) : []; |
|
} catch { |
|
return []; |
|
} |
|
} |
|
function saveSettings(state4) { |
|
try { |
|
const obj = {}; |
|
for (const k of SETTING_KEYS) { |
|
if (state4[k] !== void 0) obj[k] = state4[k]; |
|
} |
|
localStorage.setItem(SETTINGS_KEY, JSON.stringify(obj)); |
|
} catch { |
|
} |
|
} |
|
function loadSettings() { |
|
try { |
|
const raw = localStorage.getItem(SETTINGS_KEY); |
|
return raw ? JSON.parse(raw) : null; |
|
} catch { |
|
return null; |
|
} |
|
} |
|
function clearAll() { |
|
try { |
|
localStorage.removeItem(TRACKS_KEY); |
|
localStorage.removeItem(SETTINGS_KEY); |
|
} catch { |
|
} |
|
} |
|
var TRACKS_KEY, SETTINGS_KEY, SETTING_KEYS; |
|
var init_persist = __esm({ |
|
"persist.js"() { |
|
TRACKS_KEY = "slope:tracks"; |
|
SETTINGS_KEY = "slope:settings"; |
|
SETTING_KEYS = [ |
|
"basemap", |
|
"mode", |
|
"slopeOpacity", |
|
"basemapOpacity", |
|
"hillshadeOpacity", |
|
"hillshadeMethod", |
|
"terrain3d", |
|
"terrainExaggeration", |
|
"multiplyBlend", |
|
"showContours", |
|
"showOpenSkiMap", |
|
"cursorInfoMode" |
|
]; |
|
} |
|
}); |
|
|
|
// tracks.js |
|
function scheduleSave() { |
|
clearTimeout(_saveTimer); |
|
_saveTimer = setTimeout(() => saveTracks(tracks), 300); |
|
} |
|
function nextColor() { |
|
const c = TRACK_COLORS[trackColorIdx % TRACK_COLORS.length]; |
|
trackColorIdx++; |
|
return c; |
|
} |
|
function invalidateTrackStats(t) { |
|
if (t) t._statsCache = null; |
|
} |
|
function invalidateAllTrackStats() { |
|
for (const t of tracks) invalidateTrackStats(t); |
|
} |
|
function elevationAt2(lngLat) { |
|
const r = queryLoadedElevationAtLngLat(map2, lngLat); |
|
return r ? Math.round(r.elevation * 10) / 10 : null; |
|
} |
|
function representativeTrackSampleSpacingMeters(coords, totalDistMeters) { |
|
if (!coords.length) return 4; |
|
const meanLat = coords.reduce((sum, c) => sum + c[1], 0) / coords.length; |
|
const nominal = 400750167e-1 / Math.pow(2, DEM_MAX_Z) / CORE_DIM * Math.max(0.25, Math.cos(meanLat * Math.PI / 180)); |
|
return Math.max(2, nominal, totalDistMeters / 2e3); |
|
} |
|
function interpolateTrackLngLat(coords, cumulativeMeters, targetMeters) { |
|
if (targetMeters <= 0) return { lng: coords[0][0], lat: coords[0][1] }; |
|
const totalMeters = cumulativeMeters[cumulativeMeters.length - 1]; |
|
if (targetMeters >= totalMeters) { |
|
const last = coords[coords.length - 1]; |
|
return { lng: last[0], lat: last[1] }; |
|
} |
|
let segIndex = 1; |
|
while (segIndex < cumulativeMeters.length && cumulativeMeters[segIndex] < targetMeters) segIndex++; |
|
const startMeters = cumulativeMeters[segIndex - 1]; |
|
const endMeters = cumulativeMeters[segIndex]; |
|
const spanMeters = endMeters - startMeters; |
|
const t = spanMeters > 0 ? (targetMeters - startMeters) / spanMeters : 0; |
|
const a = coords[segIndex - 1]; |
|
const b = coords[segIndex]; |
|
return { |
|
lng: a[0] + (b[0] - a[0]) * t, |
|
lat: a[1] + (b[1] - a[1]) * t |
|
}; |
|
} |
|
function computeTerrainSlopeAlongTrack(coords, cumulativeMeters, totalDistMeters) { |
|
if (coords.length < 2 || totalDistMeters <= 0) { |
|
return { average: null, maximum: null, sampleCount: 0, resolvedCount: 0 }; |
|
} |
|
const spacingMeters = representativeTrackSampleSpacingMeters(coords, totalDistMeters); |
|
const sampleCount = Math.max(2, Math.ceil(totalDistMeters / spacingMeters) + 1); |
|
let sum = 0; |
|
let maximum = -Infinity; |
|
let resolvedCount = 0; |
|
for (let i = 0; i < sampleCount; i++) { |
|
const distanceMeters = sampleCount === 1 ? 0 : i / (sampleCount - 1) * totalDistMeters; |
|
const lngLat = interpolateTrackLngLat(coords, cumulativeMeters, distanceMeters); |
|
const sample = queryLoadedElevationAtLngLat(map2, lngLat); |
|
if (!sample || !Number.isFinite(sample.slopeDeg)) continue; |
|
sum += sample.slopeDeg; |
|
maximum = Math.max(maximum, sample.slopeDeg); |
|
resolvedCount++; |
|
} |
|
return { |
|
average: resolvedCount ? sum / resolvedCount : null, |
|
maximum: resolvedCount ? maximum : null, |
|
sampleCount, |
|
resolvedCount |
|
}; |
|
} |
|
function enrichElevation(coords) { |
|
for (const c of coords) { |
|
if (c[2] != null) continue; |
|
const e = elevationAt2({ lng: c[0], lat: c[1] }); |
|
if (e != null) c[2] = e; |
|
} |
|
} |
|
function enrichAllTracks() { |
|
let anyUpdated = false; |
|
for (const t of tracks) { |
|
for (const c of t.coords) { |
|
if (c[2] != null) continue; |
|
const e = elevationAt2({ lng: c[0], lat: c[1] }); |
|
if (e != null) { |
|
c[2] = e; |
|
anyUpdated = true; |
|
} |
|
} |
|
} |
|
if (anyUpdated) { |
|
invalidateAllTrackStats(); |
|
refreshAllTrackSources(); |
|
renderTrackList(); |
|
updateProfileFn2(); |
|
} |
|
} |
|
function trackSourceId(t) { |
|
return "track-" + t.id; |
|
} |
|
function trackLineLayerId(t) { |
|
return "track-line-" + t.id; |
|
} |
|
function trackPtsLayerId(t) { |
|
return "track-pts-" + t.id; |
|
} |
|
function trackGeoJSON(t) { |
|
const features = []; |
|
if (t.coords.length >= 2) { |
|
features.push({ |
|
type: "Feature", |
|
geometry: { type: "LineString", coordinates: t.coords.map((c) => c.slice()) }, |
|
properties: { id: t.id } |
|
}); |
|
} |
|
const last = t.coords.length - 1; |
|
for (let i = 0; i < t.coords.length; i++) { |
|
const role = i === 0 ? "start" : i === last ? "end" : "mid"; |
|
features.push({ |
|
type: "Feature", |
|
geometry: { type: "Point", coordinates: t.coords[i].slice() }, |
|
properties: { id: t.id, idx: i, role } |
|
}); |
|
} |
|
return { type: "FeatureCollection", features }; |
|
} |
|
function addTrackToMap(t) { |
|
const isActive = ["==", ["get", "id"], ["global-state", "activeTrackId"]]; |
|
const isEditing = ["==", ["get", "id"], ["global-state", "editingTrackId"]]; |
|
const isStartOrEnd = ["any", ["==", ["get", "role"], "start"], ["==", ["get", "role"], "end"]]; |
|
const isSelected = ["all", isEditing, ["==", ["get", "idx"], ["global-state", "selectedVertexIdx"]]]; |
|
map2.addSource(trackSourceId(t), { type: "geojson", data: trackGeoJSON(t) }); |
|
map2.addLayer({ |
|
id: trackLineLayerId(t), |
|
type: "line", |
|
source: trackSourceId(t), |
|
filter: ["==", "$type", "LineString"], |
|
paint: { |
|
"line-color": t.color, |
|
"line-width": ["case", isActive, 4, 3], |
|
"line-opacity": 0.9 |
|
} |
|
}); |
|
map2.addLayer({ |
|
id: trackPtsLayerId(t), |
|
type: "circle", |
|
source: trackSourceId(t), |
|
filter: ["==", "$type", "Point"], |
|
paint: { |
|
"circle-radius": [ |
|
"case", |
|
isSelected, |
|
7, |
|
["all", isEditing, ["==", ["get", "role"], "mid"]], |
|
4, |
|
isEditing, |
|
4, |
|
["all", isActive, isStartOrEnd], |
|
4, |
|
isStartOrEnd, |
|
3, |
|
0 |
|
], |
|
"circle-color": [ |
|
"case", |
|
isSelected, |
|
"#4a90d9", |
|
[ |
|
"match", |
|
["get", "role"], |
|
"start", |
|
"#22c55e", |
|
"end", |
|
"#ef4444", |
|
t.color |
|
] |
|
], |
|
"circle-stroke-color": ["case", isSelected, "#fff", "#fff"], |
|
"circle-stroke-width": [ |
|
"case", |
|
isSelected, |
|
2.5, |
|
isEditing, |
|
1.5, |
|
["all", isActive, isStartOrEnd], |
|
1.5, |
|
isStartOrEnd, |
|
1, |
|
0 |
|
] |
|
} |
|
}); |
|
} |
|
function ensureProfileHoverLayer() { |
|
if (!map2.getSource(PROFILE_HOVER_SOURCE_ID)) { |
|
map2.addSource(PROFILE_HOVER_SOURCE_ID, { |
|
type: "geojson", |
|
data: { type: "FeatureCollection", features: [] } |
|
}); |
|
} |
|
if (!map2.getLayer(PROFILE_HOVER_LAYER_ID)) { |
|
map2.addLayer({ |
|
id: PROFILE_HOVER_LAYER_ID, |
|
type: "circle", |
|
source: PROFILE_HOVER_SOURCE_ID, |
|
paint: { |
|
"circle-radius": 7, |
|
"circle-color": ["coalesce", ["get", "color"], "#4a90d9"], |
|
"circle-opacity": 0.95, |
|
"circle-stroke-color": "#ffffff", |
|
"circle-stroke-width": 2.5 |
|
} |
|
}); |
|
} |
|
if (!map2.getSource(HOVER_INSERT_SOURCE_ID2)) { |
|
map2.addSource(HOVER_INSERT_SOURCE_ID2, { |
|
type: "geojson", |
|
data: { type: "FeatureCollection", features: [] } |
|
}); |
|
} |
|
if (!map2.getLayer(HOVER_INSERT_LAYER_ID)) { |
|
map2.addLayer({ |
|
id: HOVER_INSERT_LAYER_ID, |
|
type: "circle", |
|
source: HOVER_INSERT_SOURCE_ID2, |
|
paint: { |
|
"circle-radius": 5, |
|
"circle-color": "rgba(128,128,128,0.5)", |
|
"circle-stroke-color": "#fff", |
|
"circle-stroke-width": 1 |
|
} |
|
}); |
|
} |
|
const INSERT_PREVIEW_SOURCE_ID = "insert-preview-line"; |
|
const INSERT_PREVIEW_LAYER_ID = "insert-preview-line-layer"; |
|
if (!map2.getSource(INSERT_PREVIEW_SOURCE_ID)) { |
|
map2.addSource(INSERT_PREVIEW_SOURCE_ID, { |
|
type: "geojson", |
|
data: { type: "FeatureCollection", features: [] } |
|
}); |
|
} |
|
if (!map2.getLayer(INSERT_PREVIEW_LAYER_ID)) { |
|
map2.addLayer({ |
|
id: INSERT_PREVIEW_LAYER_ID, |
|
type: "line", |
|
source: INSERT_PREVIEW_SOURCE_ID, |
|
paint: { |
|
"line-color": "rgba(74,144,217,0.6)", |
|
"line-width": 2, |
|
"line-dasharray": [4, 4] |
|
} |
|
}); |
|
} |
|
} |
|
function waypointGeoJSON() { |
|
return { |
|
type: "FeatureCollection", |
|
features: waypoints.map((wp) => ({ |
|
type: "Feature", |
|
geometry: { type: "Point", coordinates: wp.coords.slice(0, 2) }, |
|
properties: { name: wp.name || "", sym: wp.sym || "" } |
|
})) |
|
}; |
|
} |
|
function ensureWaypointLayer() { |
|
if (!map2.getSource(WAYPOINT_SOURCE_ID)) { |
|
map2.addSource(WAYPOINT_SOURCE_ID, { |
|
type: "geojson", |
|
data: waypointGeoJSON() |
|
}); |
|
} |
|
if (!map2.getLayer(WAYPOINT_CIRCLE_LAYER_ID)) { |
|
map2.addLayer({ |
|
id: WAYPOINT_CIRCLE_LAYER_ID, |
|
type: "circle", |
|
source: WAYPOINT_SOURCE_ID, |
|
paint: { |
|
"circle-radius": 6, |
|
"circle-color": "#f59e0b", |
|
"circle-stroke-color": "#fff", |
|
"circle-stroke-width": 2 |
|
} |
|
}); |
|
} |
|
if (!map2.getLayer(WAYPOINT_LABEL_LAYER_ID)) { |
|
map2.addLayer({ |
|
id: WAYPOINT_LABEL_LAYER_ID, |
|
type: "symbol", |
|
source: WAYPOINT_SOURCE_ID, |
|
layout: { |
|
"text-field": ["get", "name"], |
|
"text-size": 12, |
|
"text-offset": [0, 1.5], |
|
"text-anchor": "top", |
|
"text-font": ["Noto Sans Bold"] |
|
}, |
|
paint: { |
|
"text-color": "#1e293b", |
|
"text-halo-color": "#ffffff", |
|
"text-halo-width": 1.5 |
|
} |
|
}); |
|
} |
|
} |
|
function refreshWaypointSource() { |
|
const src = map2.getSource(WAYPOINT_SOURCE_ID); |
|
if (src) src.setData(waypointGeoJSON()); |
|
} |
|
function addWaypoints(newWaypoints) { |
|
for (const wp of newWaypoints) { |
|
waypoints.push({ |
|
id: "wpt-" + Date.now() + "-" + Math.random().toString(36).slice(2, 6), |
|
name: wp.name, |
|
coords: wp.coords, |
|
sym: wp.sym, |
|
desc: wp.desc, |
|
comment: wp.comment |
|
}); |
|
} |
|
if (waypoints.length) refreshWaypointSource(); |
|
} |
|
function removeTrackFromMap(t) { |
|
if (map2.getLayer(trackPtsLayerId(t))) map2.removeLayer(trackPtsLayerId(t)); |
|
if (map2.getLayer(trackLineLayerId(t))) map2.removeLayer(trackLineLayerId(t)); |
|
if (map2.getSource(trackSourceId(t))) map2.removeSource(trackSourceId(t)); |
|
} |
|
function refreshTrackSource(t) { |
|
const src = map2.getSource(trackSourceId(t)); |
|
if (src) src.setData(trackGeoJSON(t)); |
|
} |
|
function refreshAllTrackSources() { |
|
for (const t of tracks) refreshTrackSource(t); |
|
} |
|
function updateVertexHighlight(editingId, selIdx) { |
|
map2.setGlobalStateProperty("activeTrackId", activeTrackId); |
|
map2.setGlobalStateProperty("editingTrackId", editingId != null ? editingId : null); |
|
map2.setGlobalStateProperty("selectedVertexIdx", selIdx != null ? selIdx : -1); |
|
} |
|
function syncProfileToggleButton() { |
|
const t = getActiveTrack(); |
|
const profilePanel2 = document.getElementById("profile-panel"); |
|
const canShow = Boolean(t && t.coords.length >= 2); |
|
profileToggleBtn.disabled = !canShow; |
|
const isVisible = canShow && profilePanel2.classList.contains("visible") && !profileClosed; |
|
profileToggleBtn.classList.toggle("active", isVisible); |
|
profileToggleBtn.textContent = isVisible ? "Profile" : "Show Profile"; |
|
} |
|
function syncTrackPanelShell() { |
|
const isVisible = trackPanel.classList.contains("visible"); |
|
const hasTracks = tracks.length > 0; |
|
const toolRowParent = isVisible ? trackPanelHeader : trackPanelShell; |
|
const toolRowNextSibling = isVisible ? null : trackPanel; |
|
if (trackToolRow.parentElement !== toolRowParent) { |
|
toolRowParent.insertBefore(trackToolRow, toolRowNextSibling); |
|
} |
|
trackPanelShell.classList.toggle("visible", isVisible); |
|
trackPanelShell.classList.toggle("panel-surface", isVisible); |
|
tracksBtn.disabled = !hasTracks; |
|
tracksBtn.classList.toggle("active", isVisible && hasTracks); |
|
tracksBtn.textContent = isVisible && hasTracks ? "\xD7" : "\u{1F4CD}"; |
|
tracksBtn.title = hasTracks ? isVisible ? "Close tracks" : "Track list" : "No tracks"; |
|
} |
|
function setTrackPanelVisible(visible) { |
|
trackPanel.classList.toggle("visible", visible && tracks.length > 0); |
|
syncTrackPanelShell(); |
|
} |
|
function trackStats(t) { |
|
if (!t || t.coords.length < 2) return null; |
|
if (t._statsCache) return t._statsCache; |
|
const coords = t.coords; |
|
let dist = 0, gain = 0, loss = 0; |
|
let weightedSlopeSum = 0; |
|
let weightedSlopeDist = 0; |
|
const cumulativeMeters = [0]; |
|
for (let i = 1; i < coords.length; i++) { |
|
const segKm = haversineKm(coords[i - 1], coords[i]); |
|
const segMeters = segKm * 1e3; |
|
dist += segKm; |
|
cumulativeMeters.push(cumulativeMeters[i - 1] + segMeters); |
|
if (coords[i][2] != null && coords[i - 1][2] != null) { |
|
const dh = coords[i][2] - coords[i - 1][2]; |
|
if (dh > 0) gain += dh; |
|
else loss -= dh; |
|
if (segMeters > 0) { |
|
weightedSlopeSum += Math.atan2(Math.abs(dh), segMeters) * 180 / Math.PI * segMeters; |
|
weightedSlopeDist += segMeters; |
|
} |
|
} |
|
} |
|
const terrainSlopeAlongTrack = computeTerrainSlopeAlongTrack(coords, cumulativeMeters, dist * 1e3); |
|
const segmentMaxSlope = weightedSlopeDist > 0 ? coords.reduce((maxSlope, _coord, index) => { |
|
if (index === 0) return maxSlope; |
|
const segMeters = cumulativeMeters[index] - cumulativeMeters[index - 1]; |
|
if (segMeters <= 0 || coords[index][2] == null || coords[index - 1][2] == null) return maxSlope; |
|
const dh = coords[index][2] - coords[index - 1][2]; |
|
const slopeDeg = Math.atan2(Math.abs(dh), segMeters) * 180 / Math.PI; |
|
return Math.max(maxSlope, slopeDeg); |
|
}, -Infinity) : null; |
|
const maxTerrainSlope = terrainSlopeAlongTrack.maximum != null ? terrainSlopeAlongTrack.maximum : segmentMaxSlope != null && Number.isFinite(segmentMaxSlope) ? segmentMaxSlope : null; |
|
t._statsCache = { |
|
dist, |
|
gain, |
|
loss, |
|
avgSlope: weightedSlopeDist > 0 ? weightedSlopeSum / weightedSlopeDist : null, |
|
terrainSlopeAlongTrack: terrainSlopeAlongTrack.average, |
|
maxTerrainSlope, |
|
terrainSlopeResolvedCount: terrainSlopeAlongTrack.resolvedCount, |
|
terrainSlopeSampleCount: terrainSlopeAlongTrack.sampleCount |
|
}; |
|
return t._statsCache; |
|
} |
|
function buildTrackItemHTML(t) { |
|
const s = t.coords.length >= 2 ? trackStats(t) : null; |
|
const statsStr = s ? `${s.dist.toFixed(1)} km \xB7 \u2191${Math.round(s.gain)} m \xB7 \u2193${Math.round(s.loss)} m \xB7 ${t.coords.length} pts` : `${t.coords.length} pts`; |
|
const detailStatsStr = s && t.id === activeTrackId ? `Avg slope: ${s.avgSlope != null ? `${s.avgSlope.toFixed(1)}\xB0` : "n/a"} \xB7 Max slope: ${s.maxTerrainSlope != null ? `${s.maxTerrainSlope.toFixed(1)}\xB0` : "n/a"}` : ""; |
|
const editActive = isTrackEditing(t.id); |
|
return `<span class="track-color" style="background:${t.color}"></span><span class="track-name">${t.segmentLabel || t.name}` + (statsStr ? `<br><span class="track-stats">${statsStr}</span>` : "") + (detailStatsStr ? `<br><span class="track-stats">${detailStatsStr}</span>` : "") + `</span><button class="track-edit${editActive ? " active" : ""}" data-id="${t.id}" title="Edit track">✎</button><button class="track-del" data-id="${t.id}">×</button>`; |
|
} |
|
function renderTrackList() { |
|
trackListEl.innerHTML = ""; |
|
const grouped = /* @__PURE__ */ new Map(); |
|
const ungrouped = []; |
|
for (const t of tracks) { |
|
if (t.groupId) { |
|
if (!grouped.has(t.groupId)) grouped.set(t.groupId, []); |
|
grouped.get(t.groupId).push(t); |
|
} else { |
|
ungrouped.push(t); |
|
} |
|
} |
|
const rendered = /* @__PURE__ */ new Set(); |
|
for (const t of tracks) { |
|
if (rendered.has(t.id)) continue; |
|
if (t.groupId && grouped.has(t.groupId)) { |
|
const group = grouped.get(t.groupId); |
|
grouped.delete(t.groupId); |
|
const collapsed = collapsedGroups.has(t.groupId); |
|
const header = document.createElement("div"); |
|
header.className = "track-group-header"; |
|
const anyActive = group.some((g) => g.id === activeTrackId); |
|
if (anyActive) header.classList.add("active"); |
|
let totalDist = 0, totalGain = 0, totalLoss = 0, totalPts = 0; |
|
for (const g of group) { |
|
const gs = g.coords.length >= 2 ? trackStats(g) : null; |
|
if (gs) { |
|
totalDist += gs.dist; |
|
totalGain += gs.gain; |
|
totalLoss += gs.loss; |
|
} |
|
totalPts += g.coords.length; |
|
} |
|
const aggStats = totalPts >= 2 ? `${totalDist.toFixed(1)} km \xB7 \u2191${Math.round(totalGain)} m \xB7 \u2193${Math.round(totalLoss)} m \xB7 ${totalPts} pts` : `${totalPts} pts`; |
|
header.innerHTML = `<span class="track-group-toggle">${collapsed ? "\u25B8" : "\u25BE"}</span><span class="track-color" style="background:${group[0].color}"></span><span class="track-name">${t.groupName || "Group"}<br><span class="track-stats">${aggStats} \xB7 ${group.length} segs</span></span>`; |
|
header.addEventListener("click", () => { |
|
if (collapsed) collapsedGroups.delete(t.groupId); |
|
else collapsedGroups.add(t.groupId); |
|
renderTrackList(); |
|
}); |
|
trackListEl.appendChild(header); |
|
if (!collapsed) { |
|
for (const g of group) { |
|
rendered.add(g.id); |
|
const div = document.createElement("div"); |
|
div.className = "track-item track-item-nested" + (g.id === activeTrackId ? " active" : ""); |
|
div.innerHTML = buildTrackItemHTML(g); |
|
div.addEventListener("click", (e) => { |
|
if (e.target.classList.contains("track-del") || e.target.classList.contains("track-edit")) return; |
|
setActiveTrack(g.id); |
|
}); |
|
div.querySelector(".track-edit").addEventListener("click", () => { |
|
if (isTrackEditing(g.id)) exitEditMode(); |
|
else { |
|
setActiveTrack(g.id); |
|
enterEditMode(g.id); |
|
} |
|
}); |
|
div.querySelector(".track-del").addEventListener("click", () => deleteTrack(g.id)); |
|
trackListEl.appendChild(div); |
|
} |
|
} else { |
|
for (const g of group) rendered.add(g.id); |
|
} |
|
} else if (!t.groupId) { |
|
rendered.add(t.id); |
|
const div = document.createElement("div"); |
|
div.className = "track-item" + (t.id === activeTrackId ? " active" : ""); |
|
div.innerHTML = buildTrackItemHTML(t); |
|
div.addEventListener("click", (e) => { |
|
if (e.target.classList.contains("track-del") || e.target.classList.contains("track-edit")) return; |
|
setActiveTrack(t.id); |
|
}); |
|
div.querySelector(".track-edit").addEventListener("click", () => { |
|
if (isTrackEditing(t.id)) exitEditMode(); |
|
else { |
|
setActiveTrack(t.id); |
|
enterEditMode(t.id); |
|
} |
|
}); |
|
div.querySelector(".track-del").addEventListener("click", () => deleteTrack(t.id)); |
|
trackListEl.appendChild(div); |
|
} |
|
} |
|
if (!tracks.length) setTrackPanelVisible(false); |
|
else syncTrackPanelShell(); |
|
syncProfileToggleButton(); |
|
const es = getEditState(); |
|
es.syncUndoBtn(); |
|
} |
|
function setActiveTrack(id) { |
|
if (id !== activeTrackId) profileClosed = false; |
|
const es = getEditState(); |
|
if (es.editingTrackId && es.editingTrackId !== id) exitEditMode(); |
|
activeTrackId = id; |
|
renderTrackList(); |
|
updateVertexHighlight(es.editingTrackId, es.selectedVertexIndex); |
|
updateProfileFn2(); |
|
} |
|
function deleteTrack(id) { |
|
const t = tracks.find((tr) => tr.id === id); |
|
if (!t) return; |
|
if (!confirm(`Delete track "${t.name}"?`)) return; |
|
const idx = tracks.indexOf(t); |
|
const es = getEditState(); |
|
if (es.editingTrackId === id) exitEditMode(); |
|
removeTrackFromMap(t); |
|
tracks.splice(idx, 1); |
|
if (activeTrackId === id) activeTrackId = tracks.length ? tracks[tracks.length - 1].id : null; |
|
renderTrackList(); |
|
updateVertexHighlight(es.editingTrackId, es.selectedVertexIndex); |
|
scheduleSave(); |
|
} |
|
function createTrack(name, coords, opts) { |
|
const t = { |
|
id: "trk-" + Date.now() + "-" + Math.random().toString(36).slice(2, 6), |
|
name, |
|
color: nextColor(), |
|
coords, |
|
_statsCache: null, |
|
groupId: opts?.groupId || null, |
|
groupName: opts?.groupName || null, |
|
segmentLabel: opts?.segmentLabel || null |
|
}; |
|
enrichElevation(t.coords); |
|
tracks.push(t); |
|
if (mapReady) addTrackToMap(t); |
|
setTrackPanelVisible(true); |
|
setActiveTrack(t.id); |
|
scheduleSave(); |
|
return t; |
|
} |
|
function getActiveTrack() { |
|
return tracks.find((t) => t.id === activeTrackId) || null; |
|
} |
|
function fitToTrack(t) { |
|
if (t.coords.length < 1) return; |
|
const bounds = t.coords.reduce( |
|
(b, c) => b.extend([c[0], c[1]]), |
|
new maplibregl.LngLatBounds() |
|
); |
|
map2.fitBounds(bounds, { padding: 60, maxZoom: 15, duration: 1e3 }); |
|
} |
|
function onTrackCoordsChanged(t) { |
|
invalidateTrackStats(t); |
|
refreshTrackSource(t); |
|
renderTrackList(); |
|
updateProfileFn2(); |
|
scheduleSave(); |
|
} |
|
function invalidateAndRefresh(t) { |
|
invalidateTrackStats(t); |
|
refreshTrackSource(t); |
|
} |
|
function removeIncompleteNewTrack(t) { |
|
const idx = tracks.indexOf(t); |
|
if (idx >= 0) { |
|
removeTrackFromMap(t); |
|
tracks.splice(idx, 1); |
|
if (activeTrackId === t.id) activeTrackId = tracks.length ? tracks[tracks.length - 1].id : null; |
|
scheduleSave(); |
|
} |
|
} |
|
function createNewTrack() { |
|
return createTrack("Track " + (tracks.length + 1), []); |
|
} |
|
function getTracksState() { |
|
const es = getEditState(); |
|
return { |
|
tracks, |
|
waypoints, |
|
get activeTrackId() { |
|
return activeTrackId; |
|
}, |
|
get editingTrackId() { |
|
return es.editingTrackId; |
|
}, |
|
get selectedVertexIndex() { |
|
return es.selectedVertexIndex; |
|
}, |
|
get insertAfterIdx() { |
|
return es.insertAfterIdx; |
|
}, |
|
get mobileFriendlyMode() { |
|
return es.mobileFriendlyMode; |
|
}, |
|
get mapReady() { |
|
return mapReady; |
|
}, |
|
get profileClosed() { |
|
return profileClosed; |
|
}, |
|
set profileClosed(v) { |
|
profileClosed = v; |
|
}, |
|
getActiveTrack, |
|
ensureProfileHoverLayer, |
|
PROFILE_HOVER_SOURCE_ID, |
|
syncProfileToggleButton, |
|
syncBottomRightOffset() { |
|
document.body.classList.toggle("profile-open", document.getElementById("profile-panel").classList.contains("visible")); |
|
} |
|
}; |
|
} |
|
function initTracks(mapRef, stateRef, updateProfile2) { |
|
map2 = mapRef; |
|
state2 = stateRef; |
|
updateProfileFn2 = updateProfile2; |
|
tracksBtn = document.getElementById("tracks-btn"); |
|
trackPanelShell = document.getElementById("track-panel-shell"); |
|
trackToolRow = document.getElementById("track-tool-row"); |
|
trackPanel = document.getElementById("track-panel"); |
|
trackPanelHeader = trackPanel.querySelector(".track-panel-header"); |
|
trackListEl = document.getElementById("track-list"); |
|
profileToggleBtn = document.getElementById("profile-toggle-btn"); |
|
syncTrackPanelShell(); |
|
const saved = loadTracks(); |
|
for (const st of saved) { |
|
if (!st.coords || !st.coords.length) continue; |
|
const t = { |
|
id: "trk-" + Date.now() + "-" + Math.random().toString(36).slice(2, 6), |
|
name: st.name || "Track", |
|
color: st.color || nextColor(), |
|
coords: st.coords, |
|
_statsCache: null, |
|
groupId: st.groupId || null, |
|
groupName: st.groupName || null, |
|
segmentLabel: st.segmentLabel || null |
|
}; |
|
tracks.push(t); |
|
} |
|
if (tracks.length) { |
|
activeTrackId = tracks[tracks.length - 1].id; |
|
setTrackPanelVisible(true); |
|
renderTrackList(); |
|
} |
|
initTrackEdit(mapRef, stateRef, updateProfile2, { |
|
findTrack: (id) => tracks.find((tr) => tr.id === id), |
|
getActiveTrack, |
|
createNewTrack, |
|
deleteTrack, |
|
removeIncompleteNewTrack, |
|
onTrackCoordsChanged, |
|
invalidateAndRefresh, |
|
refreshTrackSource, |
|
renderTrackList, |
|
updateVertexHighlight, |
|
trackPtsLayerId, |
|
elevationAt: elevationAt2 |
|
}); |
|
map2.on("data", (e) => { |
|
if (e.sourceId === DEM_SOURCE_ID && e.dataType === "source" && tracks.length) { |
|
invalidateAllTrackStats(); |
|
setTimeout(() => { |
|
enrichAllTracks(); |
|
renderTrackList(); |
|
}, 200); |
|
} |
|
}); |
|
tracksBtn.addEventListener("click", () => { |
|
setTrackPanelVisible(!trackPanel.classList.contains("visible")); |
|
}); |
|
initIO({ |
|
createTrack, |
|
getActiveTrack, |
|
getTracks: () => tracks, |
|
getWaypoints: () => waypoints, |
|
addWaypoints, |
|
fitToTrack |
|
}); |
|
map2.on("load", () => { |
|
mapReady = true; |
|
ensureProfileHoverLayer(); |
|
ensureWaypointLayer(); |
|
for (const t of tracks) { |
|
if (!map2.getSource(trackSourceId(t))) addTrackToMap(t); |
|
} |
|
}); |
|
} |
|
var map2, state2, updateProfileFn2, tracks, waypoints, activeTrackId, trackColorIdx, mapReady, profileClosed, _saveTimer, tracksBtn, trackPanelShell, trackToolRow, trackPanel, trackPanelHeader, trackListEl, profileToggleBtn, PROFILE_HOVER_SOURCE_ID, PROFILE_HOVER_LAYER_ID, HOVER_INSERT_SOURCE_ID2, HOVER_INSERT_LAYER_ID, WAYPOINT_SOURCE_ID, WAYPOINT_CIRCLE_LAYER_ID, WAYPOINT_LABEL_LAYER_ID, collapsedGroups; |
|
var init_tracks = __esm({ |
|
"tracks.js"() { |
|
init_utils(); |
|
init_constants(); |
|
init_dem(); |
|
init_track_edit(); |
|
init_io(); |
|
init_persist(); |
|
updateProfileFn2 = () => { |
|
}; |
|
tracks = []; |
|
waypoints = []; |
|
activeTrackId = null; |
|
trackColorIdx = 0; |
|
mapReady = false; |
|
profileClosed = false; |
|
_saveTimer = 0; |
|
PROFILE_HOVER_SOURCE_ID = "profile-hover-point"; |
|
PROFILE_HOVER_LAYER_ID = "profile-hover-point-layer"; |
|
HOVER_INSERT_SOURCE_ID2 = "hover-insert-point"; |
|
HOVER_INSERT_LAYER_ID = "hover-insert-point-layer"; |
|
WAYPOINT_SOURCE_ID = "waypoints"; |
|
WAYPOINT_CIRCLE_LAYER_ID = "waypoint-circles"; |
|
WAYPOINT_LABEL_LAYER_ID = "waypoint-labels"; |
|
collapsedGroups = /* @__PURE__ */ new Set(); |
|
} |
|
}); |
|
|
|
// profile.js |
|
function clearProfileHoverVertex() { |
|
hoveredProfileTrackId = null; |
|
hoveredProfileVertexIndex = null; |
|
const src = map3.getSource(tracksState.PROFILE_HOVER_SOURCE_ID); |
|
if (src) src.setData({ type: "FeatureCollection", features: [] }); |
|
} |
|
function ensureVertexInView(lngLat) { |
|
const canvas = map3.getCanvas(); |
|
const trackPanel2 = document.getElementById("track-panel"); |
|
const padding = { |
|
top: 50, |
|
right: trackPanel2.classList.contains("visible") ? 220 : 60, |
|
bottom: profilePanel.classList.contains("visible") ? 170 : 60, |
|
left: 60 |
|
}; |
|
const point = map3.project([lngLat.lng, lngLat.lat]); |
|
const withinX = point.x >= padding.left && point.x <= canvas.clientWidth - padding.right; |
|
const withinY = point.y >= padding.top && point.y <= canvas.clientHeight - padding.bottom; |
|
if (withinX && withinY) return; |
|
map3.easeTo({ |
|
center: [lngLat.lng, lngLat.lat], |
|
duration: 1e3, |
|
essential: true, |
|
padding |
|
}); |
|
} |
|
function setProfileHoverVertex(index) { |
|
const t = tracksState.getActiveTrack(); |
|
if (!t || index == null || index < 0 || index >= t.coords.length) { |
|
clearProfileHoverVertex(); |
|
hideCursorTooltip(); |
|
return; |
|
} |
|
if (hoveredProfileTrackId === t.id && hoveredProfileVertexIndex === index) return; |
|
hoveredProfileTrackId = t.id; |
|
hoveredProfileVertexIndex = index; |
|
const coord = t.coords[index]; |
|
const src = map3.getSource(tracksState.PROFILE_HOVER_SOURCE_ID); |
|
if (src) { |
|
src.setData({ |
|
type: "FeatureCollection", |
|
features: [{ |
|
type: "Feature", |
|
geometry: { type: "Point", coordinates: [coord[0], coord[1]] }, |
|
properties: { color: t.color } |
|
}] |
|
}); |
|
} |
|
ensureVertexInView({ lng: coord[0], lat: coord[1] }); |
|
if (state3.cursorInfoMode === "cursor") { |
|
const result = queryLoadedElevationAtLngLat(map3, { lng: coord[0], lat: coord[1] }); |
|
if (result) { |
|
const pt = map3.project([coord[0], coord[1]]); |
|
const rect = map3.getCanvas().getBoundingClientRect(); |
|
showCursorTooltipAt(state3, rect.left + pt.x, rect.top + pt.y, `${result.elevation.toFixed(0)} m`, result.slopeDeg != null ? `${result.slopeDeg.toFixed(0)}\xB0` : "n/a"); |
|
} |
|
} |
|
} |
|
function destroyProfileChart() { |
|
clearProfileHoverVertex(); |
|
if (profileChart) { |
|
profileChart.destroy(); |
|
profileChart = null; |
|
} |
|
} |
|
function syncBottomRightOffset() { |
|
document.body.classList.toggle("profile-open", profilePanel.classList.contains("visible")); |
|
} |
|
function closeProfile(markClosed) { |
|
profilePanel.classList.remove("visible"); |
|
if (markClosed) tracksState.profileClosed = true; |
|
destroyProfileChart(); |
|
syncBottomRightOffset(); |
|
tracksState.syncProfileToggleButton(); |
|
} |
|
function computeProfile(coords) { |
|
const distances = [0]; |
|
const elevations = []; |
|
const slopes = []; |
|
const terrainSlopes = []; |
|
for (let i = 0; i < coords.length; i++) { |
|
if (i > 0) distances.push(distances[i - 1] + haversineKm(coords[i - 1], coords[i])); |
|
elevations.push(coords[i][2] != null ? coords[i][2] : null); |
|
const terrainSample = queryLoadedElevationAtLngLat(map3, { lng: coords[i][0], lat: coords[i][1] }); |
|
terrainSlopes.push(terrainSample && Number.isFinite(terrainSample.slopeDeg) ? terrainSample.slopeDeg : null); |
|
if (i > 0) { |
|
const dh = coords[i][2] != null && coords[i - 1][2] != null ? coords[i][2] - coords[i - 1][2] : null; |
|
const dd = (distances[i] - distances[i - 1]) * 1e3; |
|
slopes.push(dh != null && dd > 0 ? Math.sign(dh) * Math.atan2(Math.abs(dh), dd) * 180 / Math.PI : null); |
|
} else { |
|
slopes.push(null); |
|
} |
|
} |
|
return { distances, elevations, slopes, terrainSlopes }; |
|
} |
|
function updateProfile() { |
|
const t = tracksState.getActiveTrack(); |
|
if (!t || t.coords.length < 2 || tracksState.profileClosed) { |
|
if (!t || t.coords.length < 2) { |
|
closeProfile(false); |
|
} |
|
tracksState.syncProfileToggleButton(); |
|
return; |
|
} |
|
const { distances, elevations, slopes, terrainSlopes } = computeProfile(t.coords); |
|
const labels = distances.map((d) => d.toFixed(2)); |
|
destroyProfileChart(); |
|
profilePanel.classList.add("visible"); |
|
syncBottomRightOffset(); |
|
tracksState.syncProfileToggleButton(); |
|
profileChart = new Chart(profileCanvas, { |
|
type: "line", |
|
data: { |
|
labels, |
|
datasets: [ |
|
{ |
|
label: "Elevation (m)", |
|
data: elevations, |
|
borderColor: "#4a90d9", |
|
backgroundColor: "rgba(74,144,217,0.12)", |
|
fill: true, |
|
pointRadius: 0, |
|
borderWidth: 1.5, |
|
tension: 0.3, |
|
yAxisID: "yEle", |
|
spanGaps: true |
|
}, |
|
{ |
|
label: "Track slope (\xB0)", |
|
data: slopes, |
|
borderColor: "#e53935", |
|
pointRadius: 0, |
|
borderWidth: 1, |
|
tension: 0.3, |
|
yAxisID: "ySlope", |
|
spanGaps: true |
|
}, |
|
{ |
|
label: "Terrain slope (\xB0)", |
|
data: terrainSlopes, |
|
borderColor: "#7c3aed", |
|
pointRadius: 0, |
|
borderWidth: 1, |
|
borderDash: [5, 3], |
|
tension: 0.3, |
|
yAxisID: "ySlope", |
|
spanGaps: true |
|
} |
|
] |
|
}, |
|
options: { |
|
responsive: true, |
|
maintainAspectRatio: false, |
|
animation: false, |
|
onHover: (_event, activeElements) => { |
|
if (activeElements && activeElements.length) setProfileHoverVertex(activeElements[0].index); |
|
else clearProfileHoverVertex(); |
|
}, |
|
interaction: { mode: "index", intersect: false }, |
|
plugins: { |
|
legend: { display: true, position: "top", labels: { boxWidth: 12, font: { size: 10 } } }, |
|
annotation: { |
|
annotations: { |
|
zeroLine: { |
|
type: "line", |
|
yMin: 0, |
|
yMax: 0, |
|
yScaleID: "ySlope", |
|
borderColor: "rgba(0,0,0,0.25)", |
|
borderWidth: 1, |
|
borderDash: [4, 3] |
|
} |
|
} |
|
}, |
|
tooltip: { |
|
callbacks: { |
|
title: (items) => items[0] ? `${items[0].label} km` : "" |
|
} |
|
} |
|
}, |
|
scales: { |
|
x: { |
|
display: true, |
|
title: { display: true, text: "km", font: { size: 10 } }, |
|
ticks: { font: { size: 9 }, maxTicksLimit: 10 } |
|
}, |
|
yEle: { |
|
type: "linear", |
|
position: "left", |
|
title: { display: true, text: "m", font: { size: 10 } }, |
|
ticks: { font: { size: 9 } }, |
|
grid: { drawOnChartArea: true } |
|
}, |
|
ySlope: { |
|
type: "linear", |
|
position: "right", |
|
title: { display: true, text: "\xB0", font: { size: 10 } }, |
|
ticks: { font: { size: 9 } }, |
|
grid: { drawOnChartArea: false } |
|
} |
|
} |
|
} |
|
}); |
|
} |
|
function getProfileChart() { |
|
return profileChart; |
|
} |
|
function initProfile(mapRef, stateRef, tracksStateRef) { |
|
map3 = mapRef; |
|
state3 = stateRef; |
|
tracksState = tracksStateRef; |
|
document.getElementById("profile-close").addEventListener("click", () => { |
|
closeProfile(true); |
|
}); |
|
const profileToggleBtn2 = document.getElementById("profile-toggle-btn"); |
|
profileToggleBtn2.addEventListener("click", () => { |
|
const t = tracksState.getActiveTrack(); |
|
if (!t || t.coords.length < 2) return; |
|
if (profilePanel.classList.contains("visible") && !tracksState.profileClosed) { |
|
closeProfile(true); |
|
return; |
|
} |
|
tracksState.profileClosed = false; |
|
updateProfile(); |
|
}); |
|
profileCanvas.addEventListener("mouseleave", () => { |
|
clearProfileHoverVertex(); |
|
hideCursorTooltip(); |
|
}); |
|
} |
|
var map3, state3, tracksState, profilePanel, profileCanvas, profileChart, hoveredProfileTrackId, hoveredProfileVertexIndex; |
|
var init_profile = __esm({ |
|
"profile.js"() { |
|
init_utils(); |
|
init_dem(); |
|
init_ui(); |
|
profilePanel = document.getElementById("profile-panel"); |
|
profileCanvas = document.getElementById("profile-canvas"); |
|
profileChart = null; |
|
hoveredProfileTrackId = null; |
|
hoveredProfileVertexIndex = null; |
|
} |
|
}); |
|
|
|
// main.js |
|
var require_main = __commonJS({ |
|
"main.js"() { |
|
init_constants(); |
|
init_state(); |
|
init_ui(); |
|
init_dem(); |
|
init_tracks(); |
|
init_profile(); |
|
init_io(); |
|
init_persist(); |
|
init_utils(); |
|
var state4 = createStore(STATE_DEFAULTS); |
|
function buildDebugGridGeoJSON(map5) { |
|
const visible = getVisibleTriplesForMap(map5); |
|
const features = []; |
|
const dedupe = /* @__PURE__ */ new Set(); |
|
for (const t of visible) { |
|
const id = `${t.z}/${t.x}/${t.y}`; |
|
if (dedupe.has(id)) continue; |
|
dedupe.add(id); |
|
const b = tileToLngLatBounds(t.x, t.y, t.z); |
|
features.push({ |
|
type: "Feature", |
|
properties: { id, z: t.z, x: t.x, y: t.y }, |
|
geometry: { |
|
type: "Polygon", |
|
coordinates: [[ |
|
[b.west, b.north], |
|
[b.east, b.north], |
|
[b.east, b.south], |
|
[b.west, b.south], |
|
[b.west, b.north] |
|
]] |
|
} |
|
}); |
|
} |
|
return { type: "FeatureCollection", features }; |
|
} |
|
function updateDebugGridSource(map5) { |
|
const src = map5.getSource("dem-debug-grid"); |
|
if (!src) return; |
|
src.setData(buildDebugGridGeoJSON(map5)); |
|
} |
|
function ensureDebugGridLayer(map5) { |
|
if (!map5.getSource("dem-debug-grid")) { |
|
map5.addSource("dem-debug-grid", { |
|
type: "geojson", |
|
data: { type: "FeatureCollection", features: [] } |
|
}); |
|
} |
|
if (!map5.getLayer("dem-debug-grid-line")) { |
|
map5.addLayer({ |
|
id: "dem-debug-grid-line", |
|
type: "line", |
|
source: "dem-debug-grid", |
|
layout: { |
|
visibility: state4.showTileGrid ? "visible" : "none" |
|
}, |
|
paint: { |
|
"line-color": "#111111", |
|
"line-width": 1, |
|
"line-opacity": 0.8 |
|
} |
|
}); |
|
} |
|
} |
|
var persisted = loadSettings(); |
|
if (persisted) { |
|
for (const k of Object.keys(persisted)) { |
|
if (persisted[k] !== void 0) state4[k] = persisted[k]; |
|
} |
|
} |
|
var initialView = parseHashParams(); |
|
if (initialView.basemap) { |
|
state4.basemap = initialView.basemap; |
|
} |
|
state4.mode = initialView.mode; |
|
state4.slopeOpacity = initialView.slopeOpacity; |
|
state4.terrain3d = initialView.terrain3d; |
|
state4.terrainExaggeration = initialView.terrainExaggeration; |
|
document.getElementById("basemap").value = state4.basemap; |
|
document.getElementById("mode").value = state4.mode; |
|
document.getElementById("slopeOpacity").value = String(state4.slopeOpacity); |
|
document.getElementById("slopeOpacityValue").textContent = state4.slopeOpacity.toFixed(2); |
|
document.getElementById("terrain3d").checked = state4.terrain3d; |
|
document.getElementById("terrainExaggeration").value = String(state4.terrainExaggeration); |
|
document.getElementById("terrainExaggeration").disabled = !state4.terrain3d; |
|
document.getElementById("terrainExaggerationValue").textContent = state4.terrainExaggeration.toFixed(2); |
|
if (persisted) { |
|
if (persisted.basemapOpacity != null) { |
|
document.getElementById("basemapOpacity").value = String(state4.basemapOpacity); |
|
document.getElementById("basemapOpacityValue").textContent = state4.basemapOpacity.toFixed(2); |
|
} |
|
if (persisted.hillshadeOpacity != null) { |
|
document.getElementById("hillshadeOpacity").value = String(state4.hillshadeOpacity); |
|
document.getElementById("hillshadeOpacityValue").textContent = state4.hillshadeOpacity.toFixed(2); |
|
} |
|
if (persisted.hillshadeMethod != null) { |
|
document.getElementById("hillshadeMethod").value = state4.hillshadeMethod; |
|
} |
|
if (persisted.showContours != null) document.getElementById("showContours").checked = state4.showContours; |
|
if (persisted.showOpenSkiMap != null) document.getElementById("showOpenSkiMap").checked = state4.showOpenSkiMap; |
|
if (persisted.multiplyBlend != null) document.getElementById("multiplyBlend").checked = state4.multiplyBlend; |
|
if (persisted.cursorInfoMode != null) document.getElementById("cursorInfoMode").value = state4.cursorInfoMode; |
|
} |
|
var _settingsSaveTimer = 0; |
|
function scheduleSettingsSave() { |
|
clearTimeout(_settingsSaveTimer); |
|
_settingsSaveTimer = setTimeout(() => saveSettings(state4), 300); |
|
} |
|
var demContourSource = new mlcontour.DemSource({ |
|
url: "https://tiles.mapterhorn.com/{z}/{x}/{y}.webp", |
|
encoding: "terrarium", |
|
maxzoom: 12, |
|
worker: true |
|
}); |
|
demContourSource.setupMaplibre(maplibregl); |
|
var map4 = new maplibregl.Map({ |
|
container: "map", |
|
center: initialView.center, |
|
zoom: initialView.zoom, |
|
bearing: initialView.bearing, |
|
pitch: initialView.pitch, |
|
maxTileCacheZoomLevels: 20, |
|
attributionControl: false, |
|
style: { |
|
version: 8, |
|
glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf", |
|
sources: { |
|
contourSource: { |
|
type: "vector", |
|
tiles: [ |
|
demContourSource.contourProtocolUrl({ |
|
multiplier: 1, |
|
overzoom: 1, |
|
thresholds: { |
|
10: [200, 1e3], |
|
11: [100, 500], |
|
12: [100, 500], |
|
13: [50, 200], |
|
14: [20, 100], |
|
16: [10, 50] |
|
}, |
|
elevationKey: "ele", |
|
levelKey: "level", |
|
contourLayer: "contours" |
|
}) |
|
], |
|
maxzoom: 16 |
|
}, |
|
osm: { |
|
type: "raster", |
|
tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"], |
|
tileSize: 256, |
|
attribution: "© OpenStreetMap contributors" |
|
}, |
|
otm: { |
|
type: "raster", |
|
tiles: [ |
|
"https://a.tile.opentopomap.org/{z}/{x}/{y}.png", |
|
"https://b.tile.opentopomap.org/{z}/{x}/{y}.png", |
|
"https://c.tile.opentopomap.org/{z}/{x}/{y}.png" |
|
], |
|
tileSize: 256, |
|
attribution: "© OpenStreetMap contributors, OpenTopoMap" |
|
}, |
|
ignplan: { |
|
type: "raster", |
|
tiles: ["https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&STYLE=normal&TILEMATRIXSET=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image/png"], |
|
tileSize: 256, |
|
attribution: "© IGN France" |
|
}, |
|
swisstopo: { |
|
type: "vector", |
|
tiles: ["https://vectortiles.geo.admin.ch/tiles/ch.swisstopo.base.vt/v1.0.0/{z}/{x}/{y}.pbf"], |
|
attribution: "© swisstopo" |
|
}, |
|
openskimap: { |
|
type: "vector", |
|
tiles: ["https://tiles.openskimap.org/openskimap/{z}/{x}/{y}.pbf"], |
|
attribution: "© OpenSkiMap, OpenStreetMap contributors" |
|
}, |
|
kartverket: { |
|
type: "raster", |
|
tiles: ["https://cache.kartverket.no/v1/wmts/1.0.0/topo/default/webmercator/{z}/{y}/{x}.png"], |
|
tileSize: 256, |
|
attribution: "© Kartverket" |
|
}, |
|
dem: { |
|
type: "raster-dem", |
|
tiles: ["https://tiles.mapterhorn.com/{z}/{x}/{y}.webp"], |
|
tileSize: 512, |
|
maxzoom: DEM_MAX_Z, |
|
encoding: "terrarium" |
|
} |
|
}, |
|
layers: [ |
|
{ |
|
id: "basemap-osm", |
|
type: "raster", |
|
source: "osm", |
|
paint: { "raster-opacity": basemapOpacityExpr(1) } |
|
}, |
|
{ |
|
id: "basemap-otm", |
|
type: "raster", |
|
source: "otm", |
|
layout: { visibility: "none" }, |
|
paint: { "raster-opacity": basemapOpacityExpr(1) } |
|
}, |
|
{ |
|
id: "basemap-ign", |
|
type: "raster", |
|
source: "ignplan", |
|
layout: { visibility: "none" }, |
|
paint: { "raster-opacity": basemapOpacityExpr(1) } |
|
}, |
|
{ |
|
id: "basemap-kartverket", |
|
type: "raster", |
|
source: "kartverket", |
|
layout: { visibility: "none" }, |
|
paint: { "raster-opacity": basemapOpacityExpr(1) } |
|
}, |
|
{ |
|
id: "basemap-swiss-landcover", |
|
type: "fill", |
|
source: "swisstopo", |
|
"source-layer": "landcover", |
|
layout: { visibility: "none" }, |
|
paint: { "fill-color": "#dce7cf", "fill-opacity": basemapOpacityExpr(0.85) } |
|
}, |
|
{ |
|
id: "basemap-swiss-water", |
|
type: "fill", |
|
source: "swisstopo", |
|
"source-layer": "water", |
|
layout: { visibility: "none" }, |
|
paint: { "fill-color": "#b7d7ff", "fill-opacity": basemapOpacityExpr(0.95) } |
|
}, |
|
{ |
|
id: "basemap-swiss-transport", |
|
type: "line", |
|
source: "swisstopo", |
|
"source-layer": "transportation", |
|
layout: { visibility: "none" }, |
|
paint: { |
|
"line-color": "#7a7a7a", |
|
"line-width": ["interpolate", ["linear"], ["zoom"], 5, 0.2, 14, 1.8], |
|
"line-opacity": basemapOpacityExpr(0.9) |
|
} |
|
}, |
|
{ |
|
id: "basemap-swiss-boundary", |
|
type: "line", |
|
source: "swisstopo", |
|
"source-layer": "boundary", |
|
layout: { visibility: "none" }, |
|
paint: { |
|
"line-color": "#7f4b63", |
|
"line-width": ["interpolate", ["linear"], ["zoom"], 5, 0.25, 14, 1.25], |
|
"line-opacity": basemapOpacityExpr(0.75) |
|
} |
|
}, |
|
{ |
|
id: "basemap-swiss-label", |
|
type: "symbol", |
|
source: "swisstopo", |
|
"source-layer": "place", |
|
layout: { |
|
visibility: "none", |
|
"text-field": ["coalesce", ["get", "name"], ["get", "name_de"], ["get", "name_fr"], ["get", "name_it"], ""], |
|
"text-size": ["interpolate", ["linear"], ["zoom"], 6, 10, 14, 13] |
|
}, |
|
paint: { |
|
"text-color": "#2e2e2e", |
|
"text-opacity": basemapOpacityExpr(0.9), |
|
"text-halo-color": "#ffffff", |
|
"text-halo-width": 1 |
|
} |
|
}, |
|
{ |
|
id: "basemap-ski-areas", |
|
type: "fill", |
|
source: "openskimap", |
|
"source-layer": "skiareas", |
|
layout: { visibility: "none" }, |
|
paint: { "fill-color": "#dff1ff", "fill-opacity": basemapOpacityExpr(0.35) } |
|
}, |
|
{ |
|
id: "basemap-ski-runs", |
|
type: "line", |
|
source: "openskimap", |
|
"source-layer": "runs", |
|
layout: { visibility: "none" }, |
|
paint: { |
|
"line-color": "#0d7cff", |
|
"line-width": ["interpolate", ["linear"], ["zoom"], 8, 0.9, 14, 2.6], |
|
"line-opacity": basemapOpacityExpr(0.95) |
|
} |
|
}, |
|
{ |
|
id: "basemap-ski-lifts", |
|
type: "line", |
|
source: "openskimap", |
|
"source-layer": "lifts", |
|
layout: { visibility: "none" }, |
|
paint: { |
|
"line-color": "#121212", |
|
"line-width": ["interpolate", ["linear"], ["zoom"], 8, 0.8, 14, 2], |
|
"line-opacity": basemapOpacityExpr(0.9) |
|
} |
|
}, |
|
{ |
|
id: "basemap-ski-spots", |
|
type: "symbol", |
|
source: "openskimap", |
|
"source-layer": "spots", |
|
layout: { |
|
visibility: "none", |
|
"text-field": ["coalesce", ["get", "name"], ""], |
|
"text-size": ["interpolate", ["linear"], ["zoom"], 8, 10, 14, 12] |
|
}, |
|
paint: { |
|
"text-color": "#10243f", |
|
"text-opacity": basemapOpacityExpr(0.9), |
|
"text-halo-color": "#ffffff", |
|
"text-halo-width": 1 |
|
} |
|
}, |
|
{ |
|
id: "dem-loader", |
|
type: "hillshade", |
|
source: DEM_SOURCE_ID, |
|
paint: { |
|
"hillshade-method": state4.hillshadeMethod, |
|
"hillshade-exaggeration": ["coalesce", ["global-state", "hillshadeOpacity"], 0.35], |
|
"hillshade-shadow-color": "#000000", |
|
"hillshade-highlight-color": "#ffffff", |
|
"hillshade-accent-color": "#000000" |
|
} |
|
} |
|
] |
|
}, |
|
canvasContextAttributes: { antialias: true } |
|
}); |
|
var navigationControl = new maplibregl.NavigationControl({ |
|
visualizePitch: true, |
|
visualizeRoll: true, |
|
showZoom: true, |
|
showCompass: true |
|
}); |
|
var geolocateControl = new maplibregl.GeolocateControl({ |
|
positionOptions: { enableHighAccuracy: true }, |
|
trackUserLocation: false, |
|
showUserLocation: true, |
|
showAccuracyCircle: false |
|
}); |
|
var scaleControl = new maplibregl.ScaleControl({ unit: "metric", maxWidth: 120 }); |
|
map4.addControl(scaleControl, "bottom-right"); |
|
map4.addControl(new maplibregl.AttributionControl(), "bottom-right"); |
|
map4.addControl(navigationControl, "bottom-right"); |
|
map4.addControl(geolocateControl, "bottom-right"); |
|
var controlsPanel = document.getElementById("controls"); |
|
var controlsToggleBtn = document.getElementById("controls-toggle"); |
|
function syncControlsToggleLabel() { |
|
controlsToggleBtn.textContent = controlsPanel.classList.contains("collapsed") ? "\u{1F30D} Settings \u25B8" : "\u{1F30D} Settings \u25BE"; |
|
} |
|
function setControlsCollapsed(collapsed) { |
|
controlsPanel.classList.toggle("collapsed", collapsed); |
|
syncControlsToggleLabel(); |
|
} |
|
controlsToggleBtn.addEventListener("click", () => { |
|
setControlsCollapsed(!controlsPanel.classList.contains("collapsed")); |
|
}); |
|
syncControlsToggleLabel(); |
|
var advancedToggle = document.getElementById("advanced-toggle"); |
|
var advancedSection = document.getElementById("advanced-section"); |
|
advancedToggle.addEventListener("click", () => { |
|
const open = advancedSection.classList.toggle("open"); |
|
advancedToggle.querySelector(".arrow").classList.toggle("open", open); |
|
}); |
|
map4.on("dragstart", () => { |
|
setControlsCollapsed(true); |
|
}); |
|
initSearch(map4); |
|
initTracks(map4, state4, updateProfile); |
|
var tracksState2 = getTracksState(); |
|
initProfile(map4, state4, tracksState2); |
|
document.getElementById("mode").addEventListener("change", (e) => { |
|
state4.mode = e.target.value; |
|
updateLegend(state4, map4); |
|
applyModeState(map4, state4); |
|
syncViewToUrl(map4, state4); |
|
map4.triggerRepaint(); |
|
scheduleSettingsSave(); |
|
}); |
|
document.getElementById("basemap").addEventListener("change", (e) => { |
|
state4.basemap = e.target.value; |
|
applyBasemapSelection(map4, state4, true); |
|
syncViewToUrl(map4, state4); |
|
map4.triggerRepaint(); |
|
scheduleSettingsSave(); |
|
}); |
|
document.getElementById("basemapOpacity").addEventListener("input", (e) => { |
|
state4.basemapOpacity = Number(e.target.value); |
|
document.getElementById("basemapOpacityValue").textContent = state4.basemapOpacity.toFixed(2); |
|
setGlobalStatePropertySafe(map4, "basemapOpacity", state4.basemapOpacity); |
|
map4.triggerRepaint(); |
|
scheduleSettingsSave(); |
|
}); |
|
document.getElementById("hillshadeOpacity").addEventListener("input", (e) => { |
|
state4.hillshadeOpacity = Number(e.target.value); |
|
document.getElementById("hillshadeOpacityValue").textContent = state4.hillshadeOpacity.toFixed(2); |
|
setGlobalStatePropertySafe(map4, "hillshadeOpacity", state4.hillshadeOpacity); |
|
map4.triggerRepaint(); |
|
scheduleSettingsSave(); |
|
}); |
|
document.getElementById("hillshadeMethod").addEventListener("change", (e) => { |
|
state4.hillshadeMethod = e.target.value; |
|
if (map4.getLayer("dem-loader")) { |
|
map4.setPaintProperty("dem-loader", "hillshade-method", state4.hillshadeMethod); |
|
} |
|
map4.triggerRepaint(); |
|
scheduleSettingsSave(); |
|
}); |
|
document.getElementById("slopeOpacity").addEventListener("input", (e) => { |
|
state4.slopeOpacity = Number(e.target.value); |
|
document.getElementById("slopeOpacityValue").textContent = state4.slopeOpacity.toFixed(2); |
|
applyModeState(map4, state4); |
|
syncViewToUrl(map4, state4); |
|
map4.triggerRepaint(); |
|
scheduleSettingsSave(); |
|
}); |
|
document.getElementById("showContours").addEventListener("change", (e) => { |
|
state4.showContours = Boolean(e.target.checked); |
|
applyContourVisibility(map4, state4); |
|
scheduleSettingsSave(); |
|
}); |
|
document.getElementById("showOpenSkiMap").addEventListener("change", (e) => { |
|
state4.showOpenSkiMap = Boolean(e.target.checked); |
|
applyOpenSkiMapOverlay(map4, state4); |
|
scheduleSettingsSave(); |
|
}); |
|
document.getElementById("showTileGrid").addEventListener("change", (e) => { |
|
state4.showTileGrid = Boolean(e.target.checked); |
|
if (map4.getLayer("dem-debug-grid-line")) { |
|
map4.setLayoutProperty("dem-debug-grid-line", "visibility", state4.showTileGrid ? "visible" : "none"); |
|
} |
|
if (state4.showTileGrid) { |
|
updateDebugGridSource(map4); |
|
} |
|
map4.triggerRepaint(); |
|
}); |
|
document.getElementById("multiplyBlend").addEventListener("change", (e) => { |
|
state4.multiplyBlend = Boolean(e.target.checked); |
|
map4.triggerRepaint(); |
|
scheduleSettingsSave(); |
|
}); |
|
document.getElementById("cursorInfoMode").addEventListener("change", (e) => { |
|
state4.cursorInfoMode = e.target.value; |
|
updateCursorInfoVisibility(state4); |
|
scheduleSettingsSave(); |
|
}); |
|
document.getElementById("terrain3d").addEventListener("change", (e) => { |
|
state4.terrain3d = Boolean(e.target.checked); |
|
document.getElementById("terrainExaggeration").disabled = !state4.terrain3d; |
|
applyTerrainState(map4, state4); |
|
syncViewToUrl(map4, state4); |
|
map4.triggerRepaint(); |
|
scheduleSettingsSave(); |
|
}); |
|
document.getElementById("terrainExaggeration").addEventListener("input", (e) => { |
|
state4.terrainExaggeration = Number(e.target.value); |
|
document.getElementById("terrainExaggerationValue").textContent = state4.terrainExaggeration.toFixed(2); |
|
if (state4.terrain3d) { |
|
applyTerrainState(map4, state4); |
|
} |
|
syncViewToUrl(map4, state4); |
|
map4.triggerRepaint(); |
|
scheduleSettingsSave(); |
|
}); |
|
document.getElementById("clear-data-btn").addEventListener("click", () => { |
|
if (confirm("Clear all saved tracks and settings?")) { |
|
clearAll(); |
|
location.reload(); |
|
} |
|
}); |
|
map4.getCanvas().addEventListener("mousedown", (e) => { |
|
if (e.metaKey && !e.ctrlKey && e.button === 0) { |
|
const synth = new MouseEvent("mousedown", { |
|
bubbles: true, |
|
cancelable: true, |
|
clientX: e.clientX, |
|
clientY: e.clientY, |
|
button: e.button, |
|
buttons: e.buttons, |
|
ctrlKey: true, |
|
shiftKey: e.shiftKey, |
|
altKey: e.altKey, |
|
metaKey: false |
|
}); |
|
e.target.dispatchEvent(synth); |
|
e.preventDefault(); |
|
e.stopPropagation(); |
|
} |
|
}, { capture: true }); |
|
updateLegend(state4, map4); |
|
updateStatus(state4); |
|
updateCursorInfoVisibility(state4); |
|
map4.on("load", () => { |
|
ensureDebugGridLayer(map4); |
|
setGlobalStatePropertySafe(map4, "basemapOpacity", state4.basemapOpacity); |
|
setGlobalStatePropertySafe(map4, "hillshadeOpacity", state4.hillshadeOpacity); |
|
applyBasemapSelection(map4, state4); |
|
applyOpenSkiMapOverlay(map4, state4); |
|
applyTerrainState(map4, state4); |
|
updateDebugGridSource(map4); |
|
syncViewToUrl(map4, state4); |
|
map4.on("moveend", () => { |
|
syncViewToUrl(map4, state4); |
|
if (state4.showTileGrid) updateDebugGridSource(map4); |
|
}); |
|
map4.on("zoom", () => { |
|
if (state4.mode === "slope+relief") { |
|
computeEffectiveSlopeOpacity(state4, map4); |
|
map4.triggerRepaint(); |
|
} |
|
}); |
|
map4.on("zoomend", () => { |
|
syncViewToUrl(map4, state4); |
|
if (state4.showTileGrid) updateDebugGridSource(map4); |
|
if (state4.mode === "slope+relief") updateLegend(state4, map4); |
|
}); |
|
map4.on("rotateend", () => { |
|
syncViewToUrl(map4, state4); |
|
}); |
|
map4.on("pitchend", () => { |
|
syncViewToUrl(map4, state4); |
|
}); |
|
const hybridLayer = createHybridBorderLayer(state4, getVisibleTriplesForMap, () => updateStatus(state4)); |
|
map4.addLayer(hybridLayer); |
|
map4.addLayer({ |
|
id: "dem-color-relief", |
|
type: "color-relief", |
|
source: DEM_SOURCE_ID, |
|
layout: { |
|
visibility: state4.mode === "color-relief" || state4.mode === "slope+relief" ? "visible" : "none" |
|
}, |
|
paint: { |
|
"color-relief-opacity": state4.slopeOpacity, |
|
"color-relief-color": ANALYSIS_COLOR["color-relief"] |
|
} |
|
}); |
|
applyModeState(map4, state4); |
|
map4.addLayer({ |
|
id: "contours", |
|
type: "line", |
|
source: "contourSource", |
|
"source-layer": "contours", |
|
paint: { |
|
"line-opacity": 0.2, |
|
"line-width": ["match", ["get", "level"], 1, 1, 0.5] |
|
} |
|
}); |
|
map4.addLayer({ |
|
id: "contour-text", |
|
type: "symbol", |
|
source: "contourSource", |
|
"source-layer": "contours", |
|
filter: [">", ["get", "level"], 0], |
|
paint: { |
|
"text-halo-color": "white", |
|
"text-halo-width": 1 |
|
}, |
|
layout: { |
|
"symbol-placement": "line", |
|
"text-size": 10, |
|
"text-field": ["concat", ["number-format", ["get", "ele"], {}], "m"], |
|
"text-font": ["Noto Sans Bold"] |
|
} |
|
}); |
|
applyContourVisibility(map4, state4); |
|
const isMobile2 = "ontouchstart" in window || navigator.maxTouchPoints > 0; |
|
const mobileCrosshair = document.getElementById("mobile-crosshair"); |
|
let cursorRaf = 0; |
|
let lastPointerLngLat = null; |
|
let lastPointerScreenXY = null; |
|
const updateCursorElevation = () => { |
|
cursorRaf = 0; |
|
if (!lastPointerLngLat) { |
|
setCursorInfo(state4, "n/a"); |
|
hideCursorTooltip(); |
|
return; |
|
} |
|
const result = queryLoadedElevationAtLngLat(map4, lastPointerLngLat); |
|
if (!result) { |
|
setCursorInfo(state4, "no loaded tile"); |
|
if (lastPointerScreenXY) showCursorTooltipAt(state4, lastPointerScreenXY.x, lastPointerScreenXY.y, "no tile", "n/a"); |
|
return; |
|
} |
|
const eleText = `${result.elevation.toFixed(0)} m`; |
|
const slopeStr = result.slopeDeg != null ? `${result.slopeDeg.toFixed(0)}\xB0` : "n/a"; |
|
setCursorInfo(state4, eleText, slopeStr); |
|
if (lastPointerScreenXY) showCursorTooltipAt(state4, lastPointerScreenXY.x, lastPointerScreenXY.y, eleText, slopeStr); |
|
}; |
|
map4.on("mousemove", (e) => { |
|
lastPointerLngLat = e.lngLat; |
|
lastPointerScreenXY = { x: e.originalEvent.clientX, y: e.originalEvent.clientY }; |
|
if (!cursorRaf) cursorRaf = requestAnimationFrame(updateCursorElevation); |
|
}); |
|
map4.on("mouseout", () => { |
|
lastPointerLngLat = null; |
|
lastPointerScreenXY = null; |
|
if (!cursorRaf) cursorRaf = requestAnimationFrame(updateCursorElevation); |
|
}); |
|
if (isMobile2) { |
|
map4.on("click", (e) => { |
|
if (tracksState2.editingTrackId) return; |
|
const result = queryLoadedElevationAtLngLat(map4, e.lngLat); |
|
if (state4.cursorInfoMode !== "no") { |
|
mobileCrosshair.style.left = e.originalEvent.clientX + "px"; |
|
mobileCrosshair.style.top = e.originalEvent.clientY + "px"; |
|
mobileCrosshair.classList.add("visible"); |
|
if (state4.cursorInfoMode === "cursor" && result) { |
|
const eleText = `${result.elevation.toFixed(0)} m`; |
|
const slopeStr = result.slopeDeg != null ? `${result.slopeDeg.toFixed(0)}\xB0` : "n/a"; |
|
showCursorTooltipAt(state4, e.originalEvent.clientX, e.originalEvent.clientY, eleText, slopeStr); |
|
} |
|
} |
|
}); |
|
map4.on("dragstart", () => { |
|
mobileCrosshair.classList.remove("visible"); |
|
hideCursorTooltip(); |
|
}); |
|
} |
|
let borderFixTimer = 0; |
|
const flushInternalTextures = () => { |
|
borderFixTimer = 0; |
|
const gl = map4.painter && map4.painter.context && map4.painter.context.gl; |
|
if (gl) { |
|
for (const entry of hybridLayer.internalTextures.values()) { |
|
if (entry.texture) gl.deleteTexture(entry.texture); |
|
} |
|
} |
|
hybridLayer.internalTextures.clear(); |
|
map4.triggerRepaint(); |
|
}; |
|
map4.on("data", (e) => { |
|
if (e.sourceId === DEM_SOURCE_ID && e.dataType === "source") { |
|
if (!borderFixTimer) { |
|
borderFixTimer = setTimeout(flushInternalTextures, 100); |
|
} |
|
} |
|
}); |
|
}); |
|
var hashNavInProgress = false; |
|
window.addEventListener("hashchange", () => { |
|
if (hashNavInProgress) return; |
|
const p = parseHashParams(); |
|
hashNavInProgress = true; |
|
map4.jumpTo({ center: p.center, zoom: p.zoom }); |
|
state4.basemap = p.basemap || "osm"; |
|
state4.mode = p.mode; |
|
state4.slopeOpacity = p.slopeOpacity; |
|
state4.terrain3d = p.terrain3d; |
|
state4.terrainExaggeration = p.terrainExaggeration; |
|
document.getElementById("basemap").value = state4.basemap; |
|
document.getElementById("mode").value = state4.mode; |
|
document.getElementById("slopeOpacity").value = String(state4.slopeOpacity); |
|
document.getElementById("slopeOpacityValue").textContent = state4.slopeOpacity.toFixed(2); |
|
document.getElementById("terrain3d").checked = state4.terrain3d; |
|
document.getElementById("terrainExaggeration").value = String(state4.terrainExaggeration); |
|
document.getElementById("terrainExaggeration").disabled = !state4.terrain3d; |
|
document.getElementById("terrainExaggerationValue").textContent = state4.terrainExaggeration.toFixed(2); |
|
updateLegend(state4, map4); |
|
map4.setBearing(p.bearing); |
|
map4.setPitch(p.pitch); |
|
applyBasemapSelection(map4, state4, true); |
|
applyModeState(map4, state4); |
|
applyTerrainState(map4, state4); |
|
hashNavInProgress = false; |
|
syncViewToUrl(map4, state4); |
|
map4.triggerRepaint(); |
|
}); |
|
map4.on("error", (e) => { |
|
console.error("Map error:", e && e.error ? e.error.message : e); |
|
}); |
|
Object.defineProperties(window, { |
|
mapReady: { get() { |
|
return tracksState2.mapReady; |
|
} }, |
|
map: { get() { |
|
return map4; |
|
} }, |
|
tracks: { get() { |
|
return tracksState2.tracks; |
|
} }, |
|
waypoints: { get() { |
|
return tracksState2.waypoints; |
|
} }, |
|
activeTrackId: { get() { |
|
return tracksState2.activeTrackId; |
|
} }, |
|
editingTrackId: { get() { |
|
return tracksState2.editingTrackId; |
|
} }, |
|
selectedVertexIndex: { get() { |
|
return tracksState2.selectedVertexIndex; |
|
} }, |
|
insertAfterIdx: { get() { |
|
return tracksState2.insertAfterIdx; |
|
} }, |
|
mobileFriendlyMode: { get() { |
|
return tracksState2.mobileFriendlyMode; |
|
} }, |
|
importFileContent: { get() { |
|
return importFileContent; |
|
} }, |
|
profileChart: { get() { |
|
return getProfileChart(); |
|
} }, |
|
profileClosed: { get() { |
|
return tracksState2.profileClosed; |
|
} } |
|
}); |
|
} |
|
}); |
|
require_main(); |
|
})(); |
|
|
|
</script> |
|
</body> |
|
</html> |
