Add POI to layer toggles

index.js

@@ -557,7 +557,7 @@ function addPoi(poi, level = 0){
             poiIcon.setAttribute('href', '#mrk_landmark');
             poiDisplay.setAttribute('fill', '#af5757');
             poiTooltip.innerHTML = poi.name ?? 'Unknown Landmark';
-            poiLayers.service.prepend(poiElement);
+            poiLayers.landmarks.prepend(poiElement);
             poiElement.classList.add('minZoomCull_1');
             break;
         case 'shop':

legend.js

@@ -30,6 +30,32 @@ let settingEntries = [
             }
         ],
     },
+    {
+        label: 'Points of Interest',
+        id: 'toggle_poi',
+        state: true,
+        func: state => {
+            document.getElementById('poi_container').style.display = state ? 'unset' : 'none';
+        },
+        children: [
+            {
+                label: 'Services',
+                id: 'toggle_services',
+                state: true,
+                func: state =>{
+                    document.getElementById('poi_service').style.display = state ? 'unset' : 'none';
+                },
+            },
+            {
+                label: 'Landmarks',
+                id: 'toggle_landmarks',
+                state: true,
+                func: state =>{
+                    document.getElementById('poi_landmarks').style.display = state ? 'unset' : 'none';
+                },
+            },
+        ]
+    },
     {
         label: 'Track Color',
         id: 'radio_trackColor',

style.css

@@ -81,7 +81,7 @@ a:visited{
     font-size: 15px;
     display: flex;
     flex-flow: column wrap;
-    max-height: 350px;
+    max-height: 310px;
 }
 
 #footer{