sysadmin/openfreemap
1
0
Fork 0
mirror of https://github.com/hyperknot/openfreemap.git synced 2026-05-21 14:02:15 +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

12
website/blocks/map_howto.html
View File

@@ -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;