Click Events on QtLocation with MapBox with GeoJson

shambalah

Hi,

I recently switched from OpenStreetMap to MapBox to be able to use GeoJSON within the map as per my requirements.
Using GeoJSON I can show,style and add filters to objects on the map, thus also creating 3D objects.
As noted in the Qt documentation all MapBox API is available to Qt with a few guide lines but I have not found any guide line on adding click event on the DynamicParameter items.

Currently I am using the example from MapBox: https://docs.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan/
And I added a simple click event (according to the MapBox docs at https://docs.mapbox.com/mapbox-gl-js/example/polygon-popup-on-click/) that can be seen here : https://jsfiddle.net/qLb67sgc/

My QML integration is as follows:

import QtQuick 2.15
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.2
import QtPositioning 5.15
import QtLocation 5.15
import QtQuick.Layouts 1.3

Item {
    id: root
    Component.onCompleted: {
        loadGeoJSON("https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson")
    }

   function loadGeoJSON(url) {
        var request = new XMLHttpRequest();
        request.onreadystatechange = function() {
            if (request.readyState === XMLHttpRequest.DONE) {
                if (request.status === 200) {
                    var response = JSON.parse(request.responseText);
                    geojsonSource.data = JSON.stringify(response);
                } else {
                    console.error("Failed to load GeoJSON:", request.status);
                }
            }
        };
        request.open("GET", url);
        request.send();

    }

    Map {
        id: map
        anchors.fill: parent
        center: QtPositioning.coordinate(41.86625, -87.61694) 
        zoomLevel: 16
        tilt: 40
        bearing: 20

        plugin: Plugin {
            name: "mapboxgl"
            PluginParameter {
                name: "mapbox.access_token"
                value: "TOKEN"
            }

            PluginParameter {
                name: "mapboxgl.mapping.additional_style_urls";
                value: "mapbox://styles/mapbox/outdoors-v12"
            }
        }
        MapParameter {
            id: geojsonSource
            property string data: ''
            type: "source"
            property string name: "indoorMap"
            property string sourceType: "geojson"
         }
         MapParameter {
            id: levelLayer
            type: 'layer'
            property string source: "indoorMap"
            property string name: "levelLayer"
            property string layerType: "fill-extrusion"
            property real minzoom: 15.0
         }
        MapParameter {
            type: "paint"
            property string layer: "levelLayer"
            property var fillExtrusionColor: ['get', 'color']
            property var fillExtrusionOpacity: .5
            property var fillExtrusionHeight: ['get', 'height']
            property var fillExtrusionBase: ['get', 'base_height']
         }
}

This code works exactly the same as the tutorial on MapBox, with the exclusion of the following:

map.on('click', 'room-extrusion', (e) => {
        new mapboxgl.Popup()
        .setLngLat(e.lngLat)
        .setHTML(e.features[0].properties.name)
        .addTo(map);
 });

Is there a way of accessing the features as noted in the event handler in MapBox example?
If not, is there a way to calculate the mouse position to the GeoJSON features somehow?

This is after a whole day of trying, hope someone has any idea how to do this.

Thank you
Ofek