chandlerswift/maps.chandlerswift.com
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Improve layer color UI

Browse source 
- Add color picker
 - Default colorpicker to nice value from list
 - Make sure it doesn't overlap with an already-chosen color
This commit is contained in:
Chandler Swift 2024-10-19 20:32:16 -05:00
parent 54620a68fc
commit 3ca2cd0f7d
Signed by: chandlerswift
GPG key ID: A851D929D52FB93F
1 changed files with 22 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
main.js
View file

@ -156,7 +156,7 @@ customLayerDiv.innerHTML = `
<summary>Custom</summary> <summary>Custom</summary>
<label>Layer Name: <input type="text"></label><br> <label>Layer Name: <input type="text"></label><br>
<label>Layer URL: <input type="url"></label><br> <label>Layer URL: <input type="url"></label><br>
<label>Color (optional): <input type="color"></label><br> <label>Color (optional): <input type="color" value="#AA5AF0"></label><br>
<button>Add</button> <button>Add</button>
<small>(must be in GeoJSON format)</small> <small>(must be in GeoJSON format)</small>
<ul></ul> <ul></ul>
@ -189,6 +189,15 @@ let colors = [
[255, 220, 90], [255, 220, 90],
]; ];
let used_colors = [];
// HACK
// TIL that [1,1] != [1,1], since arrays are objects, and objects are equal iff
// they are the same object.
Array.prototype.equals = function(other) {
return this.length == other.length && this.every((e, i) => e === other[i]);
};
function newCustomLayer(name, sourceURL, colorString) { function newCustomLayer(name, sourceURL, colorString) {
let color; let color;
if (colorString) { if (colorString) {
@ -203,8 +212,14 @@ function newCustomLayer(name, sourceURL, colorString) {
} }
} }
if (!color) { if (!color) {
color = colors[document.querySelectorAll('aside div:has(input[name]) li').length % colors.length]; let available_colors = colors.filter(c => !used_colors.some(i => i.equals(c)));
if (available_colors) {
color = available_colors[0];
} else {
color = [0, 0, 0]; // If we run out of colors, fall back to black
} }
}
used_colors.push(color);
const li = document.createElement("li"); const li = document.createElement("li");
const layer = new VectorLayer({ const layer = new VectorLayer({
source: new VectorSource({ source: new VectorSource({
@ -233,6 +248,11 @@ function newCustomLayer(name, sourceURL, colorString) {
}); });
map.getLayers().push(layer); map.getLayers().push(layer);
customLayerDiv.querySelector("ul").appendChild(li); customLayerDiv.querySelector("ul").appendChild(li);
// Update input to make sure it's not suggesting an already-used color
let available_colors = colors.filter(c => !used_colors.some(i => i.equals(c)));
available_colors.push([0, 0, 0]); // Ensure we always have at least one color available
document.querySelector('input[type=color]').value = '#' + available_colors[0].map(x => x.toString(16).padStart(2, '0')).join('');
} }
if (urlParams.customLayer) { if (urlParams.customLayer) {