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

18
website/blocks/map_howto.html
View File

@@ -4,17 +4,13 @@
<p>Choose a style:</p>
<div class="button-container">
<button onclick="selectStyle('bright')">Bright</button>
<button onclick="selectStyle('liberty')">Liberty</button>
<button onclick="selectStyle('positron')">Positron</button>
<button onclick="selectStyle('bright')" class="btn">Bright</button>
<button onclick="selectStyle('liberty')" class="btn">Liberty</button>
<button onclick="selectStyle('positron')" class="btn">Positron</button>
</div>
<p style="margin-bottom: 2em">
Use the following style in a MapLibre map:
<code id="style-url-code">
<span>https://tiles.openfreemap.org</span><span>/styles</span><span>/liberty</span>
</code>
</p>
<p>Use the following style in a MapLibre map:</p>
<pre><code class="lang-uri">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>
@@ -25,14 +21,14 @@
<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="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
href=&quot;https://unpkg.com/maplibre-gl/dist/maplibre-gl.css&quot;
rel=&quot;stylesheet&quot;
/&gt;
</code></pre>
<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;
const map = new maplibregl.Map({
style: 'https://tiles.openfreemap.org/styles/liberty',