OpenSeaMap-vector is rewrite of OpenSeaMap.org, using vector tiles instead of raster tiles. Inspired by OpenRailwayMap.app (a vector rewrite of OpenRailwayMap.org).

TODO

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 cd packages/website
  • run npm install
  • run npm start
  • Open localhost:1673 in your browser.

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