Le portail francophone de la géomatique

Bonjour,

Je me permets de vous écrire pour vous demander votre aide sur le sujet des infos bulles avec Openlayers. Je suis débutant en Webmapping et je vous avoue ne pas maitriser tous les rudiments des erreurs que j'obtiens. J'ai une base de données sous PostgreSQL, des couches disponibles sous Géoserver et un début d'outil webmapping en construction grâce à la librairie JS Openlayers.

J'aimerais créer des infos bulles pour afficher des informations de mes tables attributaires de mes différentes tables de données. J'ai un code créé mais qui me ressort des erreurs de ce type :

"Uncaught TypeError: Cannot read properties of null (reading 'ol_uid')
    at o (util.js:33:14)
    at n.getTileGridForProjection (TileImage.js:245:23)
    at n.getFeatureInfoUrl (TileWMS.js:183:23)
    at n. (main_sains_grille.js:296:37)
    at n.dispatchEvent (Target.js:114:11)
    at n.handleMapBrowserEvent (PluggableMap.js:1144:14)
    at n.dispatchEvent (Target.js:114:11)
    at n. (MapBrowserEventHandler.js:156:16)"

Je ne comprends pas d'où peux venir l'erreur. Est ce un problème lié à la projection ? ou autre ? Pouvez-vous m'aider si vous avez des informations s'il vous plait ?

Je vous transmets ci-dessous la partie de mon code sur les infos bulles. Info-bulles qui doivent afficher le nom de la commune lorsque je clique sur la couche correspondante. (couche qui est donc une WMS TILE, d'où le GetFeatureInfo ...)

 const container = document.getElementById('popup');
const content = document.getElementById('popup-content');
const closer = document.getElementById('popup-closer');

/**
 * Create an overlay to anchor the popup to the map.
 */

const popup = new ol.Overlay({
    element: container,
    autoPan: true,
    autoPanAnimation: {
        duration: 250,
    },
});

map.addOverlay(popup);

// Add a click handler to hide the popup.

closer.onclick = function(){
    popup.setPosition(undefined);
    closer.blur();
    return false;
};

/**
 * Add a click handler to the map to render the popup.
 */

map.on("singleclick", (evt) => {
    content.innerHTML ='';
    const resolution = mapView.getResolution();

    const url = commune.getSource().getFeatureInfoUrl(evt.coordinate,resolution,'EPSG : 2154', {
        'INFO_FORMAT' : 'application/json',
        'propertyName' :'nom'
    });
    
    
    if (url){
        $.getJSON(url,function(data){
        const feature = data.features [0];
        const props = feature.properties;
        content.innerHTML= " Nom de la commune :  " + ' '+ props.nom.toUpperCase() +' ';
        popup.setPosition(evt.coordinate);
          })
        } else {
          popup.setPosition (undefined);
        }
});