Updated index to include checkboxes for layers

index.html

@@ -16,6 +16,8 @@
     <div id="map"></div>
     <p><a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a></p>
     <script>
+      var chinagreen;
+      var shadowrun;
       var map = L.map('map').setView([47.63,-122.33], 10);
       var gl = L.mapboxGL({
         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",
@@ -27,10 +29,8 @@
             // Create new kml overlay
             const parser = new DOMParser();
             const kml = parser.parseFromString(kmltext, 'text/xml');
-            const shadowrun = new L.KML(kml);
+            shadowrun = new L.KML(kml);
             map.addLayer(shadowrun);
-            const bounds = track.getBounds();
-            map.fitBounds(bounds);
          });
       fetch('chinagreen.kml')
          .then(res => res.text())
@@ -38,11 +38,44 @@
             // Create new kml overlay
             const parser = new DOMParser();
             const kml = parser.parseFromString(kmltext, 'text/xml');
-            const chinagreen = new L.KML(kml);
+            chinagreen = new L.KML(kml);
             map.addLayer(chinagreen);
-            const bounds = track.getBounds();
-            map.fitBounds(bounds);
          });
+    var chinagreenswitcher = L.control({position: 'topleft'});
+
+    chinagreenswitcher.onAdd = function (map) {
+        var div = L.DomUtil.create('div', 'chinagreen');
+        div.innerHTML = '<form><input id="chinagreenswitcher" type="checkbox" checked />Toggle District Info</form>'; 
+        return div;
+    };
+
+    chinagreenswitcher.addTo(map);
+    document.getElementById ("chinagreenswitcher").addEventListener ("click", toggleChinaGreen, false);
+
+    var shadowrunswitcher = L.control({position: 'topleft'});
+
+    shadowrunswitcher.onAdd = function (map) {
+        var div = L.DomUtil.create('div', 'shadowrun');
+        div.innerHTML = '<form><input id="shadowrunswitcher" type="checkbox" checked />Toggle Security Zones</form>'; 
+        return div;
+    };
+
+    shadowrunswitcher.addTo(map);
+    document.getElementById ("shadowrunswitcher").addEventListener ("click", toggleShadowrun, false);
+    function toggleChinaGreen() {
+       if(this.checked){
+          map.addLayer(chinagreen);
+       }else{
+          map.removeLayer(chinagreen)
+       }
+    }
+    function toggleShadowrun() {
+       if(this.checked){
+          map.addLayer(shadowrun);
+       }else{
+          map.removeLayer(shadowrun)
+       }
+    }
     </script>
   </body>
 </html>