website work

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

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.
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.
@@ -22,6 +22,10 @@ I'm Zsolt Ero ([twitter](https://twitter.com/hyperknot), [blog](https://blog.hyp
## How can I use it?
<div id="map"></div>
<!--style_selector-->
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:
```
<div id="map" style="width: 600px; height: 400px"></div>
<div id="map" style="width: 100%; height: 500px"></div>
<script>
const map = new maplibregl.Map({
style: "https://tiles.openfreemap.org/styles/liberty",
center: [-74.5, 40],
zoom: 9,
container: "map",
});
style: 'https://tiles.openfreemap.org/styles/liberty',
center: [-0.114, 51.506],
zoom: 14.2,
container: 'map'
})
</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.
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?
The main repo is [hyperknot/openfreemap](https://github.com/hyperknot/openfreemap)
@@ -75,38 +74,31 @@ mastodon zsolt https://elk.zone/sigmoid.social/@hyperknot/followers
mastodon ofm TODO
## Is commercial usage allowed?
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.
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?
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.
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.
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?
The map schema is [OpenMapTiles](https://github.com/openmaptiles/openmaptiles).
The tiles are generated by [Planetiler](https://github.com/onthegomap/planetiler).
There is no tile server running, only BTRFS partition images with 300 million hard linked files.
There is no tile server running, only BTRFS partition images with 300 million hard linked files.
The server is nginx on Ubuntu.
@@ -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).
## What about PMTiles?
I would have loved to use PMTiles, they are a brilliant idea!