Display multiple MapPolygons via ListView and ListModel - qt

Question

I would like to display multiple MapPolygons. To structre it nicely, I would like to define the polygons in a separated file.
After some googling around, I think an approach with ListView and ListModel could work.
So far I tried to define the complete MapPolygon inside the ListElement{}. This produced an error, that a ListElement{} can not contain any nested elements.
So I defiend a viarable path and color in the ListElement{} and tried to delegate those to a MapPolygon.
This produces the error: "ListElement: cannot use script for property value"
The ListView:
ListView {
model: PolygonCoords {}
delegate: MapPolygon {
color: color
path: path
}
}
The ListModel, PolygonCoords.qml:
ListModel{
ListElement{
color: "blue"
path: [ //very big
{latitude: 47.30985701233802, longitude: 8.957498557565305},
{latitude: 48.31223969058969, longitude: 12.959643094792634},
{latitude: 50.31281785500094, longitude: 12.960823612887165},
{latitude: 47.31281654102718, longitude: 8.962966471196324},
{latitude: 47.30862993050194, longitude: 8.963243902017013},
{latitude: 47.30863115391583, longitude: 8.963151349827395},
{latitude: 47.30697209667029, longitude: 8.962058898768426},
{latitude: 47.30985701233802, longitude: 8.957498557565305}
]
}
ListElement {
color: "red"
path: [ //very big
{latitude: 45.30985701233802, longitude: 7.957498557565305},
{latitude: 41.31223969058969, longitude: 11.959643094792634},
{latitude: 54.31281785500094, longitude: 11.960823612887165},
{latitude: 45.31281654102718, longitude: 7.962966471196324},
{latitude: 45.30862993050194, longitude: 7.963243902017013},
{latitude: 45.30863115391583, longitude: 7.963151349827395},
{latitude: 45.30697209667029, longitude: 7.962058898768426},
{latitude: 45.30985701233802, longitude: 7.957498557565305}
]
}
}
How do I have to change my path-Variable that it is not read as a script and
is the ListView even the right approach or is there a better option?
#Update Thanks to #folibis, I got it working with a Repeater as long the path and the repeater are in the same file as the map. Since the file with the map is already huge, I would like to move as much as possible in its own file.
I cannot begin a file with property var points, so I thought of using Item as a wrapper in PolygonCoords.qml:
Item {
property var points: [
{
color: Qt.rgba(0, 80, 128, 0.5),
path: [ //very big
{latitude: 47.30985701233802, longitude: 8.957498557565305},
{latitude: 48.31223969058969, longitude: 12.959643094792634},
{latitude: 50.31281785500094, longitude: 12.960823612887165},
{latitude: 47.31281654102718, longitude: 8.962966471196324},
{latitude: 47.30862993050194, longitude: 8.963243902017013},
{latitude: 47.30863115391583, longitude: 8.963151349827395},
{latitude: 47.30697209667029, longitude: 8.962058898768426},
{latitude: 47.30985701233802, longitude: 8.957498557565305}
]
},
{
color: Qt.rgba(128, 80, 0, 0.5),
path: [ //very big
{latitude: 45.30985701233802, longitude: 7.957498557565305},
{latitude: 41.31223969058969, longitude: 11.959643094792634},
{latitude: 54.31281785500094, longitude: 11.960823612887165},
{latitude: 45.31281654102718, longitude: 7.962966471196324},
{latitude: 45.30862993050194, longitude: 7.963243902017013},
{latitude: 45.30863115391583, longitude: 7.963151349827395},
{latitude: 45.30697209667029, longitude: 7.962058898768426},
{latitude: 45.30985701233802, longitude: 7.957498557565305}
]
}
]
}
And then calling it like this:
Repeater {
model: PolygonCoords.points
MapPolygon {
color: Polygoncoords.points[index].color
border {width: 2; color: "grey"}
path: PolygonCoords.points[index].path
}
}
Here I get no error, but the neither a MapPolygon on the map.
I also tried it with naming the Item with an id and calling it like this:
model: PolygonCoords.ItemID.points
But with this, I got the error: TypeError: Cannot read property points of undefined.
I further tried moving the repeater with the points together in another file and then just calling PolygonCoords. Again, no error and no MapPolygon:
Item {
Repeater {
model: PolygonCoords.points
MapPolygon {
color: Polygoncoords.points[index].color
border {width: 2; color: "grey"}
path: PolygonCoords.points[index].path
}
}
property var points: [
{
color: Qt.rgba(0, 80, 128, 0.5),
path: [ //very big
{latitude: 47.30985701233802, longitude: 8.957498557565305},
{latitude: 48.31223969058969, longitude: 12.959643094792634},
{latitude: 50.31281785500094, longitude: 12.960823612887165},
{latitude: 47.31281654102718, longitude: 8.962966471196324},
{latitude: 47.30862993050194, longitude: 8.963243902017013},
{latitude: 47.30863115391583, longitude: 8.963151349827395},
{latitude: 47.30697209667029, longitude: 8.962058898768426},
{latitude: 47.30985701233802, longitude: 8.957498557565305}
]
},
{
color: Qt.rgba(128, 80, 0, 0.5),
path: [ //very big
{latitude: 45.30985701233802, longitude: 7.957498557565305},
{latitude: 41.31223969058969, longitude: 11.959643094792634},
{latitude: 54.31281785500094, longitude: 11.960823612887165},
{latitude: 45.31281654102718, longitude: 7.962966471196324},
{latitude: 45.30862993050194, longitude: 7.963243902017013},
{latitude: 45.30863115391583, longitude: 7.963151349827395},
{latitude: 45.30697209667029, longitude: 7.962058898768426},
{latitude: 45.30985701233802, longitude: 7.957498557565305}
]
}
]
}
And in the file with the map:
PolygonCoords {}
To make sure, I referenced PolygonCords right, I defined just a MapPolygon in it. This one was properly displayed on the map.
Any idea what I am missing?

