Add map styles (close #1)

index.html

@@ -65,6 +65,17 @@
                 background-clip: border-box;
                 color: black;
             }
+            .mapboxgl-ctrl-attrib, .mapboxgl-ctrl-attrib-inner a {
+                color: black !important;
+            }
+
+            .nav-pills .nav-link {
+                background-color: rgba(50,50,50,0.7);
+
+            }
+            .nav-pills .nav-link.active {
+                background-color: rgba(0,0,0,0.9);
+            }
 
             #page-container {
                 height: 100%;
@@ -87,7 +98,6 @@
                     display: initial;
                 }
             }
-
         </style>
 
         <!-- Matomo -->
@@ -149,13 +159,29 @@
             <div class="card mb-2 border-secondary" id="mapcard">
                 <a name="map"></a>
                 <div class="card-body p-2">
-                    <div id="mapbox" class="w-100 h-100"></div>
+                    <div id="mapbox" class="w-100"></div>
+                    <ul class="nav nav-pills pt-2" id="map-style-switcher">
+                        <li class="nav-item p-1">
+                            <a class="nav-link active" href="#map" data-style="street">Light</a>
+                        </li>
+                        <li class="nav-item p-1">
+                            <a class="nav-link" href="#map" data-style="dark">Dark</a>
+                        </li>
+                        <li class="nav-item p-1">
+                            <a class="nav-link" href="#map" data-style="terrain">Topo</a>
+                        </li>
+                        <li class="nav-item p-1">
+                            <a class="nav-link" href="#map" data-style="satellite">Satellite</a>
+                        </li>
+                    </ul>
                 </div>
             </div>
         </div>
 
         <script>
             window.onload = function () {
+                $("#mapbox").css("height", "calc(100% - " + $("#map-style-switcher").css("height") + ")");
+
                 createMap();
 
                 var bgs = [
@@ -169,6 +195,19 @@
                 var bgimg = bgs[Math.floor(Math.random() * bgs.length)];
                 $("body").css("background-image", "url(./img/bg/" + bgimg + ")");
 
+                map.resize();
+
+                // Load style preference from cookie
+                var cookies = decodeURIComponent(document.cookie).split("; ");
+                cookies.forEach(val => {
+                    if (val.indexOf("mapstyle") === 0) {
+                        var style = val.substring(9);
+                        setMapStyle(style);
+                        $("#map-style-switcher a.nav-link").removeClass("active");
+                        $("#map-style-switcher a.nav-link[data-style=" + style + "]").addClass("active");
+                    }
+                });
+
                 $("body").on("click", ".copyonclick", function () {
                     var copyitem = $(this);
                     var copytext = copyitem.text();
@@ -189,6 +228,17 @@
                         dolookup($(this).val());
                     }
                 });
+
+                $("#map-style-switcher").on("click", "a.nav-link", function () {
+                    $("#map-style-switcher a.nav-link").removeClass("active");
+                    setMapStyle($(this).data("style"));
+                    $(this).addClass("active");
+
+                    // Save style preference in cookie
+                    var date = new Date();
+                    date.setTime(date.getTime() + (90 * 24 * 60 * 60 * 1000));
+                    document.cookie = "mapstyle=" + $(this).data("style") + "; expires=" + date.toUTCString();
+                });
             };
 
             function dolookup(words) {

js/map.js

@@ -16,6 +16,27 @@ function createMap() {
     }
 }
 
+function setMapStyle(style) {
+    var styleurl = "https://maps.netsyms.net/styles/osm-liberty/style.json";
+    switch (style) {
+        case "street":
+            styleurl = "https://maps.netsyms.net/styles/osm-liberty/style.json";
+            break;
+        case "dark":
+            styleurl = "https://maps.netsyms.net/styles/osm-liberty-dark/style.json";
+            break;
+        case "terrain":
+            styleurl = "https://maps.netsyms.net/styles/klokantech-terrain/style.json";
+            break;
+        case "satellite":
+            styleurl = "https://api.maptiler.com/maps/hybrid/style.json?key=sgkE6Lno8BY1AK83pu5z";
+            break;
+        default:
+            styleurl = "https://maps.netsyms.net/styles/osm-liberty/style.json";
+    }
+    map.setStyle(styleurl);
+}
+
 function centerMapOnLocation(latitude, longitude) {
     map.removeMarkers();
     map.addMarker(latitude, longitude);

js/map_maplibre.js

@@ -12,7 +12,7 @@ function maplibreMap() {
 
     var map = new mapboxgl.Map({
         container: 'mapbox',
-        style: "https://maps.netsyms.net/styles/osm-liberty-hillshading/style.json",
+        style: "https://maps.netsyms.net/styles/osm-liberty/style.json",
         //attributionControl: false,
         interactive: true,
         pitch: 0,