Toggle selected button style (#3)

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'))
 }

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;