mirror of
https://github.com/hyperknot/openfreemap.git
synced 2026-05-21 14:02:15 +00:00
website
This commit is contained in:
Zsolt Ero
1
website/.gitignore
vendored
1
website/.gitignore
vendored
@@ -1 +0,0 @@
|
||||
_out
|
||||
@@ -1,2 +0,0 @@
|
||||
Run `./generate.py` to create the `_out` folder.
|
||||
on macOS: `open _out/index.html`
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="98" height="96"><path fill="#333" fill-rule="evenodd" d="M48.85 0C21.84 0 0 22 0 49.22 0 70.97 14 89.39 33.4 95.9c2.43.49 3.32-1.06 3.32-2.37 0-1.14-.08-5.05-.08-9.12-13.59 2.93-16.42-5.87-16.42-5.87-2.18-5.7-5.42-7.17-5.42-7.17-4.45-3.01.33-3.01.33-3.01 4.93.32 7.52 5.05 7.52 5.05 4.37 7.5 11.4 5.38 14.23 4.07.4-3.18 1.7-5.38 3.08-6.6-10.84-1.14-22.25-5.38-22.25-24.28 0-5.38 1.94-9.78 5.02-13.2-.49-1.22-2.19-6.28.48-13.04 0 0 4.13-1.3 13.43 5.05a46.97 46.97 0 0 1 12.21-1.63c4.13 0 8.33.57 12.22 1.63 9.3-6.35 13.42-5.05 13.42-5.05 2.67 6.76.97 11.82.49 13.04a18.9 18.9 0 0 1 5.01 13.2c0 18.9-11.4 23.06-22.32 24.28 1.78 1.55 3.32 4.48 3.32 9.13 0 6.6-.08 11.9-.08 13.52 0 1.3.89 2.86 3.31 2.37a49.18 49.18 0 0 0 33.4-46.7C97.72 22 75.8 0 48.86 0z" clip-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 829 B |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 288 KiB |
@@ -1,50 +0,0 @@
|
||||
[
|
||||
{
|
||||
"price": 10,
|
||||
"name": "Steel",
|
||||
"icon": "🗡️",
|
||||
"lm_url": "af5553c6-f5fe-4253-b5d5-eb5531f8dcdf"
|
||||
},
|
||||
{
|
||||
"price": 20,
|
||||
"name": "Bronze",
|
||||
"icon": "🗽",
|
||||
"lm_url": "9d2b0961-d8d2-4b10-94fc-5d7497baef40"
|
||||
},
|
||||
{
|
||||
"price": 40,
|
||||
"name": "Copper",
|
||||
"icon": "🎷",
|
||||
"lm_url": "76d47d46-9ffa-411c-b6c3-96dd491631bc"
|
||||
},
|
||||
{
|
||||
"price": 75,
|
||||
"name": "Silver",
|
||||
"icon": "🍴",
|
||||
"lm_url": "df45c1e6-49dc-4494-9bdf-071d85e254a5"
|
||||
},
|
||||
{
|
||||
"price": 150,
|
||||
"name": "Gold",
|
||||
"icon": "🏆",
|
||||
"lm_url": "30bf66e8-c9ff-4642-bb39-17a1dfe278f2"
|
||||
},
|
||||
{
|
||||
"price": 250,
|
||||
"name": "Platinum",
|
||||
"icon": "🛰",
|
||||
"lm_url": "c837df35-eb23-4206-a0b5-024a236077cb"
|
||||
},
|
||||
{
|
||||
"price": 500,
|
||||
"name": "Sapphire",
|
||||
"icon": "💍",
|
||||
"lm_url": "5e5f0b42-b885-4bb6-a981-642d1e40d9ac"
|
||||
},
|
||||
{
|
||||
"price": 1000,
|
||||
"name": "Diamond",
|
||||
"icon": "👑",
|
||||
"lm_url": "5c24c85b-cd08-42ff-9515-743e46f3e825"
|
||||
}
|
||||
]
|
||||
@@ -1,384 +0,0 @@
|
||||
/*
|
||||
Josh's Custom CSS Reset
|
||||
https://www.joshwcomeau.com/css/custom-css-reset/
|
||||
*/
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
img,
|
||||
picture,
|
||||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/* normalize.css */
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: 1.15;
|
||||
overflow: visible;
|
||||
text-transform: none;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/* --- start --- */
|
||||
|
||||
body {
|
||||
padding-bottom: 100px;
|
||||
|
||||
line-height: 1.5;
|
||||
font-size: 17px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
|
||||
font-weight: normal;
|
||||
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.static,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.col-lbl,
|
||||
p,
|
||||
.button-container,
|
||||
#support-plans-slider {
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.static {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.col-lbl {
|
||||
color: #333;
|
||||
max-width: 600px;
|
||||
margin: 1em auto 0.5em;
|
||||
line-height: 1.2;
|
||||
|
||||
font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro,
|
||||
sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p a {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 1px 0 #adc2ee;
|
||||
transition: box-shadow 200ms ease 0s;
|
||||
}
|
||||
|
||||
p a:hover {
|
||||
box-shadow: 0 2px 0 #adc2ee;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.icons {
|
||||
margin: 0 auto;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*.subtitle {*/
|
||||
/* text-align: center;*/
|
||||
/* font-style: italic;*/
|
||||
/* color: #333;*/
|
||||
/* margin-top: 1em;*/
|
||||
/*}*/
|
||||
|
||||
.footer {
|
||||
max-width: 600px;
|
||||
margin: 3em auto 0;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 600px;
|
||||
margin: 0 auto 0.6em;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #efefef;
|
||||
font-size: 14px !important;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 0.6em !important;
|
||||
overflow: scroll;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'Nimbus Mono PS', 'Courier New', monospace !important;
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
#map-container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#mapbg-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-image: url('berlin.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
transition: opacity 3s;
|
||||
}
|
||||
|
||||
.mapbg-attrib {
|
||||
font:
|
||||
12px / 20px Helvetica Neue,
|
||||
Arial,
|
||||
Helvetica,
|
||||
sans-serif;
|
||||
background-color: hsla(0, 0%, 100%, 0.5);
|
||||
padding: 0 5px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mapbg-attrib a {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mapbg-attrib a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 0;
|
||||
border-radius: 0.25rem;
|
||||
background: #2f5f8b;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn.selected {
|
||||
background: #4892d9;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin: 0 auto 0.6em;
|
||||
max-width: 600px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #4892d9;
|
||||
}
|
||||
/*button:focus { }*/
|
||||
/*button:active { }*/
|
||||
|
||||
.col-lbl {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.col-chk {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.col-lbl:before {
|
||||
content: '►';
|
||||
margin-right: 1em;
|
||||
color: #555;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.col-cnt {
|
||||
display: none;
|
||||
margin: 1em 0 2em;
|
||||
}
|
||||
|
||||
.col-chk:checked ~ .col-cnt {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.col-chk:checked ~ .col-lbl:before {
|
||||
content: '▼';
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background-color: #555;
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
#support-plans-slider {
|
||||
max-width: 600px;
|
||||
margin: 200px auto 150px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
#support-plans-slider {
|
||||
max-width: 98%;
|
||||
margin: 170px auto 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-connects {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.noUi-value {
|
||||
line-height: 0;
|
||||
margin-top: 32px;
|
||||
font-size: 30px;
|
||||
transition: font-size 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.noUi-value.active {
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
.noUi-marker-horizontal.noUi-marker-large {
|
||||
height: 5px;
|
||||
}
|
||||
.noUi-marker-horizontal.noUi-marker {
|
||||
margin-left: 0;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.noUi-tooltip {
|
||||
border-color: #ccc;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.noUi-tooltip.first {
|
||||
left: 0;
|
||||
transform: unset;
|
||||
}
|
||||
|
||||
.noUi-tooltip.last {
|
||||
right: 0;
|
||||
left: unset;
|
||||
transform: unset;
|
||||
}
|
||||
|
||||
.plan-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.plan-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05rem;
|
||||
font-size: 15px;
|
||||
|
||||
border-radius: 20px;
|
||||
padding: 6px 16px;
|
||||
margin-top: 15px;
|
||||
|
||||
background: linear-gradient(32deg, #03a9f4, transparent) #f441a5;
|
||||
transition: background-color 1s;
|
||||
}
|
||||
|
||||
.plan-link:hover,
|
||||
.plan-link:focus {
|
||||
background-color: #fdb900;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
body {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.static,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.col-lbl,
|
||||
p,
|
||||
.button-container,
|
||||
#support-plans-slider {
|
||||
max-width: 100%;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#map-container {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1227" fill="none"><path fill="#333" d="M714.16 519.28 1160.9 0h-105.86l-387.9 450.89L357.34 0H0l468.5 681.82L0 1226.37h105.87l409.62-476.15 327.18 476.15H1200L714.14 519.28h.02Zm-145 168.55-47.46-67.9L144 79.7h162.6l304.8 436 47.47 67.89 396.2 566.72h-162.6L569.16 687.85v-.02Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 348 B |
@@ -1,2 +0,0 @@
|
||||
|
||||
|
||||
@@ -1,132 +0,0 @@
|
||||
<div id="map-container">
|
||||
<div id="mapbg-image">
|
||||
<div class="mapbg-attrib">
|
||||
<a href="https://openfreemap.org" target="_blank">OpenFreeMap</a>
|
||||
<a href="https://www.openmaptiles.org/" target="_blank">© OpenMapTiles</a> Data from
|
||||
<a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Choose a style:</p>
|
||||
<div class="button-container">
|
||||
<button onclick="selectStyle(event, '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, 'liberty-3d')" class="btn">3D</button>
|
||||
</div>
|
||||
|
||||
<p>Use the following style in a MapLibre map:</p>
|
||||
<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><head></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"><script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
|
||||
<link
|
||||
href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</code></pre>
|
||||
<p>Initialize it to a div like this:</p>
|
||||
<pre><code class="lang-html"><div id="map" style="width: 100%; height: 500px"></div>
|
||||
<script>
|
||||
const map = new maplibregl.Map({
|
||||
style: 'https://tiles.openfreemap.org/styles/liberty',
|
||||
center: [-0.114, 51.506],
|
||||
zoom: 14.2,
|
||||
container: 'map'
|
||||
})
|
||||
</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="col2" class="col-chk" />
|
||||
<label for="col2" class="col-lbl">Using Mapbox?</label>
|
||||
<div class="col-cnt">
|
||||
<p>
|
||||
If you are currently using Mapbox, please change your libraries to
|
||||
<a href="https://maplibre.org/maplibre-gl-js/docs/" target="_blank">MapLibre GL JS</a>.
|
||||
MapLibre is based on the last open-source version of Mapbox GL JS before it went
|
||||
closed-source. Migrating should be as simple as changing the libraries, as long as you are not
|
||||
using any features specific to the 2.x or later releases.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="col3" class="col-chk" />
|
||||
<label for="col3" class="col-lbl">Using Leaflet?</label>
|
||||
<div class="col-cnt">
|
||||
<p>A Leaflet-based snippet is coming soon.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="col4" class="col-chk" />
|
||||
<label for="col4" class="col-lbl">Mobile Apps</label>
|
||||
<div class="col-cnt">
|
||||
<p>
|
||||
For mobile apps, you can use the same styles with
|
||||
<a href="https://maplibre.org/" target="_blank">MapLibre Native</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="col6" class="col-chk" />
|
||||
<label for="col6" class="col-lbl">Custom styles</label>
|
||||
<div class="col-cnt">
|
||||
<p>
|
||||
You can customize the styles using the
|
||||
<a href="https://maputnik.github.io/" target="_blank">Maputnik</a> editor. For example, you
|
||||
can remove labels, POIs, or change colors.
|
||||
</p>
|
||||
<p>
|
||||
When you use a customized style, you need to host the style JSON yourself and use its URL in
|
||||
MapLibre.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
href="https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/bright"
|
||||
target="_blank"
|
||||
>Customize Bright</a
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
href="https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/liberty"
|
||||
target="_blank"
|
||||
>Customize Liberty</a
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
href="https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/positron"
|
||||
target="_blank"
|
||||
>Customize Positron</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="col5" class="col-chk" />
|
||||
<label for="col5" class="col-lbl">Self-hosting</label>
|
||||
<div class="col-cnt">
|
||||
<p>
|
||||
You can also download our processed planet MBTiles and Btrfs images if you want to self-host
|
||||
yourself. Details can be found on
|
||||
<a href="https://github.com/hyperknot/openfreemap" target="_blank">GitHub</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="pricing"></div>
|
||||
@@ -1 +0,0 @@
|
||||
<div id="support-plans-slider"></div>
|
||||
@@ -1,70 +0,0 @@
|
||||
#!/usr/bin/env python
|
||||
import json
|
||||
import shutil
|
||||
from pathlib import Path
|
||||
|
||||
import marko
|
||||
|
||||
|
||||
OUT_DIR = Path('_out')
|
||||
ASSETS_DIR = Path('assets')
|
||||
|
||||
|
||||
def generate():
|
||||
shutil.rmtree(OUT_DIR, ignore_errors=True)
|
||||
OUT_DIR.mkdir()
|
||||
|
||||
template = open('template.html').read()
|
||||
|
||||
main_md = open('blocks/main.md').read()
|
||||
main_html = marko.convert(main_md)
|
||||
|
||||
index_html = template.replace('{main}', main_html)
|
||||
|
||||
map_howto = open('blocks/map_howto.html').read()
|
||||
index_html = index_html.replace('<!--map_howto-->', map_howto)
|
||||
|
||||
support_plans = open('blocks/support_plans.html').read()
|
||||
index_html = index_html.replace('<!--support_plans-->', support_plans)
|
||||
|
||||
open(OUT_DIR / 'index.html', 'w').write(index_html)
|
||||
|
||||
pricing_json = json.load(open('assets/pricing.json'))
|
||||
support_plans_js = open('assets/support_plans.js').read()
|
||||
support_plans_js = support_plans_js.replace(
|
||||
"'__PRICING_JSON__'", json.dumps(pricing_json, ensure_ascii=False)
|
||||
)
|
||||
open(OUT_DIR / 'support_plans.js', 'w').write(support_plans_js)
|
||||
|
||||
make_static_page('privacy', 'Privacy Policy')
|
||||
make_static_page('tos', 'Terms of Services')
|
||||
copy_assets()
|
||||
|
||||
|
||||
def copy_assets():
|
||||
for file in [
|
||||
'style.css',
|
||||
'map_howto.js',
|
||||
'logo.jpg',
|
||||
'favicon.ico',
|
||||
'github.svg',
|
||||
'x.svg',
|
||||
'berlin.webp',
|
||||
]:
|
||||
shutil.copyfile(ASSETS_DIR / file, OUT_DIR / file)
|
||||
|
||||
|
||||
def make_static_page(page_str, title):
|
||||
page_md = open(f'blocks/{page_str}.md').read()
|
||||
page_html = marko.convert(page_md)
|
||||
|
||||
template = open('template_static.html').read()
|
||||
template = template.replace('{main}', page_html)
|
||||
template = template.replace('{title}', title)
|
||||
|
||||
with open(OUT_DIR / f'{page_str}.html', 'w') as fp:
|
||||
fp.write(template)
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
generate()
|
||||
@@ -1,51 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>OpenFreeMap</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Open and free custom maps for your website and apps, based on OpenStreetMap."
|
||||
/>
|
||||
|
||||
<!-- <meta property="og:title" content="" />-->
|
||||
<!-- <meta property="og:type" content="" />-->
|
||||
<!-- <meta property="og:url" content="" />-->
|
||||
<!-- <meta property="og:image" content="" />-->
|
||||
|
||||
<!-- <link rel="icon" href="/favicon.ico" sizes="any" />-->
|
||||
|
||||
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img src="logo.jpg" alt="logo" height="200" class="logo" />
|
||||
<h1>OpenFreeMap</h1>
|
||||
<div class="icons">
|
||||
<a href="https://github.com/hyperknot/openfreemap" target="_blank"
|
||||
><img src="github.svg" alt="github" height="28"
|
||||
/></a>
|
||||
<a href="https://x.com/hyperknot" target="_blank"><img src="x.svg" alt="x" height="28" /></a>
|
||||
</div>
|
||||
|
||||
{main}
|
||||
|
||||
<div class="footer">
|
||||
<a href="privacy">Privacy Policy</a>
|
||||
<a href="tos">Terms of Service</a>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
|
||||
<script src="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.js"></script>
|
||||
|
||||
<script src="map_howto.js"></script>
|
||||
<script src="support_plans.js"></script>
|
||||
|
||||
<script src="https://unpkg.com/prismjs@1.29.0/components/prism-core.min.js"></script>
|
||||
<script src="https://unpkg.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,13 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{title}</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="static">{main}</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +1,54 @@
|
||||
const pricingList = '__PRICING_JSON__'
|
||||
const pricingList = [
|
||||
{
|
||||
price: 10,
|
||||
name: 'Steel',
|
||||
icon: '🗡️',
|
||||
lm_url: 'af5553c6-f5fe-4253-b5d5-eb5531f8dcdf',
|
||||
},
|
||||
{
|
||||
price: 20,
|
||||
name: 'Bronze',
|
||||
icon: '🗽',
|
||||
lm_url: '9d2b0961-d8d2-4b10-94fc-5d7497baef40',
|
||||
},
|
||||
{
|
||||
price: 40,
|
||||
name: 'Copper',
|
||||
icon: '🎷',
|
||||
lm_url: '76d47d46-9ffa-411c-b6c3-96dd491631bc',
|
||||
},
|
||||
{
|
||||
price: 75,
|
||||
name: 'Silver',
|
||||
icon: '🍴',
|
||||
lm_url: 'df45c1e6-49dc-4494-9bdf-071d85e254a5',
|
||||
},
|
||||
{
|
||||
price: 150,
|
||||
name: 'Gold',
|
||||
icon: '🏆',
|
||||
lm_url: '30bf66e8-c9ff-4642-bb39-17a1dfe278f2',
|
||||
},
|
||||
{
|
||||
price: 250,
|
||||
name: 'Platinum',
|
||||
icon: '🛰',
|
||||
lm_url: 'c837df35-eb23-4206-a0b5-024a236077cb',
|
||||
},
|
||||
{
|
||||
price: 500,
|
||||
name: 'Sapphire',
|
||||
icon: '💍',
|
||||
lm_url: '5e5f0b42-b885-4bb6-a981-642d1e40d9ac',
|
||||
},
|
||||
{
|
||||
price: 1000,
|
||||
name: 'Diamond',
|
||||
icon: '👑',
|
||||
lm_url: '5c24c85b-cd08-42ff-9515-743e46f3e825',
|
||||
},
|
||||
]
|
||||
|
||||
const priceNumbers = pricingList.map(i => i.price)
|
||||
|
||||
const sliderDiv = document.getElementById('support-plans-slider')
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
import { Content as Pricing } from '../content/pricing.md'
|
||||
import { Content as DonateText } from '../content/index/donate.md'
|
||||
---
|
||||
|
||||
<h2>How can I donate or support this project?</h2>
|
||||
@@ -10,6 +10,7 @@ import { Content as Pricing } from '../content/pricing.md'
|
||||
|
||||
<div id="support-plans-slider"></div>
|
||||
|
||||
<Pricing />
|
||||
<DonateText />
|
||||
|
||||
<!--<script src="support_plans.js"></script>-->
|
||||
<script is:inline src="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.js"></script>
|
||||
<script is:inline src="/scripts/donate.js"></script>
|
||||
|
||||
11
website_astro/src/content/how_to_use/custom_styles.md
Normal file
11
website_astro/src/content/how_to_use/custom_styles.md
Normal file
@@ -0,0 +1,11 @@
|
||||
## Custom styles
|
||||
|
||||
You can customize the styles using the [Maputnik](https://maputnik.github.io/) editor. For example, you can remove labels, POIs, or change colors.
|
||||
|
||||
When you use a customized style, you need to host the style JSON yourself and use its URL in MapLibre.
|
||||
|
||||
[Customize Bright](https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/bright)
|
||||
|
||||
[Customize Liberty](https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/liberty)
|
||||
|
||||
[Customize Positron](https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/positron)
|
||||
3
website_astro/src/content/how_to_use/leaflet.md
Normal file
3
website_astro/src/content/how_to_use/leaflet.md
Normal file
@@ -0,0 +1,3 @@
|
||||
## Using Leaflet?
|
||||
|
||||
A Leaflet-based snippet is coming soon.
|
||||
3
website_astro/src/content/how_to_use/mapbox.md
Normal file
3
website_astro/src/content/how_to_use/mapbox.md
Normal file
@@ -0,0 +1,3 @@
|
||||
## Using Mapbox?
|
||||
|
||||
If you are currently using Mapbox, please change your libraries to [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/). MapLibre is based on the last open-source version of Mapbox GL JS before it went closed-source. Migrating should be as simple as changing the libraries, as long as you are not using any features specific to the 2.x or later releases.
|
||||
22
website_astro/src/content/how_to_use/maplibre.md
Normal file
22
website_astro/src/content/how_to_use/maplibre.md
Normal file
@@ -0,0 +1,22 @@
|
||||
## How to load MapLibre?
|
||||
|
||||
Include [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) in the `<head>`. If you are using npm, you can install the `maplibre-gl` package. Make sure to import the CSS as well.
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
|
||||
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
|
||||
```
|
||||
|
||||
Initialize it to a div like this:
|
||||
|
||||
```html
|
||||
<div id="map" style="width: 100%; height: 500px"></div>
|
||||
<script>
|
||||
const map = new maplibregl.Map({
|
||||
style: 'https://tiles.openfreemap.org/styles/liberty',
|
||||
center: [-0.114, 51.506],
|
||||
zoom: 14.2,
|
||||
container: 'map',
|
||||
})
|
||||
</script>
|
||||
```
|
||||
3
website_astro/src/content/how_to_use/mobile.md
Normal file
3
website_astro/src/content/how_to_use/mobile.md
Normal file
@@ -0,0 +1,3 @@
|
||||
## Mobile Apps
|
||||
|
||||
For mobile apps, you can use the same styles with [MapLibre Native](https://maplibre.org/).
|
||||
3
website_astro/src/content/how_to_use/self_hosting.md
Normal file
3
website_astro/src/content/how_to_use/self_hosting.md
Normal file
@@ -0,0 +1,3 @@
|
||||
## Self-hosting
|
||||
|
||||
You can also download our processed planet MBTiles and Btrfs images if you want to self-host yourself. Details can be found on [GitHub](https://github.com/hyperknot/openfreemap).
|
||||
@@ -4,4 +4,4 @@ If we ever receive a **Diamond** level supporter, we'll put their logo on this p
|
||||
|
||||
When subscribing to a support plan, you receive an invoice for each of your payments.
|
||||
|
||||
Note: if you want to make a single donation, feel free to cancel after the first payment. However, please understand that the nature of this project needs recurring donations to cover the server costs.
|
||||
Note: if you want to make a single donation, feel free to cancel after the first payment. However, please understand that the nature of this project needs recurring donations to cover the server costs.
|
||||
@@ -28,7 +28,7 @@ import '../styles/global.css'
|
||||
<!-- <meta property="og:image" content="" />-->
|
||||
|
||||
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
|
||||
<!--<link href="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.css" rel="stylesheet" />-->
|
||||
<link href="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.css" rel="stylesheet" />
|
||||
<!--<link href="https://unpkg.com/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet" />-->
|
||||
</head>
|
||||
|
||||
|
||||
@@ -1,112 +0,0 @@
|
||||
<h1>How to use OpenFreeMap in my website or app</h1>
|
||||
|
||||
|
||||
<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><head></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"><script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
|
||||
<link
|
||||
href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</code></pre>
|
||||
<p>Initialize it to a div like this:</p>
|
||||
<pre><code class="lang-html"><div id="map" style="width: 100%; height: 500px"></div>
|
||||
<script>
|
||||
const map = new maplibregl.Map({
|
||||
style: 'https://tiles.openfreemap.org/styles/liberty',
|
||||
center: [-0.114, 51.506],
|
||||
zoom: 14.2,
|
||||
container: 'map'
|
||||
})
|
||||
</script>
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="col2" class="col-chk" />
|
||||
<label for="col2" class="col-lbl">Using Mapbox?</label>
|
||||
<div class="col-cnt">
|
||||
<p>
|
||||
If you are currently using Mapbox, please change your libraries to
|
||||
<a href="https://maplibre.org/maplibre-gl-js/docs/" target="_blank">MapLibre GL JS</a>.
|
||||
MapLibre is based on the last open-source version of Mapbox GL JS before it went
|
||||
closed-source. Migrating should be as simple as changing the libraries, as long as you are not
|
||||
using any features specific to the 2.x or later releases.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="col3" class="col-chk" />
|
||||
<label for="col3" class="col-lbl">Using Leaflet?</label>
|
||||
<div class="col-cnt">
|
||||
<p>A Leaflet-based snippet is coming soon.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="col4" class="col-chk" />
|
||||
<label for="col4" class="col-lbl">Mobile Apps</label>
|
||||
<div class="col-cnt">
|
||||
<p>
|
||||
For mobile apps, you can use the same styles with
|
||||
<a href="https://maplibre.org/" target="_blank">MapLibre Native</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="col6" class="col-chk" />
|
||||
<label for="col6" class="col-lbl">Custom styles</label>
|
||||
<div class="col-cnt">
|
||||
<p>
|
||||
You can customize the styles using the
|
||||
<a href="https://maputnik.github.io/" target="_blank">Maputnik</a> editor. For example, you
|
||||
can remove labels, POIs, or change colors.
|
||||
</p>
|
||||
<p>
|
||||
When you use a customized style, you need to host the style JSON yourself and use its URL in
|
||||
MapLibre.
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
href="https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/bright"
|
||||
target="_blank"
|
||||
>Customize Bright</a
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
href="https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/liberty"
|
||||
target="_blank"
|
||||
>Customize Liberty</a
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
<a
|
||||
href="https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/positron"
|
||||
target="_blank"
|
||||
>Customize Positron</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="col5" class="col-chk" />
|
||||
<label for="col5" class="col-lbl">Self-hosting</label>
|
||||
<div class="col-cnt">
|
||||
<p>
|
||||
You can also download our processed planet MBTiles and Btrfs images if you want to self-host
|
||||
yourself. Details can be found on
|
||||
<a href="https://github.com/hyperknot/openfreemap" target="_blank">GitHub</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
21
website_astro/src/pages/how_to_use.astro
Normal file
21
website_astro/src/pages/how_to_use.astro
Normal file
@@ -0,0 +1,21 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
|
||||
import { Content as MaplibreText } from '../content/how_to_use/maplibre.md'
|
||||
import { Content as MapboxText } from '../content/how_to_use/mapbox.md'
|
||||
import { Content as LeafletText } from '../content/how_to_use/leaflet.md'
|
||||
import { Content as MobileText } from '../content/how_to_use/mobile.md'
|
||||
import { Content as CustomStylesText } from '../content/how_to_use/custom_styles.md'
|
||||
---
|
||||
|
||||
<Layout title="How to use OpenFreeMap in your website or app">
|
||||
<h1>How to use OpenFreeMap in your website or app</h1>
|
||||
|
||||
<!--<input type="checkbox" id="col1" class="col-chk" />-->
|
||||
<!--<label for="col1" class="col-lbl">How to load MapLibre?</label>-->
|
||||
<MaplibreText />
|
||||
<MapboxText />
|
||||
<LeafletText />
|
||||
<MobileText />
|
||||
<CustomStylesText />
|
||||
</Layout>
|
||||
@@ -4,18 +4,16 @@ import Map from '../components/Map.astro'
|
||||
import Logo from '../components/Logo.astro'
|
||||
import Donate from '../components/Donate.astro'
|
||||
|
||||
import { Content as WhatIs } from '../content/index/whatis.md'
|
||||
import { Content as Rest } from '../content/index/rest.md'
|
||||
import { Content as WhatisText } from '../content/index/whatis.md'
|
||||
import { Content as RestText } from '../content/index/rest.md'
|
||||
---
|
||||
|
||||
<Layout title="OpenFreeMap">
|
||||
<Logo />
|
||||
<WhatIs />
|
||||
<WhatisText />
|
||||
<Map />
|
||||
<Donate />
|
||||
<Rest />
|
||||
|
||||
<!--<script src="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.js"></script>-->
|
||||
<RestText />
|
||||
|
||||
<!--<script src="https://unpkg.com/prismjs@1.29.0/components/prism-core.min.js"></script>-->
|
||||
<!--<script src="https://unpkg.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>-->
|
||||
|
||||
@@ -153,18 +153,18 @@ p {
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #efefef;
|
||||
font-size: 14px !important;
|
||||
/*background: #efefef;*/
|
||||
font-size: 14px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 0.6em !important;
|
||||
overflow: scroll;
|
||||
font-weight: bold;
|
||||
margin: 0 auto 0.6em;
|
||||
/*overflow: scroll;*/
|
||||
/*font-weight: bold;*/
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'Nimbus Mono PS', 'Courier New', monospace !important;
|
||||
background: #efefef;
|
||||
}
|
||||
/*code {*/
|
||||
/* font-family: 'Nimbus Mono PS', 'Courier New', monospace !important;*/
|
||||
/* background: #efefef;*/
|
||||
/*}*/
|
||||
|
||||
#map-container {
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user