How to auto zoom the Qml Map to fit two MapQuickItems - qt

I have Qt Qml application where I need to display the map with two MapQuickItems. One is taxi another is customer. I want to display both of them inside the map. And I want the map to automatically zoomin or zoomout as the taxi approaches the customer. There is no routing or gestures involved. User should not be able to interact with the map.
I tried to play around with map.center property. But it didn't work well when the taxi is far away.
import QtQuick 2.12
import QtQuick.Window 2.12
import QtPositioning 5.12
import QtLocation 5.5
Rectangle
{
id: mapWindow
visible: false
property real taxiLatitude: 0
property real taxiLongitude: 0
property real customerLatitude: 0
property real customerLongitude: 0
Plugin
{
id: googleMap
name: "googlemaps"
}
Map
{
id: map
anchors.fill: mapWindow
plugin: googleMap
center: QtPositioning.coordinate(taxiLatitude, taxiLongitude) //positionSource.position.coordinate
zoomLevel: 17
copyrightsVisible: true
MapQuickItem
{
id: markerTaxi
anchorPoint.x: imageHuman.width/4
anchorPoint.y: imageHuman.height
coordinate: QtPositioning.coordinate(customerLatitude, taxiLongitude)
sourceItem: Image
{
id: imageHuman
width: 40
height: 40
source: "qrc:/Images/extrapics/humanIcon.png"
}
}
MapQuickItem
{
id: markerCustomer
anchorPoint.x: image.width/4
anchorPoint.y: image.height
coordinate: QtPositioning.coordinate(taxiLatitude, taxiLongitude)
sourceItem: Image
{
id: image
width: 40
height: 40
source: "qrc:/Images/extrapics/point.png"
}
}
}
}
I need to fit both taxi and customer inside the map and map should auto zoom in as the taxi approaches the customer.
I tried to set the visible region like below. But it dint help. It shows a different region (North america). But the region which I set is on completely different continet.
visibleRegion: QtPositioning.rectangle(QtPositioning.coordinate(12.921527, 75.092244), QtPositioning.coordinate(12.726949, 75.014545))

Use a Timer to update the map using fitViewportToMapItems()
import QtQuick 2.12
import QtQuick.Window 2.12
import QtPositioning 5.12
import QtLocation 5.5
Rectangle
{
id: mapWindow
visible: false
property real taxiLatitude: 0
property real taxiLongitude: 0
property real customerLatitude: 0
property real customerLongitude: 0
Plugin
{
id: googleMap
name: "googlemaps"
}
Timer
{
id: mapRefreshtimer
running: true
interval: 2000
repeat: true
onTriggered:
{
map.fitViewportToMapItems()
}
}
Map
{
id: map
anchors.fill: mapWindow
plugin: googleMap
MapQuickItem
{
id: markerTaxi
anchorPoint.x: imageHuman.width/4
anchorPoint.y: imageHuman.height
coordinate: QtPositioning.coordinate(customerLatitude, taxiLongitude)
visible: true
sourceItem: Image
{
id: imageHuman
width: 40
height: 40
source: "qrc:/Images/extrapics/humanIcon.png"
}
}
MapQuickItem
{
id: markerCustomer
anchorPoint.x: image.width/4
anchorPoint.y: image.height
coordinate: QtPositioning.coordinate(taxiLatitude, taxiLongitude)
visible: true
sourceItem: Image
{
id: image
width: 40
height: 40
source: "qrc:/Images/extrapics/point.png"
}
}
}
}

Related

Qt Select At Most 1 Marker on Map

