Add grade direction switching to map settings

index.html

@@ -113,6 +113,12 @@
                     <path d="M 0 -7 L 3.8 4 L -3.8 4 z" fill="black"/>
                     <path d="M 0 -5 L 3 4 L 0 5 L -3 4 z"/>
                 </g>
+                <g id="gradeArrowDownhill" transform="rotate(180) scale(30)" viewBox="0 0 10 10" >
+                    <path d="M 0 -7 L 3.8 4 L -3.8 4 z" fill="black"/>
+                    <path d="M 0 -5 L 3 4 L 0 5 L -3 4 z"/>
+                    <path d="M 0 -1.9 1.91 3.83 H -1.9 z" fill="black"/>
+                    <path d="M 0 -0.3 1.5 4.3 h -3 z"/>
+                </g>
                 <g id="speedSign" transform="scale(15)" viewBox="0 0 10 10" style="fill:#fff; stroke:#e73819">
                     <circle cx="0" cy="0" r="3"/>
                 </g>

index.js

@@ -621,6 +621,7 @@ function drawMarkers(){
         markerImg.classList.add('fixedScale', 'sign');
         // Grade signs
         if(markerData.type == 'grade'){
+            markerImg.classList.add('gradeArrow');
             markerImg.setAttribute('href', '#gradeArrow');
             markerImg.setAttribute('fill', Config.gradeColors['grade_'+markerData.gradeClass]);
             const tanLen = Math.sqrt(markerData.tangent.x*markerData.tangent.x + markerData.tangent.z*markerData.tangent.z) * Math.sign(markerData.tangent.y);

legend.js

@@ -75,6 +75,21 @@ let settingEntries = [
             },
         ]
     },
+    {
+        label: 'Grade Arrow Direction',
+        id: 'dropdown_gradeArrowDirection',
+        options: [
+            'Uphill',
+            'Downhill',
+        ],
+        default: 'Uphill',
+        func: state =>{
+            let newHref = state == 'Uphill' ? '#gradeArrow' : '#gradeArrowDownhill';
+            for(let arrow of document.getElementsByClassName('gradeArrow')){
+                arrow.setAttribute('href', newHref);
+            }
+        }
+    },
 ];
 
 const legendKey = document.getElementById('legendKey');
@@ -194,7 +209,6 @@ async function setLastUpdateData(){
 }
 
 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)}`;
@@ -221,7 +235,7 @@ function populateKey(){
     addKeyEntry('<use href="#mrk_landmark" fill="#af5757" transform="scale(0.75)"/>', ' Landmark');
     addKeyEntry('<use href="#mrk_garage" fill="#8b5dd7" transform="scale(0.75)"/>', ' Garage');
     //Add empty entries to make entries align right in the columns.
-    for(let i=0; i<4; i++){
+    for(let i=0; i<3; i++){
         addKeyEntry();
     }
 }