Delegate for different graphical objects in MapItemView

Thomas W.

I want to write an application which shows different graphical objects on an map. I want to use MapItemView. The data for my application is in a model. It can contain circle , polygones or other graphical objects. I don't know how I can write a delegate for different graphical objects. It work's fine for example for circles. In this case I use the MapCircleClass.

p3c0

Hi @Thomas-W ,
Personally I haven't tried QtLocations myself but looking at the documentation it seems that it somewhat similar to ListView in terms of functionality for eg. it uses model, delegete etc..
In case of ListVIew we could assign multiple delegates by for eg. assigning it a Component containing a Loader which loads different Items. Something like this:
http://doc.qt.io/qt-5/qml-qtquick-loader.html#using-a-loader-within-a-view-delegate

Inside the Loader you can include a condition so that one particular Item will be loaded as required.

Thomas W.

Hi p3Co, I have tried your hint. Below is the source code of a simple example, but it doesn't work. Any ideas?

MyModel.qml

import QtQuick 2.0
ListModel {
     id: elementModel
     ListElement {
         type: "circle"
         refLong: 51.23
         refLat:  7.9
     }
     ListElement {
         type: "polygon"
         refLong: 52.23
         refLat:   8.0
     }
 }

MultiDelagte.qml

import QtQuick 2.0
import QtPositioning 5.6
import QtLocation 5.6

Loader {
    id: multiDelegate
    anchors.fill: parent
    anchors.topMargin: 2
    sourceComponent: bestDelegate(type)

    function bestDelegate(t) {
        if (t === "circle")
            return circleDelegate
        return polygonDelegate // t == "string"
    }

    Component {
        id: circleDelegate
        MapCircle {
            radius: 5000
            color: "red"
            center {
                latitude: refLat
                longitude: refLong
            }
        }
    }

    Component {
        id: polygonDelegate

        MapPolygon {
            color: "green"
            path: [{
                    latitude: refLat,
                    longitude: refLong
                }, {
                    latitude: refLat,
                    longitude: refLong
                }, {
                    latitude: refLat,
                    longitude: refLong
                }]
        }
    }
}

main.qml:

import QtQuick 2.5
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1
import QtPositioning 5.6
import QtLocation 5.6



ApplicationWindow {
    id: appWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Air Companion")

    property variant centerCoordinate: QtPositioning.coordinate(51.3666667, 7.7)

        //! [centercoordinate]
        Plugin {
            id: myPlugin
            name: "osm"
        }

    Map
    {
        id:myMap
        plugin: myPlugin
        center: centerCoordinate
        zoomLevel: 15
        anchors.fill:parent
        MapItemView {
              id: dataView
              model: MyModel{}
              delegate: MultiDelegate{}
            }
    }
}

p3c0

@Thomas-W Are you getting any errors ?
Instead of Loader as root element inside the MultiDelagteq.ml use Component and then use Loader inside it to load the required componenets.

Thomas W.

@p3c0 I'm getting no errors. I have tried to use Component as the root element. But it doesn't work, no circle or polygon was shown on the map. I have tried nearly the same example with a ListView. In this case it worked well.

Has anyone a working sample?

VRonin

if (t === "circle")

one = too much?

p3c0

@Thomas-W. Unfortunately I too haven't worked with Maps but did you debugging the code to find out at what point it fails? That would be more useful.

p3c0

@VRonin said in Delegate for different graphical objects in MapItemView:

if (t === "circle")

one = too much?

This is Ok in Javascript.