In my code every marker that I clicked are selected(turn into green from red). I want just 1 can change. When I click another marker the marker I clicked before turns red again. Or When I click an empty area the marker I clicked before turns red again.
In qml my Item's code:
Component {
id: hazardous_img
MapQuickItem {
id: hazardousitem
anchorPoint.x: image.width/4
anchorPoint.y: image.height
coordinate: position
property bool isClicked: false
MouseArea {
anchors.fill: parent
onDoubleClicked: {
mainwindow.hazardousIconClicked(mapview.toCoordinate(Qt.point(mouse.x,mouse.y)))
}
onClicked: {
if (isClicked === false) {
image.source = "qrc:/grn-pushpin.png"
isClicked = true
} else {
image.source = "qrc:/red-pushpin.png"
isClicked = false
}
}
}
sourceItem: Image {
id: image
source: "qrc:/red-pushpin.png"
}
}
}
In QML this is usually done with using a ButtonGroup, but as you're not using AbstractButtons you need to write it yourself. Here is my solution for it.
I've used the ListModel to not only store the coordinates of each marker, but also a selected flag which is set to false by default. In the delegate I'm using the selected data role to show if a marker is selected or not.
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtLocation 5.15
import QtPositioning 5.15
ApplicationWindow {
id: window
width: 640
height: 480
visible: true
title: qsTr("Map")
ListModel { id: markerModel }
Plugin {
id: mapPlugin
name: "osm"
}
Map {
id: map
anchors.fill: parent
plugin: mapPlugin
center: QtPositioning.coordinate(59.91, 10.75) // Oslo
zoomLevel: 14
MouseArea {
anchors.fill: parent
onDoubleClicked: {
var coordinate = map.toCoordinate(Qt.point(mouse.x, mouse.y))
var jsonObject = JSON.parse(JSON.stringify(coordinate))
jsonObject["selected"] = false
markerModel.append(jsonObject)
}
onClicked: map.deselectAll()
}
MapItemView {
model: markerModel
delegate: markerDelegate
}
function deselectAll() {
for (var i = 0; i < markerModel.count; ++i)
markerModel.setProperty(i, "selected", false)
}
Component {
id: markerDelegate
MapQuickItem {
id: markerItem
required property int index
required property real latitude
required property real longitude
required property bool selected
anchorPoint.x: waypointMarker.width / 2
anchorPoint.y: waypointMarker.height / 2
coordinate: QtPositioning.coordinate(latitude, longitude)
sourceItem: Rectangle {
id: waypointMarker
width: 20
height: 20
radius: 20
border.width: 1
border.color: mouseArea.containsMouse ? "red" : "black"
color: markerItem.selected ? "red" : "gray"
}
MouseArea {
id: mouseArea
hoverEnabled: true
anchors.fill: parent
onClicked: {
map.deselectAll()
markerModel.setProperty(markerItem.index, "selected", true)
}
}
}
}
}
}
I came up with yet another solution without looping over all items in the model. It just stores the index of the selected marker in a dedicated property. This has the drawback that if the model order changes the index can become invalid, also potential multi selection is hard to handle, but on the other hand it is faster because it doesn't need to iterate over all items.
I experimented a lot with DelegateModel, it seems to be a perfect match if one could use it in combination with MapItemView, because of the groups and the attached properties like inGroupName.
After that I've tried ItemSelectionModel, but it seems it is only intended to be used in combination with a view, e.g. TreeView. I couldn't find out how to generate a QModelIndex in QML without a TreeView.
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtLocation 5.15
import QtPositioning 5.15
ApplicationWindow {
id: root
width: 640
height: 480
visible: true
title: qsTr("Map")
property int selectedMarker: -1
Map {
id: map
anchors.fill: parent
plugin: Plugin {
id: mapPlugin
name: "osm"
}
center: QtPositioning.coordinate(59.91, 10.75) // Oslo
zoomLevel: 14
MouseArea {
anchors.fill: parent
onDoubleClicked: {
var coordinate = map.toCoordinate(Qt.point(mouse.x, mouse.y))
markerModel.append(JSON.parse(JSON.stringify(coordinate)))
}
onClicked: root.selectedMarker = -1
}
MapItemView {
model: ListModel { id: markerModel }
delegate: markerDelegate
}
Component {
id: markerDelegate
MapQuickItem {
id: markerItem
required property int index
required property real latitude
required property real longitude
anchorPoint.x: waypointMarker.width / 2
anchorPoint.y: waypointMarker.height / 2
coordinate: QtPositioning.coordinate(latitude, longitude)
sourceItem: Rectangle {
id: waypointMarker
width: 20
height: 20
radius: 20
border.width: 1
border.color: mouseArea.containsMouse ? "red" : "black"
color: markerItem.index === root.selectedMarker ? "red" : "gray"
}
MouseArea {
id: mouseArea
hoverEnabled: true
anchors.fill: parent
onClicked: root.selectedMarker = markerItem.index
}
}
}
}
}
I promise this is the last answer on that question.
This one is using an ItemSelectionModel and a few undocumented functions, e.g. ListModel.index(row, col).
itemSelectionModel.hasSelection is used in the color binding to trigger a reevaluation in order to call isRowSelected and set the color accordingly whenever the selection has changed.
If the user clicks on the background the clear() is called to clear the selection.
I think out of the three this is the best solution. It can be easily upgraded to allow multi selection as shown below. Also the ItemSelectionModel can be used by other views to show the data and selection.
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtLocation 5.15
import QtPositioning 5.15
import QtQml.Models 2.15
ApplicationWindow {
id: root
width: 640
height: 480
visible: true
title: qsTr("Map")
Map {
id: map
anchors.fill: parent
plugin: Plugin {
id: mapPlugin
name: "osm"
}
center: QtPositioning.coordinate(59.91, 10.75) // Oslo
zoomLevel: 14
MouseArea {
anchors.fill: parent
onDoubleClicked: function(mouse) {
markerModel.append(map.toCoordinate(Qt.point(mouse.x, mouse.y)))
}
onClicked: itemSelectionModel.clear()
}
MapItemView {
model: ListModel { id: markerModel }
delegate: markerDelegate
}
ItemSelectionModel {
id: itemSelectionModel
model: markerModel
}
Component {
id: markerDelegate
MapQuickItem {
id: markerItem
required property int index
required property real latitude
required property real longitude
anchorPoint.x: waypointMarker.width / 2
anchorPoint.y: waypointMarker.height / 2
coordinate: QtPositioning.coordinate(latitude, longitude)
sourceItem: Rectangle {
id: waypointMarker
width: 20
height: 20
radius: 20
border.width: 1
border.color: mouseArea.containsMouse ? "red" : "black"
color: {
itemSelectionModel.hasSelection
return itemSelectionModel.isRowSelected(markerItem.index) ? "red" : "gray"
}
}
MouseArea {
id: mouseArea
hoverEnabled: true
anchors.fill: parent
onClicked: itemSelectionModel.select(markerModel.index(markerItem.index, 0),
ItemSelectionModel./*ClearAnd*/Select)
}
}
}
}
}

