Add ability to switch maptile style

index.html

@@ -24,6 +24,8 @@
         attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e",
         style: 'https://api.maptiler.com/maps/hybrid/style.json?key=PVp0f0cBGCyXeWLnAp9e'
       }).addTo(map);
+
+
       fetch('shadowrun.kml')
          .then(res => res.text())
          .then(kmltext => {
@@ -83,6 +85,19 @@
     oursswitcher.addTo(map);
     document.getElementById ("oursswitcher").addEventListener ("click", toggleOurs, false);
 
+    var styleSwitcher = L.control({position: 'topleft'});
+    styleSwitcher.onAdd = function (map) {
+        var div = L.DomUtil.create('div', 'stylediv');
+        div.innerHTML = '<form> \
+        <input id="hybrid-style" type="radio" name="style-selector" value="hybrid" checked />Hybrid <br/>\
+        <input id="streets-style" type="radio" name="style-selector" value="streets" />Streets <br/>\
+        </form>';
+        return div;
+    };
+    styleSwitcher.addTo(map);
+    document.getElementById ("hybrid-style").addEventListener ("click", setMapStyle, false);
+    document.getElementById ("streets-style").addEventListener ("click", setMapStyle, false);
+
     function toggleChinaGreen() {
        if(this.checked){
           map.addLayer(chinagreen);
@@ -104,6 +119,12 @@
           map.removeLayer(ours);
        }
     }
+
+    function setMapStyle() {
+       if(this.checked){
+          gl._glMap.setStyle('https://api.maptiler.com/maps/' + this.value + '/style.json?key=PVp0f0cBGCyXeWLnAp9e');
+       }
+    }
     </script>
   </body>
 </html>