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

website

Browse Source
This commit is contained in:
Zsolt Ero
2024-01-19 22:55:23 +01:00
parent c800337fb3
commit ff92c7c3ce
2 changed files with 15 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
website/assets/style.css
View File

@@ -139,21 +139,16 @@ p {
pre { pre {
background: #efefef; background: #efefef;
font-size: 14px !important;
max-width: 800px; max-width: 600px;
margin: 0 auto 0.6em !important; margin: 0 auto 0.6em !important;
font-size: 14px; overflow: scroll;
font-weight: 700;
} }
code { code {
font-family: 'Nimbus Mono PS', 'Courier New', monospace; font-family: 'Nimbus Mono PS', 'Courier New', monospace !important;
font-weight: 400;
background: #efefef; background: #efefef;
word-break: break-word;
}
#style-url-code span {
white-space: nowrap;
} }
#map-container { #map-container {
@@ -175,7 +170,7 @@ code {
cursor: pointer; cursor: pointer;
} }
button { .btn {
border: 0; border: 0;
border-radius: 0.25rem; border-radius: 0.25rem;
background: #2f5f8b; background: #2f5f8b;
@@ -184,7 +179,7 @@ button {
white-space: nowrap; white-space: nowrap;
text-decoration: none; text-decoration: none;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
margin: 0.25rem; margin-right: 0.5rem;
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -197,7 +192,7 @@ button {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
button:hover { .btn:hover {
background: #4892d9; background: #4892d9;
} }
/*button:focus { }*/ /*button:focus { }*/

18
website/blocks/map_howto.html
View File

@@ -4,17 +4,13 @@
<p>Choose a style:</p> <p>Choose a style:</p>
<div class="button-container"> <div class="button-container">
<button onclick="selectStyle('bright')">Bright</button> <button onclick="selectStyle('bright')" class="btn">Bright</button>
<button onclick="selectStyle('liberty')">Liberty</button> <button onclick="selectStyle('liberty')" class="btn">Liberty</button>
<button onclick="selectStyle('positron')">Positron</button> <button onclick="selectStyle('positron')" class="btn">Positron</button>
</div> </div>
<p style="margin-bottom: 2em"> <p>Use the following style in a MapLibre map:</p>
Use the following style in a MapLibre map: <pre><code class="lang-uri">https://tiles.openfreemap.org/styles/liberty</code></pre>
<code id="style-url-code">
<span>https://tiles.openfreemap.org</span><span>/styles</span><span>/liberty</span>
</code>
</p>
<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>
@@ -25,14 +21,14 @@
<code>&lt;head&gt;</code>. If you are using npm, you can install 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="language-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;
&lt;link &lt;link
href=&quot;https://unpkg.com/maplibre-gl/dist/maplibre-gl.css&quot; href=&quot;https://unpkg.com/maplibre-gl/dist/maplibre-gl.css&quot;
rel=&quot;stylesheet&quot; rel=&quot;stylesheet&quot;
/&gt; /&gt;
</code></pre> </code></pre>
<p>Initialize it to a div like this:</p> <p>Initialize it to a div like this:</p>
<pre><code class="language-html">&lt;div id=&quot;map&quot; style=&quot;width: 100%; height: 500px&quot;&gt;&lt;/div&gt; <pre><code class="lang-html">&lt;div id=&quot;map&quot; style=&quot;width: 100%; height: 500px&quot;&gt;&lt;/div&gt;
&lt;script&gt; &lt;script&gt;
const map = new maplibregl.Map({ const map = new maplibregl.Map({
style: 'https://tiles.openfreemap.org/styles/liberty', style: 'https://tiles.openfreemap.org/styles/liberty',