Update Links

index.html

@@ -41,11 +41,12 @@
         </div>
         <div id="legend">
             <div id="legendContents">
-                <div class="panel">
+                <div class="panel linkpanel">
-                    <a href="https://github.com/PyroNicampt/DV-Community-Map">Source</a> &#8226;
+                    <a href="https://github.com/PyroNicampt/DV-Community-Map">Source</a>
-                    <a href="https://github.com/PyroNicampt/DV-Community-Map/issues">Issue Tracker</a> &#8226;
+                    <a href="https://github.com/PyroNicampt/DV-Community-Map/issues">Issue Tracker</a>
-                    <a href="https://derailvalley.wiki.gg/wiki/Derail_Valley_Wiki">DV Wiki</a> &#8226;
+                    <a href="https://derailvalley.wiki.gg/wiki/Derail_Valley_Wiki">DV Wiki</a>
                     <a href="https://wiki.derailvalley.com/wiki/Main_Page">Official Manual</a>
+                    <a href="https://github.com/PyroNicampt/DV-Community-Map/releases">Location Mod</a>
                 </div>
                 <div class="panel">
                     Welcome to the WIP community map of <a href="https://www.derailvalley.com/" style="white-space:nowrap;">Derail Valley</a>, a resource for documenting and displaying all tracks and points of interest.

index.js

@@ -503,7 +503,7 @@ function redrawDynamics(){
         if(markerX > mapCanvas.width + Config.viewCullMargin || markerX < -Config.viewCullMargin || markerY > mapCanvas.height + Config.viewCullMargin || markerY < -Config.viewCullMargin) continue; // View Culling
         switch(marker.type){
             case 'player':
-                if(!(MapData.layers.poi)) break;
+                if(!(MapData.layers.dynamic && MapData.layers.player)) break;
                 marker.visible = true;
                 curSprite = Config.spriteBounds.player;
                 spriteSize = 45;
@@ -526,7 +526,7 @@ function redrawDynamics(){
                 curSprite = null;
                 break;
             case 'car':
-                if(!(MapData.layers.poi)) break;
+                if(!(MapData.layers.dynamic && MapData.layers.cars)) break;
                 let scale = MapData.view.pixelRatio * MapData.view.scale;
                 let limitScaleRatio = (MapData.view.pixelRatio * Math.max(MapData.view.scale, 3)) / scale;
                 let width = marker.width * scale;

legend.js

@@ -234,7 +234,39 @@ let settingEntries = [
         func: state =>{
             MapData.setLocationUpdateRate(Number(state) * 1000);
         }
-    }
+    },
+    {
+        label: 'Dynamic Objects',
+        id: 'toggle_dynamic',
+        saveState: true,
+        state: true,
+        func: state => {
+            MapData.layers.dynamic = state;
+            MapData.view.dynDirty = true;
+        },
+        children: [
+            {
+                label: 'Player',
+                id: 'toggle_player',
+                saveState: true,
+                state: true,
+                func: state =>{
+                    MapData.layers.player = state;
+                    MapData.view.dynDirty = true;
+                }
+            },
+            {
+                label: 'Cars',
+                id: 'toggle_cars',
+                saveState: true,
+                state: true,
+                func: state =>{
+                    MapData.layers.cars = state;
+                    MapData.view.dynDirty = true;
+                },
+            },
+        ]
+    },
 ];
 
 const legendKey = document.getElementById('legendKey');

style.css

@@ -22,10 +22,13 @@ html, body{
 }
 
 a{
-    color: #85c4f7;
+    color: #79bcf3;
 }
 a:visited{
-    color: #559bd4;
+    color: #5ea8e4;
+}
+a:hover{
+    color: #e79830;
 }
 
 .orange{
@@ -56,6 +59,28 @@ a:visited{
     border-bottom: 2px solid #b3b3b396;
 }
 
+.linkpanel{
+    padding: 3px 3px;
+    >a{
+        display: inline-block;
+        white-space: nowrap;
+        text-decoration: none;
+        background: #191e2e;
+        padding: 2px 4px;
+        margin: 2px 1px;
+        border: 2px solid #b3b3b396;
+        border-radius: 8px;
+    }
+    a::after{
+        content: ' ⧉';
+        font-size: 10px;
+    }
+    a:hover{
+        color: #31281b;
+        background: #e79830;
+    }
+}
+
 #topleft{
     position:fixed;
     top: 0px;