Answer 1

Here is example to illustrate idea I was talking about. I've used Repeater instead of ListView since it is more suitable for your purpose I guess. The data array could be stored in a different javascript file.
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtLocation 5.6
import QtPositioning 5.6
ApplicationWindow {
id: mainWindow
width: 800
height: 600
visible: true
property var points: [
{
color: Qt.rgba(0, 80, 128, 0.5),
path: [
{latitude:59.91288302222718, longitude:10.728799819940349},
{latitude:59.91821810440818, longitude:10.737211227411649},
{latitude:59.912323649434825, longitude:10.754119873037723},
{latitude:59.90961270928307, longitude:10.764762878423767},
{latitude:59.90165073245826, longitude:10.759441375730745},
{latitude:59.908364741793115, longitude:10.748540878294307},
{latitude:59.9010050830971, longitude:10.741846084608},
{latitude:59.910387286199025, longitude:10.731632232668204},
]
},
{
color: Qt.rgba(128, 80, 0, 0.5),
path: [
{latitude:59.92101437751683, longitude:10.77077102661346},
{latitude:59.920842305970744, longitude:10.772916793815767},
{latitude:59.9168413910999, longitude:10.772830963132293},
{latitude:59.915206469874626, longitude:10.769741058354015},
{latitude:59.91787393143297, longitude:10.765792846683212},
]
}
]
Map {
id: map
anchors.fill: parent
plugin: Plugin { id: mapPlugin; name: "esri" }
center: QtPositioning.coordinate(59.91, 10.75)
zoomLevel: 14
MouseArea {
anchors.fill: parent
onPressed: {
var coord = map.toCoordinate(Qt.point(mouse.x,mouse.y));
console.log(coord.latitude, coord.longitude);
}
}
Repeater {
model: points
MapPolygon {
color: points[index].color
border{ width: 1; color: "grey" }
path: points[index].path
}
}
}
}