Toggle selected button style (#3)

hyperknot · Jan 19, 2024 · 4b2de6a · 4b2de6a
1 parent 2fc98de
commit 4b2de6a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/website/assets/map_howto.js b/website/assets/map_howto.js
@@ -40,14 +40,22 @@ const mapDiv = document.getElementById('map-container')
 
 initMap()
 
-function selectStyle(style) {
-  // initMap()
+function selectStyle(event, style) {
+  toggleButtonSelection(event.target)
 
   const styleUrl = 'https://tiles.openfreemap.org/styles/' + style
   map.setStyle(styleUrl)
   map.setPitch(0)
   map.setBearing(0)
+  map.setZoom(12.5)
 
-  const spans = document.querySelectorAll('#style-url-code span')
-  spans[2].innerText = '/' + style
+  document.getElementById('style-url-code').innerText = styleUrl
+}
+
+function toggleButtonSelection(clickedButton) {
+  clickedButton.classList.add('selected')
+
+  Array.from(clickedButton.parentElement.children)
+    .filter(child => child !== clickedButton)
+    .forEach(button => button.classList.remove('selected'))
 }
diff --git a/website/assets/style.css b/website/assets/style.css
@@ -185,6 +185,10 @@ code {
   align-items: center;
 }
 
+.btn.selected {
+  background: #4892d9;
+}
+
 .button-container {
   margin: 0 auto 0.6em;
   max-width: 600px;

diff --git a/website/blocks/map_howto.html b/website/blocks/map_howto.html
@@ -4,21 +4,21 @@
 
 <p>Choose a style:</p>
 <div class="button-container">
-  <button onclick="selectStyle('bright')" class="btn">Bright</button>
-  <button onclick="selectStyle('liberty')" class="btn">Liberty</button>
-  <button onclick="selectStyle('positron')" class="btn">Positron</button>
+  <button onclick="selectStyle(event, 'bright')" class="btn">Bright</button>
+  <button onclick="selectStyle(event, 'liberty')" class="btn selected">Liberty</button>
+  <button onclick="selectStyle(event, 'positron')" class="btn">Positron</button>
 </div>
 
 <p>Use the following style in a MapLibre map:</p>
-<pre><code class="lang-uri">https://tiles.openfreemap.org/styles/liberty</code></pre>
+<pre><code class="lang-uri" id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code></pre>
 
 <input type="checkbox" id="col1" class="col-chk" />
 <label for="col1" class="col-lbl">How to load MapLibre?</label>
 <div class="col-cnt">
   <p>
     Include
-    <a href="https://maplibre.org/maplibre-gl-js/docs/" target="_blank">MapLibre GL JS</a> in the
-    <code>&lt;head&gt;</code>. If you are using npm, you can install the
+    <a href="https://maplibre.org/maplibre-gl-js/docs/" target="_blank">MapLibre GL JS</a>
+    in the <code>&lt;head&gt;</code>. If you are using npm, you can install the
     <code>maplibre-gl</code> package. Make sure to import the CSS as well.
   </p>
   <pre><code class="lang-html">&lt;script src=&quot;https://unpkg.com/maplibre-gl/dist/maplibre-gl.js&quot;&gt;&lt;/script&gt;