mirror of
https://github.com/hyperknot/openfreemap.git
synced 2026-05-21 14:02:15 +00:00
222 lines
13 KiB
HTML
222 lines
13 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>OpenFreeMap</title>
|
||
<link rel="stylesheet" href="assets/style.css" />
|
||
<meta name="description" content="Open and free OpenStreetMap hosting" />
|
||
|
||
<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" />
|
||
|
||
<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/prismjs@1.29.0/themes/prism.min.css" rel="stylesheet" />
|
||
</head>
|
||
|
||
<body>
|
||
<img src="assets/logo_512.png" alt="logo" height="200" class="logo" />
|
||
<h1>OpenFreeMap</h1>
|
||
<h2>What is this?</h2>
|
||
<p>OpenFreeMap is an open and free OpenStreetMap tile hosting service.</p>
|
||
<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>
|
||
<p>It's truly open source: everything, including the full production setup is on GitHub.</p>
|
||
<h2>Why is this important?</h2>
|
||
<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>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>
|
||
|
||
<p>
|
||
Choose style:
|
||
<button onclick="selectStyle('bright')">Bright</button>
|
||
<button onclick="selectStyle('liberty')">Liberty</button>
|
||
<button onclick="selectStyle('positron')">Positron</button>
|
||
</p>
|
||
<p>
|
||
Use the following style in a MapLibre map:
|
||
<code id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code>
|
||
</p>
|
||
|
||
<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, but make sure to load the CSS manually.
|
||
</p>
|
||
<pre><code class="language-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>And initialize it to a div, like this:</p>
|
||
<pre><code class="language-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 release.
|
||
</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 style 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 customise 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 customised style, you need to host the style JSON youself, and use this URL in
|
||
MapLibre.
|
||
</p>
|
||
<p>
|
||
<a
|
||
href="https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/bright"
|
||
target="_blank"
|
||
>Customise Bright</a
|
||
>
|
||
</p>
|
||
<p>
|
||
<a
|
||
href="https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/liberty"
|
||
target="_blank"
|
||
>Customise Liberty</a
|
||
>
|
||
</p>
|
||
<p>
|
||
<a
|
||
href="https://maputnik.github.io/editor?style=https://tiles.openfreemap.org/styles/positron"
|
||
target="_blank"
|
||
>Customise 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 are in
|
||
<a href="https://github.com/hyperknot/openfreemap" target="_blank">GitHub</a>.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>How can I donate or support this project?</h2>
|
||
<p>...</p>
|
||
<h2>How can I follow this project?</h2>
|
||
<p>twitter: <a href="https://twitter.com/hyperknot">hyperknot</a> and <a href="https://twitter.com/OpenFreeMapOrg">OpenFreeMapOrg</a></p>
|
||
<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>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 you 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 <a href="https://blog.hyperknot.com/">blog post</a> in the future, feel free to subscribe.</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 renting Hetzner servers until they cover the bandwidth. I believe it can work if enough people subscribe to the support plans.</p>
|
||
<p>If this project helps you to save a lot on your map hosting costs, please consider subscribing to a support plan!</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 it so 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 < 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 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>
|
||
</body>
|
||
</html>
|