Add toggle for auto map-centering

public/assets/css/style.css

@@ -5,6 +5,7 @@
   margin: 0;
   box-sizing: border-box;
   pointer-events: none;
+  display: none;
 }
 
 body {
@@ -488,11 +489,11 @@ input#content-visibility-toggle {
   display: none;
 }
 
-#toggle-firing-arc-vis input {
+#toggle-firing-arc-vis input, .opt-toggle input {
   display: none;
 }
 
-#toggle-firing-arc-vis label {
+#toggle-firing-arc-vis label, .opt-toggle label {
   display: block;
   background-color: #DDD;
   border: 1px solid #666;
@@ -503,19 +504,22 @@ input#content-visibility-toggle {
   user-select: none;
 }
 
-#toggle-firing-arc-vis label:hover {
+#toggle-firing-arc-vis label:hover, .opt-toggle label:hover {
   background-color: #CCC;
 }
 
-#toggle-firing-arc-vis input + label .visible {
+#toggle-firing-arc-vis input + label .visible,
+.opt-toggle input + label .on {
   display: none;
 }
 
-#toggle-firing-arc-vis input:checked + label .visible {
+#toggle-firing-arc-vis input:checked + label .visible,
+.opt-toggle input:checked + label .on {
   display: inline;
 }
 
-#toggle-firing-arc-vis input:checked + label .hidden {
+#toggle-firing-arc-vis input:checked + label .hidden,
+.opt-toggle input:checked + label .off {
   display: none;
 }
 

public/index.html

@@ -117,8 +117,18 @@
         </label>
       </div>
 
-      <div id="toggle-grid-vis">
-        <input type="checkbox" checked />
+      <div class="opt-toggle">
+        <input type="checkbox" id="toggle-grid-vis" checked />
+        <label for="toggle-grid-vis">
+          <span class="off">⬡</span><span class="on">⬢</span>
+        </label>
+      </div>
+
+      <div class="opt-toggle">
+        <input type="checkbox" id="auto-center-map" />
+        <label for="auto-center-map">
+          <span class="off">⦾</span><span class="on">⦿</span>
+        </label>
       </div>
 
       <div id="toggle-firing-arc-vis">