How to add markers (fixed and/or on mouseover) with popup text

[petricf]

Is your feature request related to a problem? Please describe.
Adding markers including popup text and probably custom symbol/color. Example code would be very helpful.

Describe the solution you'd like
Add markers when using QMapLibreWidget / GLWidget avoiding QML.

in Javascript you have fixed markers (popup when clicking on it):

const marker = new maplibregl.Marker({color:"#ff0000"})
   .setLngLat(<lng>,<lat>)
   .setPopup (new maplibregl.Popup ().setText ("Here am i"))
   .addTo(map);

On mouseover (popup when mouse is over it):

map.on('load', async () => {
   const image = await map.loadImage('https://maplibre.org/maplibre-gl-js/docs/assets/custom_marker.png');
   map.addImage('custom-marker', image.data);

   map.addSource('places', {
       'type': 'geojson',
       'data': {
           'type': 'FeatureCollection',
           'features': [
              // repeat this for each location
               {
                   'type': 'Feature',
                   'properties': {
                       'description':
                           'popup text'
                   },
                   'geometry': {
                       'type': 'Point',
                       'coordinates': [ <lng>,<lat> ]
                   }
               },
           ]
       }
   });

   // Add a layer showing the places.
   map.addLayer({
       'id': 'places',
       'type': 'symbol',
       'source': 'places',
       'layout': {
           'icon-image': 'custom-marker',
           'icon-overlap': 'always'
       }
   });

   // Create a popup, but don't add it to the map yet.
   const popup = new maplibregl.Popup({
       closeButton: false,
       closeOnClick: false
   });

   map.on('mouseenter', 'places', (e) => {
       // Change the cursor style as a UI indicator.
       map.getCanvas().style.cursor = 'pointer';

       const coordinates = e.features[0].geometry.coordinates.slice();
       const description = e.features[0].properties.description;

       // Ensure that if the map is zoomed out such that multiple
       // copies of the feature are visible, the popup appears
       // over the copy being pointed to.
       while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
           coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
       }

       // Populate the popup and set its coordinates
       // based on the feature found.
       popup.setLngLat(coordinates).setHTML(description).addTo(map);
   });

   map.on('mouseleave', 'places', () => {
       map.getCanvas().style.cursor = '';
       popup.remove();

Describe alternatives you've considered
Implementation in Javascript

Additional context
Would like to have it as part of maplibre-qt