As a developer I want to decide which map library we want to use in UI

[eetuseta]

As a developer I want to know which map libraries are used so that I can create best possible outcome for the UI.

Different libraries are evaluated on separate issues. This ticket includes only comparing those results and making the final decision.

Common alternatives:

• Leaflet
• OpenLayers
• maplibre (after mapbox-gl suddenly went closed-source)

And React layers for them:

• maplibre (visgl, urbica (deadish), alex)

[haphut]

maplibre has finally released a stable version: https://www.npmjs.com/package/maplibre-gl

visgl has advice on how to switch from mapbox-gl to maplibre-gl: https://github.com/visgl/react-map-gl/blob/db08714945b106062a9e8b87722a8c0e343eb3de/docs/get-started/get-started.md#using-with-a-mapbox-gl-fork

[haphut]

To have it in writing, map data in vector tiles is rendered into images in the frontend. Raster tiles are rendered into images in advance in the backend, instead.

Raster tiles look like static pictures on top of which you can draw. With vector tiles you can modify the visuals according to the current user context in the frontend, e.g. fatten a road or draw a halo around it if the road needs highlighting. Vector maps enable more beauty and UI possibilities.

On the other hand, vector tiles can be slow if they are not drawn using the GPU. maplibre uses WebGL. To my knowledge, existing Leaflet plugins do not.

In my experience, raster tiles are easier to handle. They've been around longer and they have less sharp edges.

[haphut]

Regarding maplibre React layers:

• visgl seems to have been made for analytics, not interaction. In another project we hit many bugs in 2020. It might be a good idea to use the visgl wrapper with deck.gl.
  • Here's advice on how to use maplibre with visgl as the name change is such a new thing. This might be applicable to other React wrappers for maplibre as well.
• urbica had less bugs regarding interactive use but the main developer has switched companies. Crickets since then.
• alex3165 has made a wrapper I have not tried. It is popular enough.
• It might not be overkill to create our own React wrapper.

[haphut]

maplibre activity is still building momentum. I believe there are many organizations that use mapbox-gl v1, that will not switch to the closed-source version 2 and that will migrate to maplibre.

[haphut]

As also @jarkkoka brought up, Leaflet is simple and easy for small stuff and OpenLayers is featureful. Maplibre produces pretty maps and relies on Turf.js to do the GIS tricks.

Here's some recent discussion comparing OpenLayers and maplibre: https://news.ycombinator.com/item?id=26682403

OpenLayers has poor React support, if I remember correctly what I read elsewhere from other people's experiences.

[haphut]

Aspects for comparison:

• visualization quality / beauty / UI possibilities
• developer ergonomics
• performance
• (missing) abilities
• familiarity with current team members
• implementing a use case relevant to Jore. E.g. drawing a route between two stop points

[haphut]

From @pallost in issue #318 :

...should research React map libraries and find the most fitting one that supports most of the desired features. Let's collect here what features we would like to (possibly) use and the results of our research that which libraries support these the best

Must have: simple zoom in-out, for easy navigation Must have: simple panning, for easy navigation Must have: simple way of creating nodes, for creating bus stops and other POI Must have: simple way of creating edges, for drawing routes and roads between nodes

Could have: simple way of selecting multiple edges and nodes in an area, for batch editing attributes for each or for selecting parts of a network that is imported from a source Should have: while drawing, dragging or dropping, snapping nodes and edges to and underlying infrastructure network grid

[haphut]

Zooming and panning come for free after the map is rendered.

So maybe these functionalities act as a start:

1. Draw a map using HSL tiles: https://digitransit.fi/en/developers/apis/3-map-api/background-map/
2. Draw a marker on the map exactly where clicked. (There are often little offsets to fix.)
3. Draw a blue-filled circle with a white, thick edge on the map.
4. Draw a linestring between two markers.
5. Style the map more if wanted. Add transparency to linestrings, for example.

Report on ergonomics, visualization quality/beauty, experienced performance, missing/bonus abilities.

Next iterations:

