Legend in openlayers with HTML tag

Question

I'm using the following code to create the legends in Openlayers http://viglino.github.io/ol-ext/examples/legend/map.control.legendstat.html.

A question, I would like to insert html tag, for example, the link to a page. It's possible?

Answer 1

You can inspect the code of the example on the site. You will see the following

legend.addItem({ title:'2.600.000', properties: { pop: 2600000 }, typeGeom: 'Point'});

The added row's fire a select event, so you could add a title and your href link to the properties and open that link on select.

Here is a better example of this component: https://viglino.github.io/ol-ext/examples/legend/map.control.legend.html

EDIT:

const legend = new ol.legend.Legend({
        title: 'Legend',
    })
    
    const legendCtrl = new ol.control.Legend({ 
        legend: legend,
        collapsed: false
    });
    
    legend.addItem({ title: 'Google', properties: {link: 'http://www.google.com'} });
    legend.addItem({ title: 'Apple', properties: {link: 'http://www.apple.com'} });
    
    legend.on('select', function(event) {
        window.open(event.item.get('properties').link);
        
    });