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>