How can I assign an ordering number to dynamically created component in qml?

Question

My code (actually an official example) can draw markers and polylines on the point which I clicked. And I want that every marker has their own Text which represents its order. Text "1" for the first marker, and Text "2" for the second marker, for example. But markerCount(declared in componentCreation.js) for the Text does not increase, so all of the Text of the marker is "1" which is a default.

In the code, Rectangle which is MapQuickItem's child represents a marker, and it is dynamically created by createElements() (componentCreation.js). markerCount++ is implemented in Component.onCompleted.

The code is:

componentCreation.js

var arrayLines = []
var lineComplete = false
var markerCount = 1

function createElements(point) {

    console.log(markerCount)
    var componentMarker = Qt.createComponent("Marker.qml");

    if (componentMarker.status === Component.Ready) {
        var markerFirstCorner = componentMarker.createObject(map);
        markerFirstCorner.coordinate = map.toCoordinate(point)

        map.addMapItem(markerFirstCorner)
    } else {
        console.log("Marker not created")
    }

    var theLine

    if (arrayLines.length === 0) {
        createLine(point)
    } else {
        theLine = arrayLines[arrayLines.length-1]

        theLine.mainPolyline.addCoordinate(map.toCoordinate(point))
    }
}

function createLine(point){

    var componentLine = Qt.createComponent("Line.qml")

    if (componentLine.status === Component.Ready) {
        var lineFirstCorner = componentLine.createObject(map);
        lineFirstCorner.mainPolyline.addCoordinate(map.toCoordinate(point))

        map.addMapItem(lineFirstCorner)
        arrayLines.push(lineFirstCorner)
    } else {
        console.log("Line not created")
    }
}

main.qml

import QtQuick 2.11
import QtQuick.Window 2.11
import QtLocation 5.11
import QtPositioning 5.8
import QtQuick.Controls 2.1

import "componentCreation.js" as MyScript

ApplicationWindow {
    id: applicationWindow
    visible: true
    width: 640
    height: 480

    Plugin {
        id: mapPlugin
        name: "googlemaps"
    }

    Map {
        id: map
        anchors.fill: parent
        zoomLevel: 12
        plugin: mapPlugin
        center: QtPositioning.coordinate(35.8926195, 128.6000172)

        MouseArea{
            id: mouseArea
            anchors.fill: parent
            z: 1
            onClicked: {
                console.log("Before creation : " + MyScript.markerCount)
                var point = Qt.point(mouse.x, mouse.y)
                console.log()
                console.log("You clicked : " + map.toCoordinate(point))
                MyScript.createElements(Qt.point(mouse.x,mouse.y))
            }
        }
    }
}

Marker.qml

import QtQuick 2.0
import QtLocation 5.11

import "componentCreation.js" as MyScript

MapQuickItem {

    property alias marker: marker

    id: marker
    sourceItem: Rectangle {
        width: 50
        height: 50
        color: "transparent"
        Image {
            anchors.fill: parent
            source: "images/drone.svg" // Ignore warnings from this
            sourceSize: Qt.size(parent.width, parent.height)
        }
        Text {
            anchors.fill: parent
            text: { MyScript.markerCount }
        }

        Component.onCompleted: {
            MyScript.markerCount++
            console.log("markerCount: " + MyScript.markerCount)
        }
    }
    opacity: 1.0
    anchorPoint: Qt.point(sourceItem.width/2, sourceItem.height/2)
}

Line.qml

import QtQuick 2.0
import QtLocation 5.8

MapPolyline {

    property alias mainPolyline: mainPolyline

    id: mainPolyline
    line.width: 3
    line.color: 'black'
}

I'm new to Qt and Qml. I don't know why markerCount does not increase. Please tell me why or give me another way to order the markers.

Thank you for your help.

Answer 1

You are complicating yourself too much, in case you want to store a lot of information the correct thing is to use a model, in this case ListModel, and a view, in this case MapItemView, that has as a delegate the Marker, then use a property to save the index that it is obtained by using the count property of the model:

Marker.qml

import QtQuick 2.0
import QtLocation 5.11

MapQuickItem {
    id: marker
    property alias text: txt.text
    sourceItem: Rectangle {
        width: 50
        height: 50
        color: "transparent"
        Image {
            anchors.fill: parent
            source: "images/drone.svg" // Ignore warnings from this
            sourceSize: Qt.size(parent.width, parent.height)
        }
        Text {
            id: txt
            anchors.fill: parent
        }
    }
    opacity: 1.0
    anchorPoint: Qt.point(sourceItem.width/2, sourceItem.height/2)
}

main.qml

import QtQuick 2.11
import QtQuick.Window 2.11
import QtLocation 5.11
import QtPositioning 5.8
import QtQuick.Controls 2.1

ApplicationWindow {
    id: applicationWindow
    visible: true
    width: 640
    height: 480
    Plugin {
        id: mapPlugin
        name: "googlemaps"
    }
    ListModel{
        id: md
    }
    Map {
        id: map
        anchors.fill: parent
        zoomLevel: 12
        plugin: mapPlugin
        center: QtPositioning.coordinate(35.8926195, 128.6000172)
        MapItemView{
            model: md
            delegate: Marker{
                text: title
                coordinate: QtPositioning.coordinate(coords.latitude, coords.longitude)
            }
        }
        Line{
            id: li
        }

        MouseArea{
            id: mouseArea
            anchors.fill: parent
            z: 1
            onClicked: {
                var point = Qt.point(mouse.x, mouse.y)
                var coord = map.toCoordinate(point);
                var text = md.count + 1;
                md.append({"coords": coord, "title": text})
                li.addCoordinate(coord)
            }
        }
    }
}

Line.qml

import QtQuick 2.0
import QtLocation 5.8

MapPolyline {
    id: mainPolyline
    line.width: 3
    line.color: 'black'
}