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-06-12 17:45:00 +02:00
parent 797ea74a07
commit f9792f18e6
28 changed files with 136 additions and 841 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
website/.gitignore vendored
View File

@@ -1 +0,0 @@
_out

2
website/README.md
View File

@@ -1,2 +0,0 @@
Run `./generate.py` to create the `_out` folder.
on macOS: `open _out/index.html`

1
website/assets/github.svg
View File

@@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 829 B

BIN
website/assets/logo.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
website/assets/london.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 288 KiB

50
website/assets/pricing.json
View File

@@ -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"
}
]

384
website/assets/style.css
View File

@@ -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
website/assets/x.svg
View File

@@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 348 B

2
website/blocks/main.md
View File

@@ -1,2 +0,0 @@

132
website/blocks/map_howto.html
View File

@@ -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>&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;
&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="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',
center: [-0.114, 51.506],
zoom: 14.2,
container: 'map'
})
&lt;/script&gt;
</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
website/blocks/support_plans.html
View File

@@ -1 +0,0 @@
<div id="support-plans-slider"></div>

70
website/generate.py
View File

@@ -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()

51
website/template.html
View File

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

13
website/template_static.html
View File

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

52
website/assets/support_plans.js → website_astro/public/scripts/donate.js
View File

@@ -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 priceNumbers = pricingList.map(i => i.price)
const sliderDiv = document.getElementById('support-plans-slider') const sliderDiv = document.getElementById('support-plans-slider')

7
website_astro/src/components/Donate.astro
View File

@@ -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> <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> <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
View 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
View 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
View 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
View 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
View 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
View 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).

2
website_astro/src/content/pricing.md → website_astro/src/content/index/donate.md
View File

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

2
website_astro/src/layouts/Layout.astro
View File

@@ -28,7 +28,7 @@ import '../styles/global.css'
<!-- <meta property="og:image" content="" />--> <!-- <meta property="og:image" content="" />-->
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" /> <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" />--> <!--<link href="https://unpkg.com/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet" />-->
</head> </head>

112
website_astro/src/pages/_howto_use.astro
View File

@@ -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>&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;
&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="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',
center: [-0.114, 51.506],
zoom: 14.2,
container: 'map'
})
&lt;/script&gt;
</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
View 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>

10
website_astro/src/pages/index.astro
View File

@@ -4,18 +4,16 @@ import Map from '../components/Map.astro'
import Logo from '../components/Logo.astro' import Logo from '../components/Logo.astro'
import Donate from '../components/Donate.astro' import Donate from '../components/Donate.astro'
import { Content as WhatIs } from '../content/index/whatis.md' import { Content as WhatisText } from '../content/index/whatis.md'
import { Content as Rest } from '../content/index/rest.md' import { Content as RestText } from '../content/index/rest.md'
--- ---
<Layout title="OpenFreeMap"> <Layout title="OpenFreeMap">
<Logo /> <Logo />
<WhatIs /> <WhatisText />
<Map /> <Map />
<Donate /> <Donate />
<Rest /> <RestText />
<!--<script src="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.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/components/prism-core.min.js"></script>-->
<!--<script src="https://unpkg.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>--> <!--<script src="https://unpkg.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>-->

18
website_astro/src/styles/global.css
View File

@@ -153,18 +153,18 @@ p {
} }
pre { pre {
background: #efefef; /*background: #efefef;*/
font-size: 14px !important; font-size: 14px;
max-width: 600px; max-width: 600px;
margin: 0 auto 0.6em !important; margin: 0 auto 0.6em;
overflow: scroll; /*overflow: scroll;*/
font-weight: bold; /*font-weight: bold;*/
} }
code { /*code {*/
font-family: 'Nimbus Mono PS', 'Courier New', monospace !important; /* font-family: 'Nimbus Mono PS', 'Courier New', monospace !important;*/
background: #efefef; /* background: #efefef;*/
} /*}*/
#map-container { #map-container {
width: 100%; width: 100%;