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

Use hex color format; add color picker input

Browse source
This commit is contained in:
Chandler Swift 2024-10-19 19:34:33 -05:00
parent 26c5b56d58
commit 54620a68fc
Signed by: chandlerswift
GPG key ID: A851D929D52FB93F
1 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
main.js
View file

@ -154,16 +154,16 @@ const customLayerDiv = document.createElement("div");
customLayerDiv.innerHTML = ` customLayerDiv.innerHTML = `
<details> <details>
<summary>Custom</summary> <summary>Custom</summary>
<label>Layer Name: <input name="label"></label><br> <label>Layer Name: <input type="text"></label><br>
<label>Layer URL: <input name="source"></label><br> <label>Layer URL: <input type="url"></label><br>
<label>Color (optional): <input name="color"></label><br> <label>Color (optional): <input type="color"></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>
</details>`; </details>`;
const labelInput = customLayerDiv.querySelector('input[name=label]'); const labelInput = customLayerDiv.querySelector('input[type=text]');
const sourceInput = customLayerDiv.querySelector('input[name=source]'); const sourceInput = customLayerDiv.querySelector('input[type=url]');
const colorInput = customLayerDiv.querySelector('input[name=color]'); const colorInput = customLayerDiv.querySelector('input[type=color]');
customLayerDiv.querySelector("button").addEventListener("click", function(){ customLayerDiv.querySelector("button").addEventListener("click", function(){
if (!sourceInput.value.toLowerCase().endsWith(".geojson")) { if (!sourceInput.value.toLowerCase().endsWith(".geojson")) {
@ -171,7 +171,7 @@ customLayerDiv.querySelector("button").addEventListener("click", function(){
return; return;
} }
} }
newCustomLayer(labelInput.value, sourceInput.value, colorInput.value); newCustomLayer(labelInput.value, sourceInput.value, colorInput.value.substring(1));
}); });
document.querySelector("aside").appendChild(customLayerDiv); document.querySelector("aside").appendChild(customLayerDiv);
@ -192,7 +192,11 @@ let colors = [
function newCustomLayer(name, sourceURL, colorString) { function newCustomLayer(name, sourceURL, colorString) {
let color; let color;
if (colorString) { if (colorString) {
color = colorString.split(' ').map(Number); color = [
parseInt(colorString.substr(0,2),16),
parseInt(colorString.substr(2,2),16),
parseInt(colorString.substr(4,2),16),
];
if (color.length != 3 || color.some(Number.isNaN)) { if (color.length != 3 || color.some(Number.isNaN)) {
alert("Invalid color provided; using random color instead."); alert("Invalid color provided; using random color instead.");
color = null; color = null;