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;