Displaying Marker in QT QML Map

I'm trying to add marker in QT QML Map. This is the code that I use to add a marker in Map, but the marker is not displaying. Please do help! I'm a beginner in QT Programming. Sorry for my grammar. Thank you!
Plugin {
id: mapPlugin
name: "osm"
}
function addMarker(latitude, longitude)
{
var Component = Qt.createComponent("qrc:///views/marker.qml")
var Item = Component.createObject(window, { coordinate:
QtPositioning.coordinate(latitude, longitude) })
Map.addMapItem(Item)
}
Map {
anchors.fill: parent
plugin: mapPlugin
center: QtPositioning.coordinate(59.14, 14.15)
zoomLevel: 14
Component.onCompleted:
{
addMarker(59.14, 14.15)
}
}
Marker.qml
MapQuickItem
{
id: marker
anchorPoint.x: marker.width / 4
anchorPoint.y: marker.height
sourceItem: Image
{
Image
{
id: icon
source: "marker.png"
sourceSize.width: 40
sourceSize.height: 40
}
}
}
You have to use the ids to refer to the components, for example if you had Map and run Map.addMapItem(...) to what Map would the item be added ?. On the other hand you have a bad habit: you use names of existing elements such as Item that is already a type, in this case change it to item to avoid confusion, considering the above the solution is:
import QtQuick 2.9
import QtQuick.Window 2.2
import QtLocation 5.12
import QtPositioning 5.12
Window {
id: window
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Plugin {
id: mapPlugin
name: "osm"
}
function addMarker(latitude, longitude)
{
var Component = Qt.createComponent("qrc:///views/marker.qml")
var item = Component.createObject(window, {
coordinate: QtPositioning.coordinate(latitude, longitude)
})
map.addMapItem(item)
}
Map {
id: map
anchors.fill: parent
plugin: mapPlugin
center: QtPositioning.coordinate(59.14, 14.15)
zoomLevel: 14
Component.onCompleted:addMarker(59.14, 14.15)
}
}
On the other hand in marker you point out that an Image has as a child another Image, do you think it is correct?, it is not necessary so the corrected Marker code is:
import QtQuick 2.0
import QtLocation 5.12
MapQuickItem{
id: marker
anchorPoint.x: marker.width / 4
anchorPoint.y: marker.height
sourceItem: Image{
id: icon
source: "marker.png"
sourceSize.width: 40
sourceSize.height: 40
}
}
The complete example is in the following link

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

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.
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'
}

QML Map plugin "itemsoverlay" does not clip to the base map for large zoom, using visibleRegion()

