sysadmin/openfreemap
1
0
Fork 0
mirror of https://github.com/hyperknot/openfreemap.git synced 2026-05-22 06:22:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Toggle selected button style (#3)

Browse Source
This commit is contained in:
Aphanite
2024-01-20 00:55:53 +01:00
committed by GitHub
parent 2fc98de48f
commit 4b2de6aeeb
3 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
website/assets/map_howto.js
View File

@@ -40,14 +40,22 @@ const mapDiv = document.getElementById('map-container')
initMap() initMap()
function selectStyle(style) { function selectStyle(event, style) {
// initMap() toggleButtonSelection(event.target)
const styleUrl = 'https://tiles.openfreemap.org/styles/' + style const styleUrl = 'https://tiles.openfreemap.org/styles/' + style
map.setStyle(styleUrl) map.setStyle(styleUrl)
map.setPitch(0) map.setPitch(0)
map.setBearing(0) map.setBearing(0)
map.setZoom(12.5)
const spans = document.querySelectorAll('#style-url-code span') document.getElementById('style-url-code').innerText = styleUrl
spans[2].innerText = '/' + style }
function toggleButtonSelection(clickedButton) {
clickedButton.classList.add('selected')
Array.from(clickedButton.parentElement.children)
.filter(child => child !== clickedButton)
.forEach(button => button.classList.remove('selected'))
} }

4
website/assets/style.css
View File

@@ -185,6 +185,10 @@ code {
align-items: center; align-items: center;
} }
.btn.selected {
background: #4892d9;
}
.button-container { .button-container {
margin: 0 auto 0.6em; margin: 0 auto 0.6em;
max-width: 600px; max-width: 600px;

12
website/blocks/map_howto.html
View File

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