1. Drag and drop markers. (Exists already for Leaflet in https://github.com/HSLdevcom/jore4-graphql-playground .)
2. Select and copy features.
3. Snap linestrings to hidden, hardcoded edges that mock the infrastructure network.
4. Draw things on top of each other, in specified visibility order.
5. Calculate the closest point in a linestring (infrastructure link) to a given point (stop). Possibly visualize the projection vector as a straight line between the linestring and the point.

[haphut]

@pallost I suggest we keep this issue open and collect the experiences here. Feel free to close if you had other plans for documenting the results.

[tuokait]

Did a little bit of testing in https://github.com/HSLdevcom/jore4-maplibre-experiment repository.

During testing I made at least following random observations about maplibre:

• It was a bit PITA to get map visible on the screen as library wanted mapbox access tokens in order to work. Seems like it accepted empty values anyway:

  mapboxApiAccessToken=""
  mapboxApiUrl=""

• Using digitransit maps as map source required using this magical json as mapStyle.
• Map zooming feels very smooth
• Plenty of examples about the things that can be done with react-map-gl can be foud here.
• Doing simple things felt pretty straightforward
• Thins became messy when I tried to show "PopupInfo" boxes next to the map pins. Showing those boxes was easy. It was also easy to add "delete marker" button inside PopupInfo box. The problem was that when "delete" button is clicked, click event was somehow leaked into underlying map. If the button in PopupInfo wasn't used for deleting the corresponding marker, then click event wasn't leaked. So possibly that has something to do with React and how it re-renders map markers and/or PopupInfo just when marker is deleted, but I didn't find out good solution for that right now...
• There are plenty of frameworks that utilize react-map-gl. deck.gl and nebula.gl might be worth experiementing a bit more.
• Documentation of react-map-gl was OK.
• MapLibre was created after Mapbox GL JS was changed from free Open-source library to the proprietary v2 version. See e.g. this introduction. Because of that community around MapLibre seems a bit scattered and the time will tell how well open-source community is able to develop MapLibre and related tools/libraries.

[tuokait]

Also did some experiementing with OpenLayers/rlayers. Not much luck with it so far. Tried to follow steps explained in this blog post on top of jore4-ui repository, but ol refused to cooperate. The problem is probably related to fact that ol doesn't ship with Node.js compatible sources, which our UI would need as it it implemented with Next.js. We have disabled SSR from next.js, but something still seems to cause problems. There is example rlayers project based on next.js wich can be found here. Anyway, there was a disclaimer that "This is still not a user-friendly, install-and-run project." and it seems to be the case as I wasn't able to run in on my local machine. :D On the positive side, rlayers examples seemed nice...

~Now I also noticed that there is [react-openlayers](https://github.com/allenhwkim/react-openlayers) which I didn't tested yet. Maybe we could still give it a shot.~react-openlayers` repository says that "This repository has been archived by the owner. It is now read-only.". So its not an option either.

[tuokait]

DeckGL's TS-typings are WIP: https://github.com/danmarshall/deckgl-typings

[tuokait]

We discussed about map library alternatives with the team. The conclusion was that none of the of the options is perfect, but leaflet might be the safest choice.

OpenLayers had weak react support and no strong benefits against MapGL, so it was first one to be discarded. MapGL/DeckGL had native support for vector tiles, which is good for performance and thus its most significant advantage against Leaflet. On the other hand, it had plenty of sharp edges and even straightforward task such drawing markers, dragging those and deleting those had issues which arose in our testing. We had done similar experiements with Leaflet in jore4-graphql-playground repository, and at least in that usecase seemed to work more smoothly with leaflet.

At least one team member had prior experience from leaflet. It was not perfect and suffered from occasional memory leaks, but its still somehow battle tested and also used by HSL in jore-map-ui. It is also worth noting that using vector tiles with leaflet should be possible with plugin.

Biggest concerns with leaflet were performance when lots of contents (e.g. Digiroad) is drawn on the screen and how well drawing routes is going to work. Those are things which we aim to verify in the near future.

tl;dr Leaflet was choses as map library

[dajma00]

Windy.com API supports Leaflet only.