Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Click Events on QtLocation with MapBox with GeoJson
Forum Updated to NodeBB v4.3 + New Features

Click Events on QtLocation with MapBox with GeoJson

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
qtlocationmapboxglgeojsonmap
1 Posts 1 Posters 659 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    shambalah
    wrote on 25 May 2023, 21:11 last edited by
    #1

    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

    1 Reply Last reply
    0

    1/1

    25 May 2023, 21:11

    • Login

    • Login or register to search.
    1 out of 1
    • First post
      1/1
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved