markusand / mapboxgl-legend

Add a legend to a mapbox-gl map by parsing layer layout & paint expressions.

I'm a self-taught fullstack developer and skier based in 🇦🇩 Andorra.

Interested in design 🎨, TV shows 📺 and asian food 🍜

Formerly building Snowplanner.

Tech stack

mapboxgl-legend's Issues

using npm i has bundled library

When i download the module, i get .min.js files that are bundled. Thus unusable. Can anyone help?

Tileserver-GL

Hello,

Is the project compatible with https://openmaptiles.org/ and Tileserver-GL serving mapbox compatible tiles from a Docker container ?

Legend is still visible when empty

If no layer is loaded and the legend is empty, the shadow borders are still visible.

Should labels for 0 have unit?

Is it appropriate to have, for example, 0m ?

Custom marker support?

Just found your repo and it's pretty cool - have you thought of adding support for custom markers? I have a map that uses a local file with custom markers and since it doesn't get added as a regular layer it doesn't look like I can get it to show up in the legend.

Is there a proper way to remove the "Other" from the legend?

Hello,

Is it possible to omit or rename the "other" label from the legend?

If I omit it manually I get the following error:
Error: layers.Legend.paint.line-color: Expected an even number of arguments.

If it could be renamed, I could assign the last layer to the feedback layer in the mapbox studio.

This is the object received by the paint
mapboxObj.addLayer({ id: "Legend", type: mapboxObj.style.stylesheet.layers[i].type, source: "id123", "source-layer": 'id123', paint: { "line-color": [ "match", [ "get", "roadtype" ], "class1", "hsl(0, 89%, 56%)", "class2", "hsl(205, 84%, 56%)", /* Other */ "#2deb2d" ] }
thanks in advance!

feature: Update legend programatically

Add a method to trigger the legend update, not having to rely on map events.

Motivation

Provide an option to programatically refresh the legend when using reactive frameworks like React or Vue. Mainly on changing metadata when using multiple locales, legend should be able to be refreshed without deleting and reading the new layer (this is the workaround right now).

Add support for patterns

Patterns are images, and can be trated the same way.

Inconsistent panels order

Layers are stacked on the map in the order they are added (first on the bottom and last on the top) while Legend panels are added in sequential order (last layer panel at the bottom). This is counter-intuitive and the Legend panels should follow the same stacking order as map layers.

Support multiple maps per HTML page

There is a problem when the legend is added to multiple maps per document.

If there are multiple maps per document, and if theses maps share a
layer with the same id, scoping the legend pane querySelector to
document instead of the container causes matches across the different
maps.

The error thrown is this:

index.ts:122 Uncaught DOMException: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.
    at http://localhost:5173/src/index.ts?t=1671003943193:94:25
    at Array.forEach (<anonymous>)
    at LegendControl._loadPanes (http://localhost:5173/src/index.ts?t=1671003943193:71:187)
    at Map.fire (http://localhost:5173/node_modules/.vite/deps/mapbox-gl.js?v=b39e1061:717:20)
    at Map.<anonymous> (http://localhost:5173/node_modules/.vite/deps/mapbox-gl.js?v=b39e1061:21086:59)
    at Map.fire (http://localhost:5173/node_modules/.vite/deps/mapbox-gl.js?v=b39e1061:717:20)
    at ei.fire (http://localhost:5173/node_modules/.vite/deps/mapbox-gl.js?v=b39e1061:722:132)
    at ei.update (http://localhost:5173/node_modules/.vite/deps/mapbox-gl.js?v=b39e1061:15664:246)
    at Map._render (http://localhost:5173/node_modules/.vite/deps/mapbox-gl.js?v=b39e1061:21568:115)
    at http://localhost:5173/node_modules/.vite/deps/mapbox-gl.js?v=b39e1061:21678:76

You can reproduce this by adding a second map to the demo html page:

kausaltech@0d2809e

Raster layer support

Hi,
Is it possible to support the raster layer? Like when we have a TMS or wms layer which has color classes (like a landcover map).

We have discrate, classified and continues rasters. I see legend already supports such data type. I feel we can read these information from layer metadata when source type is raster. A descrate and classifoed raster can have oprion to manually feed classes/color as key value pair and for the continues raster we can have a color ramp or an array of colors (max 100).

I can add its PR if you think this is something we can add to this project.

feat: Option to freeze legend

Some sources update frequently, but layers (and so the legend) do not need to change. Add an option ¿optional? that skips legend redraw when styledata event is triggered, at least if layers have not changed.

Verify that step expressions are interpreted according to spec

When interpreting numeric step expressions for colors, we are currently using the "other" label for the base color (stop_output_0 in the spec).

However, it looks to me that there should be some label like < [first step]. Also, this label should be ordered accordingly as the first label since it's numerically the first one also.

https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#step

I could just override the "other" label in the metadata, but it would be nice if the label automatically incorporated the value of the first step, and also it should be the first label and not the last. For example if the first step is 5, it would read < 5.
(Btw, I'm working in a non-English, multilingual context so something like up to 5 would be suboptimal)

It could even read "0-5" if we knew the minimum value in the data was 0, but I realize this might be out of scope.

I'm happy to implement at least a minimal "< [first step]" version if you agree this is needed.

Step label is missing for value 0

Label for value 0 is not rendered

'fill-color': [
    'step',
    ['get', 'property'],
    '#f00',
    0, '#00f',
    1, '#ff0',
    2, '#f0f',
]

Add unit in metadata for labels

Sometimes the only needed thing to add to labels is a unit, no need to map every label

Add maplibre-gl-js compatibility

Hi,
I'd like to know if this library is also working with maplibre-gl-js ?

Is there a way for the legend to show layers with spaces in their names?

Is there a way to accept layer IDs with spaces in them? It looks like mapbox GL handles layers with spaces in their names just fine, but those don't show in the legend.

Add support for lookup expressions

Support for ['get', {attribute}] would be a nice feature to have.

Workaround now is to declare a match expression and enumerate al possible values. Not very cool.

Possibility to customize 'OTHER' label

Uncategorized features are grouped under OTHER label. Need some way to customize this label, ideally through metadata > labels option.

Multiple legends if the layer ids are similar

If I have layers in my map like "layer","layer1","layer2", and pass in config options like this:

mapLegendRef.current = new LegendControl({
          collapsed: false,
          layers: {
             ["layer"]:"fill-color"
          },
          toggler: true,
});

Layers "layer1" and "layer2" will also be added because of the broad regex matching here:

mapboxgl-legend/src/LegendControl.ts

Line 104 in c770843

.filter(layer => !this._options.layers || layersIds.some(name => layer.id.match(name)))

Also, passing in a regex like [^layer$]:"fill-color" will work at first, but then the layer config appears to get overridden in subsequent updates, so that's not working either.