(WIP) [Meta] Introduce Maplibre for Vector Tiles

[tordans]

Hey @gravitystorm I think I remember that you use this ticket list here to draft issues that are not ready for the main repo, yet. I thought I'd share my WIP notes on potential tickets on a migration to Maplibre. They are not finished, but might be a start for you. Feel free to reuse what you need or remove it all…
I drafted it as a set of separate tickets, but they are all in one big list below to make re-arranging the pieces easier.

---

---

---

[Meta] Introduce Maplibre for Vector Tiles

Context

2024 was announced to be the year OSM embraces vector tiles.

The data and map styles to showcase OSM data with minutely updates is being worked on right now.

What can and should we do on the website front to present this now style and data in the best way possible?

Maplibre GL JS

Right now, the OSM website tiles are rendered using Leaflet. Leaflet is great for rendering pixel based maps.

For vector tiles, MapLibre GL JS is more commonly used and provides more features that are focussed on vector data.

It would be possible to integrate the new vector tiles using Leaflet, which is what is being done in https://github.com/openstreetmap/openstreetmap-website/pull/__NOPING__4042.

However, we want to take this opportunity to evaluat updating our rendering library to a library that is focussed on vector tiles first.

Process

This ticket a meta ticket to collect glue together small, actionable tickets together.

Subtickets

• Migrate user home location map to MapLibre

---

---

---

Migrate user home location map to MapLibre

Context

See #META_TICKET_ID

The page https://www.openstreetmap.org/profile/edit has a map with some interaction to position a location pin.

It is a good candidate to test out switching to Maplibre GL JS in a contained environment.

The goal is to learn about how to integrate Maplibre GL JS into the website and later use this knowledge and code to improve other areas of the website.

Goal

Replace the current map and functionality with Maplibre GL JS, preserving the current feature set.

TBD

• Which OSM Vector tiles dataset should be used for this? (Data source and map style)

---

Setup a test page for Maplibre GL JS

Context

See #META_TICKET_ID

In order to iterate on a possible migration to Maplibre GL JS, we want a way to iterate and test the new technical setup.

Goal

Add openstreetmap.org/maplibre as a copy of the main map using Maplibre GL JS.

This page will be discontinued at some point and at this point redirect to the main map.

The gaol of this ticket is to find a good setup to manage the files in the repo. Migrating specific features should be managed in separate issues.

List of features that need to be migrated

• Locate me
• Show context menu for right click
• Context menu: Add route action (from/to)
• Context menu: Add new note action
• Context menu: Add show address action
• Context menu: Add center map action
• Context menu: Add map object action
• Notes layer (show points and interaction)
• Map data layer (show data and interaction)
• Toggle base map

[!INFO]
^--- this is where I stopped writing. My idea was, to have further separate issues for all the items in this list (once the list is scoped well). And then maybe have the same list inside the META ticket? Or something like this…

[gravitystorm]

Hey @gravitystorm I think I remember that you use this ticket list here to draft issues that are not ready for the main repo, yet

Sort of! It's more like a personal todo list, particularly if there's something that I want to look into (e.g. a new gem, or some refactoring) but I'm not sure it's actually a good idea yet, or if it's something small were I want to remember to do it but it's not worth a full explanation on the main tracker.

I've been using it less more recently since the maintainer jobs mean I'm doing very little coding.

I thought I'd share my WIP notes on potential tickets on a migration to Maplibre.

I think first we need a careful list of pros/cons for moving from Leaflet to Maplibre. Both libraries can support raster, both can support vector, so we can freely choose between them. As far as I'm aware the main (relevant to osm.org) difference with Maplibre is around fractional zooms - how does that interact with most of our layers being rasters? I don't have enough Maplibre experience to judge. Anything else that should be put into the comparison? Supported range of browsers? Performance for rasters/data layer? There's presumably some reasons why people still use Leaflet for standard raster maps, so what would we lose by switching to Maplibre for those?