DK1DA/DMRmap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use slider for pin radius selection

Browse source
This commit is contained in:
Marcus Kida 2026-02-10 01:19:11 +01:00
parent 976fbfae15
commit 3fce3e6af1
3 changed files with 16 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
static/app.js
View file

@ -49,6 +49,7 @@
var corridorVal = document.getElementById("corridor-val"); var corridorVal = document.getElementById("corridor-val");
var pinControlsEl = document.getElementById("pin-controls"); var pinControlsEl = document.getElementById("pin-controls");
var pinRadiusInput = document.getElementById("pin-radius"); var pinRadiusInput = document.getElementById("pin-radius");
var pinRadiusVal = document.getElementById("pin-radius-val");
var pinClearBtn = document.getElementById("pin-clear"); var pinClearBtn = document.getElementById("pin-clear");
var pinListEl = document.getElementById("pin-list"); var pinListEl = document.getElementById("pin-list");
@ -816,9 +817,12 @@
pinClearBtn.addEventListener("click", clearPin); pinClearBtn.addEventListener("click", clearPin);
pinRadiusInput.addEventListener("input", function () {
pinRadiusVal.textContent = pinRadiusInput.value;
if (pinCircle) pinCircle.setRadius(pinRadiusInput.value * 1000);
});
pinRadiusInput.addEventListener("change", function () { pinRadiusInput.addEventListener("change", function () {
if (!pinLatLng) return; if (!pinLatLng) return;
if (pinCircle) pinCircle.setRadius(pinRadiusInput.value * 1000);
fetchPinRepeaters(); fetchPinRepeaters();
}); });

3
static/index.html
View file

@ -51,7 +51,8 @@
<div id="pin-controls" class="pin-controls" style="display:none"> <div id="pin-controls" class="pin-controls" style="display:none">
<div class="controls-row pin-header"> <div class="controls-row pin-header">
<label class="pin-radius-label">Radius <label class="pin-radius-label">Radius
<input type="number" id="pin-radius" value="100" min="1" max="500" step="10" /> km <input type="range" id="pin-radius" min="10" max="200" value="50" step="10" />
<span id="pin-radius-val">50</span> km
</label> </label>
<button id="pin-clear" class="pin-clear-btn">Clear pin</button> <button id="pin-clear" class="pin-clear-btn">Clear pin</button>
</div> </div>

18
static/style.css
View file

@ -421,18 +421,18 @@ html, body {
color: var(--text-muted); color: var(--text-muted);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 6px;
flex: 1;
} }
.pin-radius-label input { .pin-radius-label input[type="range"] {
width: 52px; flex: 1;
padding: 3px 4px; cursor: pointer;
border: 1px solid var(--border); }
border-radius: 4px;
font-size: 12px; .pin-radius-label span {
min-width: 24px;
text-align: right; text-align: right;
background: var(--input-bg);
color: var(--text);
} }
.pin-clear-btn { .pin-clear-btn {