In need for a native control for map symbols (map legend)

[kauevestena]

User Story

Hello, fellow MapLibre Community members. First of all, I'm a user and deep admirer of the library!

I was on the organization committee of the latest FOSS4G (last week!), and I met many folks from the MapLibre community, including @nyurik . At his presentation, I asked about the current status of this very request, and then here I am, opening this issue!

Noticing is always the first step!

After a quick search, I found no similar ones. Apologies if I missed some.

Rationale

• Why is this feature needed?

  Well, in the end, maplibre is all about digital cartography, which is still... well... Cartography! For me, a Cartographer, map symbols are a fundamental element of a map, something that many users are looking for to fully comprehend the values represented by the colors, and so on.

• What are some example use cases?

  well, any digital map... let's show mine:

https://kauevestena.github.io/opensidewalkmap_beta/map.html

On the right side, there's the layer control panel, but on the left side, there's a proper legend that I made by "hand" (link on next topic). Notice that the first is more about layers and the second is much more about values.

• Can it be done today? Is there a workaround?

  There's a plugin (that I'm also using) that is ok for layer toggling/untoggling (https://github.com/watergis/mapbox-gl-legend) and kinda fits the whole purpose if there's just a single style per layer.

I did it "manually" with matplotlib, you guys can check interactively, but the implementation is here (in python): https://github.com/kauevestena/oswm_codebase/blob/main/webmap/standalone_legend.py. In my use case, different layers share a the same final styles (not necessarily the same dictionary, but same colors/appearance for the end user)

Well, I'm not a big developer, but I believe that the class could be called MapLegendControl or MapSymbolsControl or without "map".

Impact

Becoming a more complete framework for digital cartography!

[HarelM]

Thanks for taking the time to open this issue.
I've tried reading what you wrote and I don't understand what the feature request is.
Can you please try and define it as a user story:
As a cartographer I would need X in order to do Y.

Also, if there is a plugin that does most of what you need I would recommend trying to add the missing functionality there or fork it if they are not responsive.

[neodescis]

I think you're asking for a generic legend control? In my experience, due to MapLibre's huge amount of configurability, it will be next to impossible to create something that would be generically useful. Maybe I'm wrong, and something could be created to cover some use cases?

For one of the projects I am working on that utilizes MapLibre, I have created a layers control that also serves as a legend, but that legend is built dynamically at runtime using values from well-known vector tile layers.

[kauevestena]

Thanks for taking the time to open this issue. I've tried reading what you wrote and I don't understand what the feature request is. Can you please try and define it as a user story: As a cartographer I would need X in order to do Y.

Also, if there is a plugin that does most of what you need I would recommend trying to add the missing functionality there or fork it if they are not responsive.

Hello @HarelM , sorry for not being clear, but basically Implementing natively something similar to the legend on the left side of the image.

[kauevestena]

I think you're asking for a generic legend control? In my experience, due to MapLibre's huge amount of configurability, it will be next to impossible to create something that would be generically useful. Maybe I'm wrong, and something could be created to cover some use cases?

For one of the projects I am working on that utilizes MapLibre, I have created a layers control that also serves as a legend, but that legend is built dynamically at runtime using values from well-known vector tile layers.

Exactly that. Well, probably it would be VERY challenging, maybe would be better to be around as a plugin rather than natively.

But I perceive it as a fundamental resource. It seems to be implemented in OpenLayers (I also asked them guys in person haha)

[neodescis]

I think what it boils down to is the LOE required to build such a thing in a generic way is very high, whereas the time to throw a very simple "hard-coded" legend is very, very low, so nobody has taken the time to do it. Probably many would use such a thing if it existed though!

I would have been happy to have had something to start from instead of basically beginning from scratch. What I ended up creating watches for tiles to load, queries layers for features as they are loaded, and provides legend symbols with counts for items as they come into view. What I wrote is an Angular component though, and it makes heavy use of RxJS, so unfortunately it's not something I would be able to contribute back to MapLibre.

[kauevestena]

Yes, as I stated, noticing is always the first step.

It might be as challenging as it is important,

I'm not really into renderers, but if the renderer can render everything in a style schema, wouldn't it be able to replicate it once in small legend symbols (then maybe transformed into svg)?

I can imagine this design:

Every layer creates a collapsed entry that can be expanded (with a small arrow), default on the middle left side of the screen.

[neodescis]

Funny you mentioned SVG, as that is exactly what I did! It's not as simple as "replicating it once," for a few different reasons.

• First, items rendered on the map canvas are rendered with WebGL shaders, which is very specialized. So, something entirely separate must be created to produce the legend icons.
• Second, items rendered on the map canvas often have data-driven style definitions that are particular to each rendering. Some of these could be defaulted or assumed, but others you might want to display multiple legend symbols (think circles representing earthquakes, with size and color driven by magnitude). This is where the problem gets more difficult to solve in a generic way. The solution I came up with here was very particular to our data -> vector tile pipeline.

[HarelM]

I started to implement a legend where you define a location and a legend item title, for every entry I created a small non injective map to show the place using the current style.
The browser didn't like it as I was creating too many webgl contexts and I ended up creating a server side script to generate legend images, see here:
https://github.com/IsraelHikingMap/Site/blob/07ff9137bd1c071b37fa6685bb23e313d0bed13f/IsraelHiking.Web/generate-legend.js
I think every application has different requirements for a legend, some put layers, other put location, other want the legend to toggle group of layers on the map etc...
I don't think this is something that should be supported here, and different plugins can decide how to implement it and how opinionated they want to be.

[kauevestena]

Funny you mentioned SVG, as that is exactly what I did! It's not as simple as "replicating it once," for a few different reasons.

• First, items rendered on the map canvas are rendered with WebGL shaders, which is very specialized. So, something entirely separate must be created to produce the legend icons.
• Second, items rendered on the map canvas often have data-driven style definitions that are particular to each rendering. Some of these could be defaulted or assumed, but others you might want to display multiple legend symbols (think circles representing earthquakes, with size and color driven by magnitude). This is where the problem gets more difficult to solve in a generic way. The solution I came up with here was very particular to our data -> vector tile pipeline.

Wow, thanks a lot for the technical explanation!

[kauevestena]

I started to implement a legend where you define a location and a legend item title, for every entry I created a small non injective map to show the place using the current style. The browser didn't like it as I was creating too many webgl contexts and I ended up creating a server side script to generate legend images, see here: https://github.com/IsraelHikingMap/Site/blob/07ff9137bd1c071b37fa6685bb23e313d0bed13f/IsraelHiking.Web/generate-legend.js I think every application has different requirements for a legend, some put layers, other put location, other want the legend to toggle group of layers on the map etc... I don't think this is something that should be supported here, and different plugins can decide how to implement it and how opinionated they want to be.

Well, seems like plugins can in the end be the best way. Even tough I believe that one day proper map legends could be a highlight for MapLibre!