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 = `
<details>
<summary>Custom</summary>
<label>Layer Name: <input name="label"></label><br>
<label>Layer URL: <input name="source"></label><br>
<label>Color (optional): <input name="color"></label><br>
<label>Layer Name: <input type="text"></label><br>
<label>Layer URL: <input type="url"></label><br>
<label>Color (optional): <input type="color"></label><br>
<button>Add</button>
<small>(must be in GeoJSON format)</small>
<ul></ul>
</details>`;
const labelInput = customLayerDiv.querySelector('input[name=label]');
const sourceInput = customLayerDiv.querySelector('input[name=source]');
const colorInput = customLayerDiv.querySelector('input[name=color]');
const labelInput = customLayerDiv.querySelector('input[type=text]');
const sourceInput = customLayerDiv.querySelector('input[type=url]');
const colorInput = customLayerDiv.querySelector('input[type=color]');
customLayerDiv.querySelector("button").addEventListener("click", function(){
if (!sourceInput.value.toLowerCase().endsWith(".geojson")) {
@ -171,7 +171,7 @@ customLayerDiv.querySelector("button").addEventListener("click", function(){
return;
}
}
newCustomLayer(labelInput.value, sourceInput.value, colorInput.value);
newCustomLayer(labelInput.value, sourceInput.value, colorInput.value.substring(1));
});
document.querySelector("aside").appendChild(customLayerDiv);
@ -192,7 +192,11 @@ let colors = [
function newCustomLayer(name, sourceURL, colorString) {
let color;
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)) {
alert("Invalid color provided; using random color instead.");
color = null;