Skip to content

Commit

Permalink
Color gradient option
Browse files Browse the repository at this point in the history
  • Loading branch information
@LOOHP
LOOHP committed Dec 2, 2024
1 parent 0fe3ff4 commit 0555118
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 15 deletions.
24 changes: 16 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,14 +213,10 @@
</div>

<div class="field">
<label class="label" for="boundaries">熱圖限於境內陸地<br>Clip Heatmap to Boundaries</label>
<div class="control">
<div class="select">
<select name="language" id="boundaries" onchange="reload();">
<option value="true">啟用 Enabled</option>
<option value="false">停用 Disabled</option>
</select>
</div>
<label class="label">熱圖顏色漸層<br>Heatmap Gradient</label>
<div id="gradient-picker"></div>
<div class="control gradient-entry" id="gradient-entry-control">
<button class="button is-small gradient-add" id="gradient-add" onclick="addGradientPicker();">+</button>
</div>
</div>

Expand All @@ -232,6 +228,18 @@
</div>
</div>

<div class="field">
<label class="label" for="boundaries">熱圖限於境內陸地<br>Clip Heatmap to Boundaries</label>
<div class="control">
<div class="select">
<select name="language" id="boundaries" onchange="reload();">
<option value="true">啟用 Enabled</option>
<option value="false">停用 Disabled</option>
</select>
</div>
</div>
</div>

<div class="field">
<label class="label" for="useArea">行程時間範圍<br>Travel Time Area</label>
<div class="control">
Expand Down
79 changes: 72 additions & 7 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,12 @@ function reload() {
interchangeTimeForTrains = Number(document.getElementById("interchangeTimesForTrains").value);
intensityByTravelTimeMaxTime = Number(document.getElementById("intensityByTravelTimeMaxTime").value);
maxTransparency = Number(document.getElementById("maxTransparency").value);
updateGradientPicker();
clipToBoundaries = document.getElementById("boundaries").value === "true";
enableAreaLayer = document.getElementById("useArea").value === "true";
updateHeatLegend(intensityByTravelTimeMaxTime);
heatmapLayer.options.gradient = gradient;
heatmapLayer._updateOptions();
if (!lastPosition) return;
const [lat, lng] = lastPosition;
updateOrigin(lat, lng)
Expand Down Expand Up @@ -116,6 +119,65 @@ function updateHeatLegend(value) {
document.getElementById("heat-legend-5").innerHTML = `${value}`;
}

function removeGradientPicker(index) {
updateGradientPicker(index);
reload();
}

function updateGradientPicker(ignore = undefined) {
const newGradient = {};
for (let index = 1; ; index++) {
if (index === ignore) {
continue;
}
const positionElement = document.getElementById(`gradient-position-${index}`);
const valueElement = document.getElementById(`gradient-value-${index}`);
if (!positionElement || !valueElement) {
break;
}
if (!newGradient.hasOwnProperty(positionElement.value) || gradientPickerPriority === index) {
newGradient[positionElement.value] = valueElement.value;
}
}
if (Object.keys(newGradient).length > 0) {
gradient = newGradient;
}
generateGradientPicker(gradient);
drawHeatLegend();
}

function addGradientPicker() {
let newValue = 1;
for (const position of Object.keys(gradient).sort((a, b) => Number(b) - Number(a))) {
if (Number(position) === newValue) {
newValue = Number((newValue - 0.05).toFixed(2));
}
}
if (newValue >= 0 && newValue <= 1) {
gradient[newValue] = "#FF0000";
}
generateGradientPicker(gradient);
reload();
}

function generateGradientPicker(value) {
const div = document.getElementById("gradient-picker");
let innerHTML = "";
const entries = Object.entries(value).sort(([a], [b]) => Number(b) - Number(a));
let counter = 1;
for (const [position, value] of entries) {
const index = counter++;
innerHTML += `
<div class="control gradient-entry" id="gradient-entry-${index}">
<input type="number" class="input gradient-position" id="gradient-position-${index}" min="0" max="1" step="0.05" value="${position}" onchange="gradientPickerPriority = ${index}; reload();">
<input type="color" class="input gradient-color" id="gradient-value-${index}" value="${value}" onchange="gradientPickerPriority = ${index}; reload();">
<button class="button gradient-remove" id="gradient-remove-${index}" onclick="gradientPickerPriority = null; removeGradientPicker(${index});">-</button>
</div>
`;
}
div.innerHTML = innerHTML;
}

function initMap() {
tileLayers.clearLayers();
if (basemapUrl) {
Expand Down Expand Up @@ -639,6 +701,16 @@ let interchangeTimeForTrains = 90;
let walkableDistance = 1.5;
let clipToBoundaries = false;
let enableAreaLayer = false;
let gradient = {
0.1: "#0000FF",
0.6: "#00FFFF",
0.8: "#00FF00",
0.9: "#FFFF00",
1.0: "#FF0000"
}

let gradientPickerPriority = null;
generateGradientPicker(gradient);

const hongKongBounds = {
minLat: 22.14, maxLat: 22.57,
Expand All @@ -661,13 +733,6 @@ const tileLayers = L.layerGroup().addTo(map);
initMap();

const droppedPinLayer = L.layerGroup().addTo(map);
const gradient = {
0.1: "blue",
0.6: "cyan",
0.8: "lime",
0.9: "yellow",
1.0: "red"
}

const transitPointLayer = L.markerClusterGroup({spiderfyOnMaxZoom: false, disableClusteringAtZoom: 16}).addTo(map);

Expand Down
33 changes: 33 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,39 @@ html {
display: flex;
}

.gradient-entry {
display: flex;
justify-content: space-between;
}

.gradient-entry + .gradient-entry {
margin-top: 10px;
}

.gradient-position {
max-width: 30%;
width: 30%
}

.gradient-color {
max-width: 51%;
width: 51%;
}

.gradient-add {
width: 100%;
margin-top: 10px;
}

.gradient-remove {
width: 15%;
}

.error {
border: 1px solid red !important;
box-shadow: 0 0 0 3px #ff000054 !important;
}

.options-button {
display: none;
position: fixed;
Expand Down

0 comments on commit 0555118

Please sign in to comment.