CODEWITHSUNDEEP
qtqml
Seong
Seong

Reputation: 626

How to add markers in Map using latitude and longitude in ListView with qml

I am trying to add markes into map by using the coordinates (latitude and longitude) specified in a listview. I could manage to write code for the list of coordinates and map working indivisually by following qt tutorials. But, still I don't have clear idea of connecting to the list to the map so that the list items are marked in the map.

my main.qml goes like this.

import QtQuick 2.10
import QtQuick.Controls 2.3
import QtLocation 5.6
import QtPositioning 5.6
ApplicationWindow {

ListModel {
    id: locationModel
    ListElement {
        lat: 0; lon: 0
    }
    ListElement {
        lat: 10; lon: 25
    }
}

ListView {
    id: listView
    clip: true

    model: locationModel
    delegate: listDelegate
    headerPositioning: ListView.OverlayHeader
    z: 2
    header: headerComponent
    focus: true
}

Rectangle {
x: 326
y: 400
width: 300
height: 300
visible: true

Plugin {
    id: mapPlugin
    name: "esri" // "mapboxgl", "esri", ...
    // specify plugin parameters if necessary
    // PluginParameter {
    //     name:
    //     value:
    // }
}

Map {
    id: place
    anchors.fill: parent
    plugin: mapPlugin
    center: QtPositioning.coordinate(0, 0)
    zoomLevel: 10
}
}
}

Upvotes: 0

Views: 1219

Answers (1)

Yoann Quenach de Quivillic
Yoann Quenach de Quivillic

Reputation: 5336

Just use a MapItemView

import QtQuick 2.10
import QtQuick.Controls 2.3
import QtLocation 5.6
import QtPositioning 5.6

ApplicationWindow {
    visible: true
    width: 500
    height: 500

    ListModel {
        id: locationModel
        ListElement {lat: 0; lon: 0; color: "blue"}
        ListElement {lat: 5; lon: 12.5; color: "green"}
        ListElement {lat: 10; lon: 25; color: "red"}
    }

    Plugin {
        id: mapPlugin
        name: "esri"
    }

    Map {
        id: place
        anchors.fill: parent
        plugin: mapPlugin
        center: QtPositioning.coordinate(0, 0)
        zoomLevel: 5
        MapItemView
        {
            model: locationModel
            delegate: MapQuickItem {
                coordinate: QtPositioning.coordinate(lat, lon)
                anchorPoint: Qt.point(10,10)
                sourceItem: Rectangle {
                    width: 20
                    height: 20
                    radius: 10
                    color: model.color
                }
            }
        }
    }
}

Upvotes: 1

Related Questions