Add key to legend

index.html

@@ -11,28 +11,6 @@
     <div id="mapContainer">
         <svg id="map" xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 10000 10000">
             <style>
-                :root{
-                    --grade_flat: #ffff;
-                    --grade_0: #fdffde;
-                    --grade_1: #f8ff99;
-                    --grade_2: #edfc1b;
-                    --grade_3: #fcb520;
-                    --grade_4: #f07837;
-                    --grade_5: #e66441;
-                    --grade_6: #ce3f57;
-                    --grade_7: #c33577;
-                    --grade_8: #a3008d;
-                    --grade_9: #690097;
-
-                    --signScale: 1;
-                    --cullThreshold_state_0: none;
-                    --cullThreshold_state_1: none;
-                    --cullThreshold_state_2: none;
-                    --cullThreshold_state_3: none;
-                    --cullThreshold_state_4: none;
-                    --cullThreshold_state_5: none;
-                    --cullThreshold_state_6: none;
-                }
                 .sign{
                     transform: scale(var(--signScale));
                 }
@@ -87,6 +65,9 @@
                     stroke: var(--grade_9);
                 }
     
+                .gradeSign.grade_flat{
+                    fill: var(--grade_flat);
+                }
                 .gradeSign.grade_0{
                     fill: var(--grade_0);
                 }
@@ -211,6 +192,11 @@
                     <hr>
                     Hover over tracks and objects for detailed information.
                 </div>
+                <div class="panel">
+                    <h3>Key</h3>
+                    <hr>
+                    <div id="legendKey"></div>
+                </div>
                 <div id="settingsPanel" class="panel">
                     <h3>Map Settings</h3>
                     <hr>

js/utillib.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const gradeIncrements = [
+export const gradeIncrements = [
     0.0498,
     0.04,
     0.035,

legend.js

@@ -1,5 +1,7 @@
 'use strict';
 
+import * as Utils from './js/utillib.js';
+
 let settingEntries = [
     {
         label: 'Signage',
@@ -38,6 +40,8 @@ let settingEntries = [
     },
 ];
 
+const legendKey = document.getElementById('legendKey');
+
 document.addEventListener('DOMContentLoaded', async () => {
     const settingsPanel = document.getElementById('settingsPanel');
     for(let thisSetting of settingEntries){
@@ -54,6 +58,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     };
     legendButton.addEventListener('click', legendButtonEvent);
     legendButtonEvent();
+    populateKey();
 });
 
 function addSettingEntry(thisSetting, parent, indent=0){
@@ -95,3 +100,43 @@ function addSettingEntry(thisSetting, parent, indent=0){
         }
     }
 }
+
+function populateKey(){
+    addKeyEntry(null, '<span style="font-size:smaller">(Grade arrows point uphill)</span>');
+    const getGradeValue = gradeIndex => {return Math.round(Utils.gradeIncrements[Utils.gradeIncrements.length-gradeIndex-1]*10000)/100};
+    for(let i=-1; i<Utils.gradeIncrements.length; i++){
+        let gradeValue = `< ${getGradeValue(0)}`;
+        let gradeIndex = 'flat';
+        if(i>=0){
+            gradeValue = `${getGradeValue(i)}`;
+            gradeIndex = i;
+        }
+        if(i == Utils.gradeIncrements.length-1){
+            gradeValue = '> '+gradeValue+'%';
+        }else if(i >= 0){
+            gradeValue += ` - ${getGradeValue(i+1)}%`;
+        }
+        let gradeIcon = document.createElement('svg');
+        gradeIcon.classList.add('inlineSvg');
+        gradeIcon.setAttribute('viewBox', '-50 -50 100 100');
+        gradeIcon.innerHTML = `<use class="gradeSign grade_${gradeIndex}" href="#gradeArrow" transform="rotate(90)"/>`;
+        addKeyEntry(gradeIcon, ` ${gradeValue} Grade`);
+    }
+    let speedSignIcon = document.createElement('svg');
+    speedSignIcon.classList.add('inlineSvg');
+    speedSignIcon.setAttribute('viewBox', '-50 -50 100 100');
+    speedSignIcon.innerHTML = `<use class="speedSign" href="#speedSign_5"/>`;
+    addKeyEntry(speedSignIcon, ' Speed Limit');
+}
+
+/**
+ * Add an entry to the map key.
+ * @param {Element} keyImage 
+ * @param {string} keyLabel 
+ */
+function addKeyEntry(keyImage, keyLabel){
+    let keyDiv = document.createElement('div');
+    if(keyImage) keyDiv.appendChild(keyImage);
+    keyDiv.innerHTML += keyLabel;
+    legendKey.appendChild(keyDiv);
+}

style.css

@@ -1,5 +1,28 @@
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Protest+Strike&display=swap');
 
+:root{
+    --grade_flat: #ffff;
+    --grade_0: #f4f7cd;
+    --grade_1: #f8ff99;
+    --grade_2: #edfc1b;
+    --grade_3: #fcb520;
+    --grade_4: #f07837;
+    --grade_5: #e66441;
+    --grade_6: #ce3f57;
+    --grade_7: #c33577;
+    --grade_8: #a3008d;
+    --grade_9: #690097;
+
+    --signScale: 1;
+    --cullThreshold_state_0: none;
+    --cullThreshold_state_1: none;
+    --cullThreshold_state_2: none;
+    --cullThreshold_state_3: none;
+    --cullThreshold_state_4: none;
+    --cullThreshold_state_5: none;
+    --cullThreshold_state_6: none;
+}
+
 html, body, #map, #mapContainer, h1, h2, h3, h4, h5{
     padding: 0px;
     margin: 0px;
@@ -64,6 +87,10 @@ a:visited{
     transition: transform 200ms ease;
 }
 
+#legendKey{
+    font-size: 15px;
+}
+
 #footer{
     position: fixed;
     width: fit-content;
@@ -89,3 +116,9 @@ a:visited{
     user-select: none;
     background: linear-gradient(#444, #333);
 }
+
+.inlineSvg {
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.1em;
+}