Skip to content

refactor(maps): port to MapLibre GL JS and add pmtiles-server example#364

Merged
JammingBen merged 6 commits intoopencloud-eu:mainfrom
dschmidt:refactor/maps-migrate-to-maplibre
Feb 23, 2026
Merged

refactor(maps): port to MapLibre GL JS and add pmtiles-server example#364
JammingBen merged 6 commits intoopencloud-eu:mainfrom
dschmidt:refactor/maps-migrate-to-maplibre

Conversation

@dschmidt
Copy link
Copy Markdown
Contributor

Description

This PR ports the maps app from Leaflet.js (thanks for all the fish up until here :)) to MapLibre GL JS which is a more modern library, with better TypeScript support and built in .pmtiles support.
PMTiles is a container format for vector maps. You can serve the whole world as a single .pmtiles file and the browser will request just what it needs with range requests.
This makes it very easy to deploy it yourself. To show how easy it is, I've added an example pmtiles-server which automatically downloads a world map from protomaps on startup.

Related Issue

  • Fixes <issue_link>

How Has This Been Tested?

  • test environment:
  • test case 1:
  • test case 2:
  • ...

Types of changes

  • Bugfix
  • Enhancement (a change that doesn't break existing code or deployments)
  • Breaking change (a modification that affects current functionality)
  • Technical debt (addressing code that needs refactoring or improvements)
  • Tests (adding or improving tests)
  • Documentation (updates or additions to documentation)
  • Maintenance (like dependency updates or tooling adjustments)

@dschmidt dschmidt force-pushed the refactor/maps-migrate-to-maplibre branch from 16f95eb to 550f265 Compare February 13, 2026 20:45
Copy link
Copy Markdown
Member

@JammingBen JammingBen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A few nitpicks, rest looks and works just fine!

Comment thread packages/web-app-maps/src/components/GpxMap.vue Outdated
Comment thread packages/web-app-maps/src/components/LocationFolderView.vue Outdated
Comment thread packages/web-app-maps/src/components/LocationPanel.vue Outdated
Comment thread packages/web-app-maps/src/composables/useMap.ts
Copy link
Copy Markdown
Member

@JammingBen JammingBen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thx! 🚀

Replace Leaflet + leaflet-gpx with MapLibre GL JS for WebGL-based
rendering, vector tile support, and PMTiles support.

- Add GPX parsing helper using @tmcw/togeojson with haversine distance
  and elevation gain/loss calculation
- Support raster tiles (default OSM), PMTiles with lazy protocol
  registration, and full style override via mapStyle config
- Add configurable tile attribution via tileLayerAttribution
- Fix bug where imperial units were displayed with metric labels
- Update CSP to allow MapLibre web workers and tile fetching
- Update e2e tests with new selectors and additional coverage
Adds a self-contained docker compose setup in contrib/pmtiles-server/
that downloads PMTiles and font glyphs, then serves them via a static
web server on port 9205. Supports resuming interrupted downloads.
Read the language from document.documentElement.lang so map labels
match the user's OpenCloud language setting, falling back to English.
Add background, blur, shadow and spacing to the GPX metadata overlay
so it's readable over the map. Also allow mapStyle config to accept
an inline style object in addition to a URL string.
@dschmidt dschmidt force-pushed the refactor/maps-migrate-to-maplibre branch from ed8b8ab to 32c7979 Compare February 23, 2026 16:49
@dschmidt dschmidt force-pushed the refactor/maps-migrate-to-maplibre branch from 32c7979 to 87713ba Compare February 23, 2026 16:50
@JammingBen JammingBen merged commit e1f2c13 into opencloud-eu:main Feb 23, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants