OpenSeaMap-vector is rewrite of OpenSeaMap.org, using vector tiles instead of raster tiles. Inspired by OpenRailwayMap.app (a vector rewrite of OpenRailwayMap.org).
Due to limited disk space in GitHub Actions, the initial .pbf filtering is processed seperately for each continent, and then merged back together.
This is inconvenient, but there is no alternative solution which is completely free.
The entire process takes about 90 minutes. More granular timings can be viewed in GitHub Actions.
Navigation marks require a huge number of OSM tags to be accurately described, in extreme cases >250 tags are required on a single node.
Since it's impossible to pre-generate icons for every possible combination, SVG icons for navigational marks are rendered on-the-fly in the browser.
The following unit test snapshots show the complexity involved, just for a small part of the process (buoys, beacons, and topmarks):
For notices (traffic signs), the SVG templates define the coordinates where the text should be placed, and this text is drawn using an HTML <canvas />:
| Templates | Rendered with text |
|---|---|
 |
 |
Besides from viewing the map, various parts of this project could be re-used in your own app.
- osm.pbf: You can download a slimmed-down version of the osm planet file from our CDN, which only contains
seamark:*and some other tags. This file is only 40 MB, unlike the entire planet which is 80 GB. Download Link. - maplibre-gl style: You could theoretically use the maplibre style JSON file in any other maplibre-based map. For example, in Overpass-Ultra. Download Link. However, navigational marks won't render correctly, since they need to be generated on-the-fly with the navmark-renderer JS library.
- navmark-renderer: this is an NPM library that could be re-used anywhere. See the section above.
This app is still an early prototype, so all of these resources are subject to change without a prewarning. Use at your own risk.
To edit the code for this project on your own computer:
- Install Docker.
- Install NodeJS.
- If you plan to edit the Java files, follow planetiler's instructions for installing Java and setting up your IDE.
- To generate the vector tiles:
- change the URL in planet.sh to your local region.
- run
. ./planet.sh - run
. ./tiles.sh - now you have tiles in ./data/public folder!
- To run the website:
- run
. ./sprite.sh - run
cd packages/navmark-renderer- run
npm install - run
npm run build - run
cd ../..
- run
- run
cd packages/website - run
npm install - run
npm start - Open localhost:1673 in your browser.
- run
- The map data is sourced from OpenStreetMap and licensed under the ODbL license.
- The code and icons in this repository licensed under Creative Commons CC0 license. Many icons are copied from other CC0-licensed projects, such as Temaki and selective icons from Wikimedia Commons.
As usual, data from this map or from OpenStreetMap should never be used for marine navigation. The contributors of this project take no responsibility for the accuracy of the data. Always use official nautical charts.