mapline

Create a collection of accurate maps in print quality along your gpx or kml track, in your scale, your format and the infos you need.

Live Demo page

Features

• Accurate scale throughout the whole route
• Printable quality of 300dpi
• Customizable paper format up to A2, page margins and distance markers
• Support of waypoints

Inspired by the bikeline Cycling guides and Openstreetmap, this application uses Mapbox GL JS to create the maps I need. Vector tiles enable rendering in 300dpi, high enough for printing. There are different styles available. Paper format, page margins and distance markers are customizable. You want a map in 1:85.000 on A5 paper along that winding river? No problem.

Waypoints and POIs

Waypoints contained in the GPX can set a symbol name through the optional sym field. You can set the used icon by specify any Maki icon by using their basename e.g. campsite-11 in this field.

Additional POIs can be downloaded via Overpass. To add more choices, see overpass.js. POIs are downloaded for print areas only. In case of format or scale changes, manually refresh by toggling the checkboxes.

Development

Logic and PDF generation of mapline are performed client-side. Main external libraries are Mapbox GL JS for map creation and jsPDF for PDF generation.

Before you can use mapline, you have to get your own Mapbox access token. Save it in src/mapboxtoken.js:

export default '<your access token here>';

• yarn install installs all dependencies
• yarn run serve starts a dev server
• yarn run dist generates a production build in /dist

Prebuilds

Since v0.16.0, a bundled version is published for tagged commits in prebuild/. See prebuild/README.md for more infos on how to use it.

yarn run prebuild prepares all files in /prebuild. Finished prebuilds are then generated using git hooks, see git-hooks/README.md for details.

Limitations

An application written in Javascript, using WebGL and running entirely in the browser has of course some limitations.

• canvas size and hence the maximum page format depend on your graphics card
• at least in the past, Javascript engines had a hardcoded maximum string size. This limited the size of the output PDF to ~268.44MB. I do not know where the limits are now.

Missing features and nice-to-haves

• a map style better suited for cycle tours and printing in black&white
• a scale bar on the printouts
• elevation stats and marking of steep slopes
• support for multiple tracks

Want to participate?

Although development is slow, this is not a dead project and pull-requests are always welcome!