This simple control adds a dynamic legend component to a MapLibre GL map, where, for a given layer and property, the average value of this property for the features currently rendered is displayed and a tick points to its position in the gauge scale.

It's based in the gauge I implemented in the app Distanciamiento peatonal in Madrid (a map where the width of the sidewalks in Madrid are evaluated in terms of keeping the required social distancing), but made into a proper parametric control.

Check the live example here.

It has no dependencies, but if you want to use it as an UMD bundle, you need to

yarn install
yarn build

You will find the deliverables in the /dist folder. Just reference the CSS in your html

 <link rel="stylesheet" type="text/css" href="dist/gaugelegend.css" />

If you want to use the global GaugeLegend object instead of importing the module, then you need to add the script too

 <script src="dist/gaugelegend.js"></script>

Then, in your script

const map = new maplibre.Map({ ... });

map.on('load', function () {
    map.addLayer({
        id: 'my_layer',
        ...
    });
    const gauge = new GaugeLegend({        
        layer: 'my_layer',
        property: 'my_property',
        colors: ["#007080", "#546e82", "#7f6984", "#a16287", "#c25689", "#e0448b", "#ff1d8e"],
        breaks: [7,17,32,57,129,253,334]
    });
    map.addControl(gauge, 'top-right');
})

And Ta-da!

Custom themes can be used by adding the needed classes in your CSS:

.gauge-mycustomtheme {
    /* Using semitransparent background
    lightens the visual weight of the control */
    background: my_background_color;
}
.text-mycustomtheme {
    color: my_font_color;
    /* Adding a halo to improve readability 
    if semitransparent background was used */
    text-shadow: 0 0 3px my_background_color_no_transparency;
}

The tick won't be themed as its color doesn't rely on CSS, but this issue can be overrided:

gauge._tick.setAttribute('stroke', my_tick_color);

• Change CSS classes to maplibre namespace when available.

Example favicon by Nick Roach