I have a somehow minimal example of a QML map (OSM plugin) and a respective map overlay with plugin itemsoverlay.
The following code will clip the overlay to the map, no matter what movement or zoom the map undergoes.
However, I can zoom the base map closer than the maximum OSM zoom level (resulting in some zoom level 21.07), e.g. by using mapBase.visibleRegion = rect (see below). But the overlay will not zoom closer than this, the zoom will stay at level 19.
You can test this by clicking on the red circle.
Any Idea how to have the overlay still have the same zoom level as the base map?
import QtQuick.Window 2.2
import QtQuick 2.7
import QtLocation 5.8
import QtPositioning 5.8
import QtQuick.Controls 2.2
Window {
width: 512
height: 512
visible: true
Map {
id: mapBase
anchors.fill: parent
gesture.enabled: true
plugin: Plugin { name: "osm" }
z: parent.z + 1
maximumZoomLevel: 30
center: QtPositioning.coordinate(51.51939, -0.11832)
Component.onCompleted: {
mapBase.zoomLevel = 19
}
}
Map {
id: map
anchors.fill: parent
plugin: Plugin { name: "itemsoverlay" }
gesture.enabled: false
center: mapBase.center
color: 'transparent'
minimumFieldOfView: mapBase.minimumFieldOfView
maximumFieldOfView: mapBase.maximumFieldOfView
minimumTilt: mapBase.minimumTilt
maximumTilt: mapBase.maximumTilt
minimumZoomLevel: mapBase.minimumZoomLevel
maximumZoomLevel: mapBase.maximumZoomLevel
zoomLevel: mapBase.zoomLevel
tilt: mapBase.tilt;
bearing: mapBase.bearing
fieldOfView: mapBase.fieldOfView
z: mapBase.z + 1
// visibleRegion: mapBase.visibleRegion
anchors.centerIn: parent
MapCircle {
center: QtPositioning.coordinate(51.51939, -0.11832)
radius: 10
color: "red"
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton
onClicked: {
var rect = QtPositioning.rectangle(
QtPositioning.coordinate(51.51949, -0.11842),
QtPositioning.coordinate(51.51929, -0.11822))
mapBase.visibleRegion = rect
parent.color = 'green'
console.log(map.zoomLevel, mapBase.zoomLevel)
}
}
}
}
}
I was playing with some parameters and found a fix by chance: replace the
Map {
id: map
// ...
maximumZoomLevel: mapBase.maximumZoomLevel
// ...
}
to
Map {
id: map
// ...
maximumZoomLevel: 30
// ...
}
However, I do not understand why the latter works in contrast to the former and if it is even just a bug?

How to set an item property of one qml from main.qml

I waste my time to find how set the visible property to false, the delegate being in an another qml file.
For instance here is a simple example based on Places Map.
Marker.qml
import QtQuick 2.0
import QtLocation 5.6
MapQuickItem {
id: idPointsMarker
sourceItem: Loader{sourceComponent: idRect}
visible: true //if set manually to false, everything works correctly
Component{
id: idRect
Rectangle{
width: 20
height: 20
color: "blue"
}
}
}
and the main.qml
import QtQuick 2.0
import QtQuick.Window 2.0
import QtLocation 5.6
import QtPositioning 5.6
Window {
width: 512
height: 512
visible: true
PositionSource {
...
}
property variant locationOslo: QtPositioning.coordinate( 59.93, 10.76)
PlaceSearchModel {
...
}
Map {
id: map
anchors.fill: parent
plugin: Plugin {name: "osm"}
center: locationOslo
zoomLevel: 13
MouseArea {
id : mouseMap
anchors.fill: parent
onDoubleClicked: {
console.log("DoubleClicked")
Marker.idPointsMarker.visible = false // pb is here
}
}
MapItemView {
model: searchModel
delegate: Marker{
coordinate: place.location.coordinate
}
}
}
}
I wish to toggle the visibility to false on doubleclick. I am not able to access the property anyhow the way i write it. What is the correct syntax?
Sorry for a so simple question. Thanks for help.
You do not have to set the property in main.qml, you must do it in Marker.qml, since the elements of Marker.qml can access all the elements of main.qml. One solution is to establish a property of type bool that manages the visibility and that changes in the double click:
main.qml
Map {
[...]
property bool isVisibleItems: true
MouseArea {
id : mouseMap
anchors.fill: parent
onDoubleClicked: map.isVisibleItems = !map.isVisibleItems
}
[...]
Marker.qml
import QtQuick 2.0
import QtLocation 5.6
MapQuickItem {
id: idPointsMarker
sourceItem: Loader{sourceComponent: idRect}
visible: map.isVisibleItems
Component{
id: idRect
Rectangle{
width: 20
height: 20
color: "blue"
}
}
}
In the following link there is an example

Resources