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 work

Browse Source
This commit is contained in:
Zsolt Ero
2024-01-11 17:33:35 +01:00
parent 8d18554ec7
commit e37fc36ede
17 changed files with 345 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.github/workflows/static.yml vendored
View File

@@ -4,7 +4,7 @@ name: Deploy static content to Pages
on: on:
# Runs on pushes targeting the default branch # Runs on pushes targeting the default branch
push: push:
branches: ["main"] branches: ['main']
# Allows you to run this workflow manually from the Actions tab # Allows you to run this workflow manually from the Actions tab
workflow_dispatch: workflow_dispatch:
@@ -18,7 +18,7 @@ permissions:
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency: concurrency:
group: "pages" group: 'pages'
cancel-in-progress: false cancel-in-progress: false
jobs: jobs:

10
LICENSE.md
View File

@@ -4,21 +4,21 @@ The license of this project is [MIT](https://www.tldrlegal.com/license/mit-licen
Map data is from [OpenStreetMap](https://www.openstreetmap.org/copyright). Map data is from [OpenStreetMap](https://www.openstreetmap.org/copyright).
[OpenMapTiles](https://github.com/openmaptiles/openmaptiles) code is released under the [BSD 3-Clause License](https://tldrlegal.com/license/bsd-3-clause-license-(revised)), design under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). [LICENSE.md](https://github.com/openmaptiles/openmaptiles/blob/master/LICENSE.md). [OpenMapTiles](https://github.com/openmaptiles/openmaptiles) code is released under the [BSD 3-Clause License](<https://tldrlegal.com/license/bsd-3-clause-license-(revised)>), design under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). [LICENSE.md](https://github.com/openmaptiles/openmaptiles/blob/master/LICENSE.md).
### Styles ### Styles
#### Bright #### Bright
Fork from [openmaptiles/osm-bright-gl-style](https://github.com/openmaptiles/osm-bright-gl-style). The OSM Bright GL Style is derived from [Mapbox Open Styles](https://github.com/mapbox/mapbox-gl-styles). The OSM Bright GL Style’s code is released under the [BSD 3-Clause License](https://tldrlegal.com/license/bsd-3-clause-license-(revised)). The OSM Bright GL Style’s design is released under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). [LICENSE.md](https://github.com/openmaptiles/osm-bright-gl-style/blob/master/LICENSE.md). Fork from [openmaptiles/osm-bright-gl-style](https://github.com/openmaptiles/osm-bright-gl-style). The OSM Bright GL Style is derived from [Mapbox Open Styles](https://github.com/mapbox/mapbox-gl-styles). The OSM Bright GL Style’s code is released under the [BSD 3-Clause License](<https://tldrlegal.com/license/bsd-3-clause-license-(revised)>). The OSM Bright GL Style’s design is released under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). [LICENSE.md](https://github.com/openmaptiles/osm-bright-gl-style/blob/master/LICENSE.md).
#### Liberty #### Liberty
Fork from [maputnik/osm-liberty](https://github.com/maputnik/osm-liberty). OSM Liberty is a fork of OSM Bright. The OSM Bright GL Style is derived from [Mapbox Open Styles](https://github.com/mapbox/mapbox-gl-styles). The OSM Bright GL Style’s code is released under the [BSD 3-Clause License](https://tldrlegal.com/license/bsd-3-clause-license-(revised)). The OSM Bright GL Style’s design is released under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). [LICENSE.md](https://github.com/maputnik/osm-liberty/blob/gh-pages/LICENSE.md). Fork from [maputnik/osm-liberty](https://github.com/maputnik/osm-liberty). OSM Liberty is a fork of OSM Bright. The OSM Bright GL Style is derived from [Mapbox Open Styles](https://github.com/mapbox/mapbox-gl-styles). The OSM Bright GL Style’s code is released under the [BSD 3-Clause License](<https://tldrlegal.com/license/bsd-3-clause-license-(revised)>). The OSM Bright GL Style’s design is released under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). [LICENSE.md](https://github.com/maputnik/osm-liberty/blob/gh-pages/LICENSE.md).
#### Positron #### Positron
Fork from [openmaptiles/positron-gl-style](https://github.com/openmaptiles/positron-gl-style). The Positron GL Style is derived from [CartoDB Basemaps](https://github.com/CartoDB/CartoDB-basemaps) designed by Stamen and Paul Norman for CartoDB Inc., licensed under [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/). The Positron GL style’s code is released under the [BSD 3-Clause License](https://tldrlegal.com/license/bsd-3-clause-license-(revised)). The Positron GL Style’s design is released under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). [LICENSE.md](https://github.com/openmaptiles/positron-gl-style/blob/master/LICENSE.md). Fork from [openmaptiles/positron-gl-style](https://github.com/openmaptiles/positron-gl-style). The Positron GL Style is derived from [CartoDB Basemaps](https://github.com/CartoDB/CartoDB-basemaps) designed by Stamen and Paul Norman for CartoDB Inc., licensed under [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/). The Positron GL style’s code is released under the [BSD 3-Clause License](<https://tldrlegal.com/license/bsd-3-clause-license-(revised)>). The Positron GL Style’s design is released under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). [LICENSE.md](https://github.com/openmaptiles/positron-gl-style/blob/master/LICENSE.md).
### Fonts ### Fonts
@@ -38,8 +38,6 @@ The right arrow was derived from [Wikipedia](https://commons.wikimedia.org/wiki/
spritezero-cli is from [mapbox/spritezero-cli](https://github.com/mapbox/spritezero-cli), licensed [ISC](https://github.com/mapbox/spritezero-cli/blob/master/LICENSE.md). spritezero-cli is from [mapbox/spritezero-cli](https://github.com/mapbox/spritezero-cli), licensed [ISC](https://github.com/mapbox/spritezero-cli/blob/master/LICENSE.md).
--- ---
## Licence of this repo ## Licence of this repo

4
README.md
View File

@@ -1,9 +1,5 @@
# openfreemap # openfreemap
### License ### License
Licenses are listed in [LICENSE.md](LICENSE.md) Licenses are listed in [LICENSE.md](LICENSE.md)

1
docs/quick notes/fs_stats/ext4.md
View File

@@ -5,6 +5,7 @@ df -h mnt_rw
Filesystem Size Used Avail Use% Mounted on Filesystem Size Used Avail Use% Mounted on
/dev/loop0 1.4T 187G 1.2T 14% /dev/loop0 1.4T 187G 1.2T 14%
``` ```
``` ```
df -i mnt_rw df -i mnt_rw
Filesystem Inodes IUsed IFree IUse% Mounted on Filesystem Inodes IUsed IFree IUse% Mounted on

1
docs/quick notes/fs_stats/naive_mbutil_ext4.md
View File

@@ -6,6 +6,7 @@
Filesystem 1K-blocks Used Available Use% Mounted on Filesystem 1K-blocks Used Available Use% Mounted on
/dev/loop0 1,474,386,100 1,119,622,516 354,763,584 76% /dev/loop0 1,474,386,100 1,119,622,516 354,763,584 76%
``` ```
``` ```
Filesystem Inodes IUsed IFree IUse% Mounted on Filesystem Inodes IUsed IFree IUse% Mounted on
/dev/loop0 393,216,000 269,252,174 123,963,826 69% /dev/loop0 393,216,000 269,252,174 123,963,826 69%

2
docs/quick notes/http_benchmark.md
View File

@@ -18,8 +18,6 @@ Transfer/sec: 3.84GB
Super much overkill, we'd only need 125 MB/s for Gigabit connection and this is 3840 MB/s. Super much overkill, we'd only need 125 MB/s for Gigabit connection and this is 3840 MB/s.
Also max request time is super nice + no errors. Also max request time is super nice + no errors.
### wrk over network ### wrk over network
``` ```

2
lint.sh
View File

@@ -1,5 +1,7 @@
#!/usr/bin/env bash #!/usr/bin/env bash
prettier -w .
ruff check --fix . ruff check --fix .
ruff format . ruff format .

0
website/favicon.ico → website/assets/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 766 B

After

Width:  |  Height:  |  Size: 766 B

0
website/logo_512.png → website/assets/logo_512.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 309 KiB

After

Width:  |  Height:  |  Size: 309 KiB

34
website/style.css → website/assets/style.css
View File

@@ -2,17 +2,26 @@
Josh's Custom CSS Reset Josh's Custom CSS Reset
https://www.joshwcomeau.com/css/custom-css-reset/ https://www.joshwcomeau.com/css/custom-css-reset/
*/ */
*, *::before, *::after { *,
*::before,
*::after {
box-sizing: border-box; box-sizing: border-box;
} }
* { * {
margin: 0; margin: 0;
} }
img, picture, video, canvas, svg { img,
picture,
video,
canvas,
svg {
display: block; display: block;
max-width: 100%; max-width: 100%;
} }
input, button, textarea, select { input,
button,
textarea,
select {
font: inherit; font: inherit;
} }
@@ -31,14 +40,19 @@ body {
color: #000; color: #000;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
color: #555; color: #555;
max-width: 600px; max-width: 600px;
margin: 1em auto 0.5em; margin: 1em auto 0.5em;
line-height: 1.2; line-height: 1.2;
font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro,
font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif; sans-serif;
font-weight: 700; font-weight: 700;
} }
@@ -63,19 +77,19 @@ p {
pre { pre {
background: #efefef; background: #efefef;
max-width: 800px; max-width: 800px;
margin: 0 auto; margin: 0 auto 0.6em;
font-size: 14px; font-size: 14px;
} }
code { code {
font-family: 'Nimbus Mono PS', 'Courier New', monospace; font-family: 'Nimbus Mono PS', 'Courier New', monospace;
font-weight: 600; font-weight: 400;
background: #efefef; background: #efefef;
} }
#map { #map {
height: 500px;
width: 100%; width: 100%;
height: 500px;
margin-bottom: 2em;
} }

2
website/generate.py
View File

@@ -5,7 +5,6 @@ import marko
def generate(): def generate():
licenses = open('../LICENSE.md').read().split('---')[0] licenses = open('../LICENSE.md').read().split('---')[0]
map_html = open('map.html').read()
text_md = open('text.md').read() text_md = open('text.md').read()
text_md = text_md.replace('{licenses}', licenses) text_md = text_md.replace('{licenses}', licenses)
@@ -14,7 +13,6 @@ def generate():
template = open('template.html').read() template = open('template.html').read()
template = template.replace('{text}', text_html) template = template.replace('{text}', text_html)
template = template.replace('{map}', map_html)
open('index.html', 'w').write(template) open('index.html', 'w').write(template)

351
website/index.html
View File

@@ -1,136 +1,259 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OpenFreeMap</title> <title>OpenFreeMap</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="assets/style.css" />
<meta name="description" content="Open and free OpenStreetMap hosting"> <meta name="description" content="Open and free OpenStreetMap hosting" />
<meta property="og:title" content=""> <meta property="og:title" content="" />
<meta property="og:type" content=""> <meta property="og:type" content="" />
<meta property="og:url" content=""> <meta property="og:url" content="" />
<meta property="og:image" content=""> <meta property="og:image" content="" />
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/favicon.ico" sizes="any" />
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script> <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" /> <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
</head>
<body> <link href="https://unpkg.com/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet" />
<img src="logo_512.png" alt="logo" height="200" class="logo"> </head>
<h1>OpenFreeMap</h1>
<h2>What is this?</h2> <body>
<p>OpenFreeMap is an open and free OpenStreetMap tile hosting service.</p> <img src="assets/logo_512.png" alt="logo" height="200" class="logo" />
<p>It's truly free: there is no limit on the amount of map views or requests you can make or how you use your map. There is no registration page, user database, API keys nor cookies.</p> <h1>OpenFreeMap</h1>
<p>It's truly open source: everything, including the full production setup is on GitHub.</p> <h2>What is this?</h2>
<h2>Why is this important?</h2> <p>OpenFreeMap is an open and free OpenStreetMap tile hosting service.</p>
<p>OpenStreetMap is one of the most important collective projects in history. More than 2 million users have contributed to it over 19 years; 3 million edits are made each day.</p> <p>
<p>Unfortunately, when you want to use the map on your website or app, you need to look for a commercial map tile provider and hope your site doesn't get too popular, otherwise you might end up with a $10,000 bill in a single day, like Hoodmaps did <a href="https://twitter.com/levelsio/status/1730659933232730443">*</a>.</p> It's truly free: there is no limit on the amount of map views or requests you can make or how
<p>You can try self-hosting, but it requires a big server and a lot of time to get it right.</p> you use your map. There is no registration page, user database, API keys nor cookies.
<h2>Who is behind this project?</h2> </p>
<p>I'm Zsolt Ero (<a href="https://twitter.com/hyperknot">twitter</a>, <a href="https://blog.hyperknot.com/">blog</a>). I've created <a href="https://maphub.net/">MapHub</a> and I've been running map hosting in production for 8 years.</p> <p>It's truly open source: everything, including the full production setup is on GitHub.</p>
<h2>How can I use it?</h2> <h2>Why is this important?</h2>
<p>Include <a href="https://maplibre.org/maplibre-gl-js/docs/">MapLibre GL JS</a> in <code>&lt;head&gt;</code></p> <p>
<pre><code>&lt;script src=&quot;https://unpkg.com/maplibre-gl/dist/maplibre-gl.js&quot;&gt;&lt;/script&gt; OpenStreetMap is one of the most important collective projects in history. More than 2 million
users have contributed to it over 19 years; 3 million edits are made each day.
</p>
<p>
Unfortunately, when you want to use the map on your website or app, you need to look for a
commercial map tile provider and hope your site doesn't get too popular, otherwise you might
end up with a $10,000 bill in a single day, like Hoodmaps did
<a href="https://twitter.com/levelsio/status/1730659933232730443">*</a>.
</p>
<p>You can try self-hosting, but it requires a big server and a lot of time to get it right.</p>
<h2>Who is behind this project?</h2>
<p>
I'm Zsolt Ero (<a href="https://twitter.com/hyperknot">twitter</a>,
<a href="https://blog.hyperknot.com/">blog</a>). I've created
<a href="https://maphub.net/">MapHub</a> and I've been running map hosting in production for 8
years.
</p>
<h2>How can I use it?</h2>
<div id="map"></div>
<!--style_selector-->
<p>
Include <a href="https://maplibre.org/maplibre-gl-js/docs/">MapLibre GL JS</a> in
<code>&lt;head&gt;</code>
</p>
<pre><code>&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>And initialize it to a div, like this:</p> <p>And initialize it to a div, like this:</p>
<pre><code>&lt;div id=&quot;map&quot; style=&quot;width: 600px; height: 400px&quot;&gt;&lt;/div&gt; <pre><code>&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: &quot;https://tiles.openfreemap.org/styles/liberty&quot;, style: &#x27;https://tiles.openfreemap.org/styles/liberty&#x27;,
center: [-74.5, 40], center: [-0.114, 51.506],
zoom: 9, zoom: 14.2,
container: &quot;map&quot;, container: &#x27;map&#x27;
}); })
&lt;/script&gt; &lt;/script&gt;
</code></pre> </code></pre>
<p><div id="map"></div> <p>
If you've used Mapbox GL before, please migrate to MapLibre. It is based on the last
open-source version of Mapbox GL, before it went closed-source. A Leaflet based snippet is
coming soon.
</p>
<p>
For mobile apps, you can do the same with <a href="https://maplibre.org/">MapLibre Native.</a>
</p>
<p>
You can also download our processed planet MBTiles and BTRFS images if you want to self-host
yourself. Details are in the GitHub at
<a href="https://github.com/hyperknot/openfreemap">hyperknot/openfreemap</a>.
</p>
<h2>How can I donate or support this project?</h2>
<p>...</p>
<h2>How can I follow this project?</h2>
<p>
The main repo is <a href="https://github.com/hyperknot/openfreemap">hyperknot/openfreemap</a>
</p>
<p>
Styles are at
<a href="https://github.com/hyperknot/openfreemap-styles">hyperknot/openfreemap-styles</a>
</p>
<p>twitter: <a href="https://twitter.com/hyperknot">@hyperknot</a></p>
<p>twitter: <a href="https://twitter.com/OpenFreeMapOrg">@OpenFreeMapOrg</a></p>
<p>mastodon zsolt https://elk.zone/sigmoid.social/@hyperknot/followers</p>
<p>mastodon ofm TODO</p>
<h2>Is commercial usage allowed?</h2>
<p>Yes.</p>
<h2>Why did I make this?</h2>
<p>
Because I waited for years for someone to offer this service, but realised no one is going to
make it. So, I thought I might use my map hosting experience and do it.
</p>
<p>
I'll share more about the why in a blog post in the future, feel free to subscribe on the
links above.
</p>
<h2>How can this work? How can a one person project offer unlimited map hosting for free?</h2>
<p>
There is no technical reason why vector tile hosting should cost as much as it does today.
</p>
<p>
Vector tiles are just static files. OK, serving 300 million files is not easy, but at the end
of the day they are just files.
</p>
<p>
Financially, the plan is to keep buying Hetzner servers until they cover the bandwidth. I
believe it can work if enough people contribute. If this project helps you save your map
hosting costs, please consider our support plans!
</p>
<h2>What is the tech stack?</h2>
<p>
The map schema is <a href="https://github.com/openmaptiles/openmaptiles">OpenMapTiles</a>.
</p>
<p>
The tiles are generated by <a href="https://github.com/onthegomap/planetiler">Planetiler</a>.
</p>
<p>
There is no tile server running, only BTRFS partition images with 300 million hard linked
files.
</p>
<p>The server is nginx on Ubuntu.</p>
<p>There is no cloud, just dedicated servers on Hetzner.</p>
<p>Currently using Cloudflare, but it's designed so that it can be changed any time.</p>
<p>
Moreover, a lot of work is going into customising the styles at
<a href="https://github.com/hyperknot/openfreemap-styles">openfreemap-styles</a>.
</p>
<h2>What about PMTiles?</h2>
<p>I would have loved to use PMTiles, they are a brilliant idea!</p>
<p>
Unfortunately, making range requests in 80 GB files is just not working in production. They
are fine for &lt; 500 MB files, but have terrible latency and caching issues for full planet
datasets.
</p>
<h2>Attribution</h2>
<p>If you are using MapLibre, attributions are automatically added.</p>
<p>If you are using this in a printed media or video, please attribute:</p>
<p>
<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>
</p>
<p>You don't need to display the OpenFreeMap part, but it's nice if you do.</p>
<h2>Licenses</h2>
<p>
The license of this project is
<a href="https://www.tldrlegal.com/license/mit-license">MIT</a>.
</p>
<p>Map data is from <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>.</p>
<p>
<a href="https://github.com/openmaptiles/openmaptiles">OpenMapTiles</a> code is released under
the
<a href="https://tldrlegal.com/license/bsd-3-clause-license-(revised)">BSD 3-Clause License</a
>, design under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
<a href="https://github.com/openmaptiles/openmaptiles/blob/master/LICENSE.md">LICENSE.md</a>.
</p>
<h3>Styles</h3>
<h4>Bright</h4>
<p>
Fork from
<a href="https://github.com/openmaptiles/osm-bright-gl-style"
>openmaptiles/osm-bright-gl-style</a
>. The OSM Bright GL Style is derived from
<a href="https://github.com/mapbox/mapbox-gl-styles">Mapbox Open Styles</a>. The OSM Bright GL
Style’s code is released under the
<a href="https://tldrlegal.com/license/bsd-3-clause-license-(revised)">BSD 3-Clause License</a
>. The OSM Bright GL Style’s design is released under
<a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
<a href="https://github.com/openmaptiles/osm-bright-gl-style/blob/master/LICENSE.md"
>LICENSE.md</a
>.
</p>
<h4>Liberty</h4>
<p>
Fork from <a href="https://github.com/maputnik/osm-liberty">maputnik/osm-liberty</a>. OSM
Liberty is a fork of OSM Bright. The OSM Bright GL Style is derived from
<a href="https://github.com/mapbox/mapbox-gl-styles">Mapbox Open Styles</a>. The OSM Bright GL
Style’s code is released under the
<a href="https://tldrlegal.com/license/bsd-3-clause-license-(revised)">BSD 3-Clause License</a
>. The OSM Bright GL Style’s design is released under
<a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
<a href="https://github.com/maputnik/osm-liberty/blob/gh-pages/LICENSE.md">LICENSE.md</a>.
</p>
<h4>Positron</h4>
<p>
Fork from
<a href="https://github.com/openmaptiles/positron-gl-style">openmaptiles/positron-gl-style</a
>. The Positron GL Style is derived from
<a href="https://github.com/CartoDB/CartoDB-basemaps">CartoDB Basemaps</a> designed by Stamen
and Paul Norman for CartoDB Inc., licensed under
<a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. The Positron GL style’s
code is released under the
<a href="https://tldrlegal.com/license/bsd-3-clause-license-(revised)">BSD 3-Clause License</a
>. The Positron GL Style’s design is released under
<a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
<a href="https://github.com/openmaptiles/positron-gl-style/blob/master/LICENSE.md"
>LICENSE.md</a
>.
</p>
<h3>Fonts</h3>
<p>
<a href="https://www.google.com/get/noto/">Noto Sans</a> is released under the
<a href="https://openfontlicense.org/">SIL Open Font License, Version 1.1</a>
</p>
<h3><strong>Icons</strong></h3>
<p>
The <a href="https://github.com/mapbox/maki/blob/master/LICENSE.txt">Maki POI icon set</a> is
licensed under CC0 1.0 Universal.
</p>
<p>
The right arrow was derived from
<a href="https://commons.wikimedia.org/wiki/File:Arrowright.svg">Wikipedia</a>, it is public
domain.
</p>
<h3>Natural Earth</h3>
<p>
<a href="https://www.naturalearthdata.com/">Natural Earth</a> map data is in the public
domain.
</p>
<h3>Tools</h3>
<p>
spritezero-cli is from
<a href="https://github.com/mapbox/spritezero-cli">mapbox/spritezero-cli</a>, licensed
<a href="https://github.com/mapbox/spritezero-cli/blob/master/LICENSE.md">ISC</a>.
</p>
<script> <script src="map.js"></script>
const map = new maplibregl.Map({
style: "https://tiles.openfreemap.org/styles/liberty",
center: [-74.5, 40],
zoom: 9,
container: "map",
});
let nav = new maplibregl.NavigationControl({showCompass:false}); <script src="https://unpkg.com/prismjs@1.29.0/components/prism-core.min.js"></script>
map.addControl(nav, 'top-right'); <script src="https://unpkg.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
let marker = new maplibregl.Marker()
.setLngLat([30.5, 50.5])
.addTo(map);
</script>
</p>
<p>If you've used Mapbox GL before, please migrate to MapLibre. It is based on the last open-source version of Mapbox GL, before it went closed-source. A Leaflet based snippet is coming soon.</p>
<p>For mobile apps, you can do the same with <a href="https://maplibre.org/">MapLibre Native.</a></p>
<p>You can also download our processed planet MBTiles and BTRFS images if you want to self-host yourself. Details are in the GitHub at <a href="https://github.com/hyperknot/openfreemap">hyperknot/openfreemap</a>.</p>
<h2>How can I donate or support this project?</h2>
<p>...</p>
<h2>How can I follow this project?</h2>
<p>The main repo is <a href="https://github.com/hyperknot/openfreemap">hyperknot/openfreemap</a></p>
<p>Styles are at <a href="https://github.com/hyperknot/openfreemap-styles">hyperknot/openfreemap-styles</a></p>
<p>twitter: <a href="https://twitter.com/hyperknot">@hyperknot</a></p>
<p>twitter: <a href="https://twitter.com/OpenFreeMapOrg">@OpenFreeMapOrg</a></p>
<p>mastodon zsolt https://elk.zone/sigmoid.social/@hyperknot/followers</p>
<p>mastodon ofm TODO</p>
<h2>Is commercial usage allowed?</h2>
<p>Yes.</p>
<h2>Why did I make this?</h2>
<p>Because I waited for years for someone to offer this service, but realised no one is going to make it. So, I thought I might use my map hosting experience and do it.</p>
<p>I'll share more about the why in a blog post in the future, feel free to subscribe on the links above.</p>
<h2>How can this work? How can a one person project offer unlimited map hosting for free?</h2>
<p>There is no technical reason why vector tile hosting should cost as much as it does today. </p>
<p>Vector tiles are just static files. OK, serving 300 million files is not easy, but at the end of the day they are just files.</p>
<p>Financially, the plan is to keep buying Hetzner servers until they cover the bandwidth. I believe it can work if enough people contribute. If this project helps you save your map hosting costs, please consider our support plans!</p>
<h2>What is the tech stack?</h2>
<p>The map schema is <a href="https://github.com/openmaptiles/openmaptiles">OpenMapTiles</a>.</p>
<p>The tiles are generated by <a href="https://github.com/onthegomap/planetiler">Planetiler</a>.</p>
<p>There is no tile server running, only BTRFS partition images with 300 million hard linked files. </p>
<p>The server is nginx on Ubuntu.</p>
<p>There is no cloud, just dedicated servers on Hetzner.</p>
<p>Currently using Cloudflare, but it's designed so that it can be changed any time.</p>
<p>Moreover, a lot of work is going into customising the styles at <a href="https://github.com/hyperknot/openfreemap-styles">openfreemap-styles</a>.</p>
<h2>What about PMTiles?</h2>
<p>I would have loved to use PMTiles, they are a brilliant idea!</p>
<p>Unfortunately, making range requests in 80 GB files is just not working in production. They are fine for &lt; 500 MB files, but have terrible latency and caching issues for full planet datasets.</p>
<h2>Attribution</h2>
<p>If you are using MapLibre, attributions are automatically added.</p>
<p>If you are using this in a printed media or video, please attribute:</p>
<p><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></p>
<p>You don't need to display the OpenFreeMap part, but it's nice if you do.</p>
<h2>Licenses</h2>
<p>The license of this project is <a href="https://www.tldrlegal.com/license/mit-license">MIT</a>.</p>
<p>Map data is from <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>.</p>
<p><a href="https://github.com/openmaptiles/openmaptiles">OpenMapTiles</a> code is released under the <a href="https://tldrlegal.com/license/bsd-3-clause-license-(revised)">BSD 3-Clause License</a>, design under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>. <a href="https://github.com/openmaptiles/openmaptiles/blob/master/LICENSE.md">LICENSE.md</a>.</p>
<h3>Styles</h3>
<h4>Bright</h4>
<p>Fork from <a href="https://github.com/openmaptiles/osm-bright-gl-style">openmaptiles/osm-bright-gl-style</a>. The OSM Bright GL Style is derived from <a href="https://github.com/mapbox/mapbox-gl-styles">Mapbox Open Styles</a>. The OSM Bright GL Style’s code is released under the <a href="https://tldrlegal.com/license/bsd-3-clause-license-(revised)">BSD 3-Clause License</a>. The OSM Bright GL Style’s design is released under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>. <a href="https://github.com/openmaptiles/osm-bright-gl-style/blob/master/LICENSE.md">LICENSE.md</a>.</p>
<h4>Liberty</h4>
<p>Fork from <a href="https://github.com/maputnik/osm-liberty">maputnik/osm-liberty</a>. OSM Liberty is a fork of OSM Bright. The OSM Bright GL Style is derived from <a href="https://github.com/mapbox/mapbox-gl-styles">Mapbox Open Styles</a>. The OSM Bright GL Style’s code is released under the <a href="https://tldrlegal.com/license/bsd-3-clause-license-(revised)">BSD 3-Clause License</a>. The OSM Bright GL Style’s design is released under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>. <a href="https://github.com/maputnik/osm-liberty/blob/gh-pages/LICENSE.md">LICENSE.md</a>.</p>
<h4>Positron</h4>
<p>Fork from <a href="https://github.com/openmaptiles/positron-gl-style">openmaptiles/positron-gl-style</a>. The Positron GL Style is derived from <a href="https://github.com/CartoDB/CartoDB-basemaps">CartoDB Basemaps</a> designed by Stamen and Paul Norman for CartoDB Inc., licensed under <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>. The Positron GL style’s code is released under the <a href="https://tldrlegal.com/license/bsd-3-clause-license-(revised)">BSD 3-Clause License</a>. The Positron GL Style’s design is released under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>. <a href="https://github.com/openmaptiles/positron-gl-style/blob/master/LICENSE.md">LICENSE.md</a>.</p>
<h3>Fonts</h3>
<p><a href="https://www.google.com/get/noto/">Noto Sans</a> is released under the <a href="https://openfontlicense.org/">SIL Open Font License, Version 1.1</a></p>
<h3><strong>Icons</strong></h3>
<p>The <a href="https://github.com/mapbox/maki/blob/master/LICENSE.txt">Maki POI icon set</a> is licensed under CC0 1.0 Universal.</p>
<p>The right arrow was derived from <a href="https://commons.wikimedia.org/wiki/File:Arrowright.svg">Wikipedia</a>, it is public domain.</p>
<h3>Natural Earth</h3>
<p><a href="https://www.naturalearthdata.com/">Natural Earth</a> map data is in the public domain.</p>
<h3>Tools</h3>
<p>spritezero-cli is from <a href="https://github.com/mapbox/spritezero-cli">mapbox/spritezero-cli</a>, licensed <a href="https://github.com/mapbox/spritezero-cli/blob/master/LICENSE.md">ISC</a>.</p>
</body>
<script>
document.addEventListener('DOMContentLoaded', function () {
var codeBlocks = document.querySelectorAll('pre')
codeBlocks.forEach(function (block) {
block.classList.add('language-js')
Prism.highlightElement(block)
})
})
</script>
</body>
</html> </html>

28
website/map.html
View File

@@ -1,28 +0,0 @@
<div id="map"></div>
<script>
const map = new maplibregl.Map({
style: "https://tiles.openfreemap.org/styles/liberty",
center: [-74.5, 40],
zoom: 9,
container: "map",
});
let nav = new maplibregl.NavigationControl({showCompass:false});
map.addControl(nav, 'top-right');
let scale = new maplibregl.ScaleControl({
maxWidth: 80,
unit: 'imperial'
});
map.addControl(scale);
scale.setUnit('metric');
let marker = new maplibregl.Marker()
.setLngLat([30.5, 50.5])
.addTo(map);
</script>

19
website/map.js Normal file
View File

@@ -0,0 +1,19 @@
const map = new maplibregl.Map({
style: 'https://tiles.openfreemap.org/styles/liberty',
center: [-0.114, 51.506],
zoom: 14.2,
bearing: 55.2,
pitch: 60,
container: 'map',
boxZoom: false,
doubleClickZoom: false,
scrollZoom: false,
})
let nav = new maplibregl.NavigationControl({ showCompass: false })
map.addControl(nav, 'top-right')
let scale = new maplibregl.ScaleControl()
map.addControl(scale)
new maplibregl.Marker().setLngLat([-0.122, 51.503]).addTo(map)

5
website/style_selector.html Normal file
View File

@@ -0,0 +1,5 @@
Choose style:
<button onclick="selectStyle('Bright')">Bright</button>
<button onclick="selectStyle('Liberty')">Liberty</button>
<button onclick="selectStyle('Positron')">Positron</button>

49
website/template.html
View File

@@ -1,29 +1,42 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OpenFreeMap</title> <title>OpenFreeMap</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="assets/style.css" />
<meta name="description" content="Open and free OpenStreetMap hosting"> <meta name="description" content="Open and free OpenStreetMap hosting" />
<meta property="og:title" content=""> <meta property="og:title" content="" />
<meta property="og:type" content=""> <meta property="og:type" content="" />
<meta property="og:url" content=""> <meta property="og:url" content="" />
<meta property="og:image" content=""> <meta property="og:image" content="" />
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/favicon.ico" sizes="any" />
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script> <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" /> <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
</head>
<body> <link href="https://unpkg.com/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet" />
<img src="logo_512.png" alt="logo" height="200" class="logo"> </head>
{text}
</body>
<body>
<img src="assets/logo_512.png" alt="logo" height="200" class="logo" />
{text}
<script src="map.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>
document.addEventListener('DOMContentLoaded', function () {
var codeBlocks = document.querySelectorAll('pre')
codeBlocks.forEach(function (block) {
block.classList.add('language-js')
Prism.highlightElement(block)
})
})
</script>
</body>
</html> </html>

32
website/text.md
View File

@@ -12,7 +12,7 @@ It's truly open source: everything, including the full production setup is on Gi
OpenStreetMap is one of the most important collective projects in history. More than 2 million users have contributed to it over 19 years; 3 million edits are made each day. OpenStreetMap is one of the most important collective projects in history. More than 2 million users have contributed to it over 19 years; 3 million edits are made each day.
Unfortunately, when you want to use the map on your website or app, you need to look for a commercial map tile provider and hope your site doesn't get too popular, otherwise you might end up with a $10,000 bill in a single day, like Hoodmaps did [*](https://twitter.com/levelsio/status/1730659933232730443). Unfortunately, when you want to use the map on your website or app, you need to look for a commercial map tile provider and hope your site doesn't get too popular, otherwise you might end up with a $10,000 bill in a single day, like Hoodmaps did [\*](https://twitter.com/levelsio/status/1730659933232730443).
You can try self-hosting, but it requires a big server and a lot of time to get it right. You can try self-hosting, but it requires a big server and a lot of time to get it right.
@@ -22,6 +22,10 @@ I'm Zsolt Ero ([twitter](https://twitter.com/hyperknot), [blog](https://blog.hyp
## How can I use it? ## How can I use it?
<div id="map"></div>
<!--style_selector-->
Include [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) in `<head>` Include [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) in `<head>`
``` ```
@@ -35,20 +39,17 @@ Include [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) in `<head>`
And initialize it to a div, like this: And initialize it to a div, like this:
``` ```
<div id="map" style="width: 600px; height: 400px"></div> <div id="map" style="width: 100%; height: 500px"></div>
<script> <script>
const map = new maplibregl.Map({ const map = new maplibregl.Map({
style: "https://tiles.openfreemap.org/styles/liberty", style: 'https://tiles.openfreemap.org/styles/liberty',
center: [-74.5, 40], center: [-0.114, 51.506],
zoom: 9, zoom: 14.2,
container: "map", container: 'map'
}); })
</script> </script>
``` ```
{map}
If you've used Mapbox GL before, please migrate to MapLibre. It is based on the last open-source version of Mapbox GL, before it went closed-source. A Leaflet based snippet is coming soon. If you've used Mapbox GL before, please migrate to MapLibre. It is based on the last open-source version of Mapbox GL, before it went closed-source. A Leaflet based snippet is coming soon.
For mobile apps, you can do the same with [MapLibre Native.](https://maplibre.org/) For mobile apps, you can do the same with [MapLibre Native.](https://maplibre.org/)
@@ -59,8 +60,6 @@ You can also download our processed planet MBTiles and BTRFS images if you want
... ...
## How can I follow this project? ## How can I follow this project?
The main repo is [hyperknot/openfreemap](https://github.com/hyperknot/openfreemap) The main repo is [hyperknot/openfreemap](https://github.com/hyperknot/openfreemap)
@@ -75,21 +74,16 @@ mastodon zsolt https://elk.zone/sigmoid.social/@hyperknot/followers
mastodon ofm TODO mastodon ofm TODO
## Is commercial usage allowed? ## Is commercial usage allowed?
Yes. Yes.
## Why did I make this? ## Why did I make this?
Because I waited for years for someone to offer this service, but realised no one is going to make it. So, I thought I might use my map hosting experience and do it. Because I waited for years for someone to offer this service, but realised no one is going to make it. So, I thought I might use my map hosting experience and do it.
I'll share more about the why in a blog post in the future, feel free to subscribe on the links above. I'll share more about the why in a blog post in the future, feel free to subscribe on the links above.
## How can this work? How can a one person project offer unlimited map hosting for free? ## How can this work? How can a one person project offer unlimited map hosting for free?
There is no technical reason why vector tile hosting should cost as much as it does today. There is no technical reason why vector tile hosting should cost as much as it does today.
@@ -98,8 +92,6 @@ Vector tiles are just static files. OK, serving 300 million files is not easy, b
Financially, the plan is to keep buying Hetzner servers until they cover the bandwidth. I believe it can work if enough people contribute. If this project helps you save your map hosting costs, please consider our support plans! Financially, the plan is to keep buying Hetzner servers until they cover the bandwidth. I believe it can work if enough people contribute. If this project helps you save your map hosting costs, please consider our support plans!
## What is the tech stack? ## What is the tech stack?
The map schema is [OpenMapTiles](https://github.com/openmaptiles/openmaptiles). The map schema is [OpenMapTiles](https://github.com/openmaptiles/openmaptiles).
@@ -116,8 +108,6 @@ Currently using Cloudflare, but it's designed so that it can be changed any time
Moreover, a lot of work is going into customising the styles at [openfreemap-styles](https://github.com/hyperknot/openfreemap-styles). Moreover, a lot of work is going into customising the styles at [openfreemap-styles](https://github.com/hyperknot/openfreemap-styles).
## What about PMTiles? ## What about PMTiles?
I would have loved to use PMTiles, they are a brilliant idea! I would have loved to use PMTiles, they are a brilliant idea!