I have an issue with trying to display QML MapCircle on a Window when I use the Mapboxgl plugin.
I have a model which is populated from C++ and is shown on the map when the user clicks a button. Here is a snippet:
MapItemView{
model:disksModel
delegate:MapCircle{
border.color: "red"
border.width: 1
center: QtPositioning.coordinate(model.latitude, model.longitude)
radius: 53
}
}
When I use osm or esri as my plugin,
plugin:Plugin{
name:"esri"
}
I get the following which is what I expect: but using mapbox, the circles aren't displayed.
plugin:Plugin{
name:"mapboxgl"
PluginParameter {
name: "mapboxgl.mapping.use_fbo"
value: true
}
PluginParameter {
name: "mapboxgl.mapping.items.insert_before"
value: "aerialway"
}
}
However, if I change my model to use something like a MapQuickItem and then use something like a Marker,
MapItemView{
model:disksModel
delegate:MapQuickItem{
sourceItem: Image{
id:waypointMarker
opacity: .75
sourceSize.width:80
sourceSize.height:80
source: "../images/marker.png"
}
coordinate: QtPositioning.coordinate(model.latitude, model.longitude)
anchorPoint.x: waypointMarker.width/2
anchorPoint.y: waypointMarker.height/2
}
}
The coordinates of interest are then marked on the screen
. Does anyone know a workaround or fix for this?
Related
Use MapQuickItem to display a component on a map, the quickitem's coordination is not changed, but when the map is modified size( width or height), the quickitem will dispear on a wrong coordination, how to reset quickitem's coordination(latitude, longitude)
Map {
id: map
height: 100 // for example, i change the height, marker's position will not update
width: 100 // but,,, if change, width , will auto update.
MapItemView {
model: xxxx
delegate: MapQuickItem {
id: marker
anchorPoint.x: image.width/4
anchorPoint.y: image.height
coordinate: object.coordinate
sourceItem: Image {
id: image
source: "xxxx.png"
}
}
}
}
i.e the marker does not adjust the position (not coordinate) as map's size changed.
A little late but here's how I did it, because I just had the same problem on macOS and Windows and it may help anyone.
As I am on Qt 5.11, I don't have access to onVisibleRegionChanged signal, so I used onHeightChanged and onWidthChanged signals to trigger a timer when resizing is done. To simulate map movement and trigger refresh, I used pan() function.
Map {
id: map
height: 500
width: 500
onHeightChanged: {
resizeBugTimer.restart();
}
onWidthChanged: {
resizeBugTimer.restart();
}
Timer {
id: resizeBugTimer
interval: 50
repeat: false
running: false
onTriggered: {
map.fixPositionOnResizeBug();
}
}
function fixPositionOnResizeBug() {
pan(1, 1);
pan(-1, -1);
}
MapItemView {
model: xxxx
delegate: MapQuickItem {
id: marker
anchorPoint.x: image.width/4
anchorPoint.y: image.height
coordinate: object.coordinate
sourceItem: Image {
id: image
source: "xxxx.png"
}
}
}
}
Hope this helps.
By following a part of this example
display multiple routes on a map using RouteMap QML Qt
I'm trying to show a route inside a MapView in a QML view of my QT application, by using the following code; but the route don't appear. No errors are appearing in the output console. Did I do something wrong?
Map {
anchors.fill: parent
plugin: mapboxglPlugin
center: QtPositioning.coordinate(60.170448, 24.942046) // Oslo
zoomLevel: 16
id: mapMain
copyrightsVisible: false
RouteModel {
id: rm
plugin: mapboxglPlugin
query: RouteQuery {id: routeQuery }
Component.onCompleted: {
routeQuery.addWaypoint(QtPositioning.coordinate(60.170448, 24.942046));
routeQuery.addWaypoint(QtPositioning.coordinate(62.170448, 23.942046));
update();
}
}
MapItemView {
model: rm
delegate: Component{
MapRoute {
route: routeData
line.color: "green"
line.width: 5
smooth: true
}
}
}
}
I wanted to implement a function that users can drag the marker (which is defined as MapQuickItem) on the map and automatically change its path (which is defined as MapPolyline). Currently I can only drag the marker but don't know how to change its path.
If I want to define a DropArea under the Map and call the MapPolyline.removeCoordinate() function to change the path, how to visit the index in the delegate? And I'm not sure if this idea will work.
Here is the code:
Map {
id: map
anchors.fill: parent
plugin: mapPlugin
zoomLevel: 14
activeMapType: supportedMapTypes[7]
/* maker */
MouseArea {
anchors.fill: parent
onClicked: {
var crd = map.toCoordinate(Qt.point(mouseX, mouseY))
console.log(crd)
markerModel.append({ "latitude": crd.latitude, "longitude": crd.longitude})
line.addCoordinate(crd)
}
}
MapItemGroup {
MapPolyline {
id: line
line.width: 3
line.color: "#515151"
}
MapItemView {
add: Transition {}
remove: Transition {}
model: ListModel {
id: markerModel
}
delegate:
MapQuickItem {
id: marker
coordinate: QtPositioning.coordinate(latitude, longitude)
anchorPoint: Qt.point(markerImage.width * 0.5, markerImage.height * 0.5)
sourceItem: Image {
id: markerImage
z: 5
width: 30
height: 30
source: index <= 0 ? "Images/starting point.svg" : "Images/point black.svg"
MouseArea {
anchors.fill: parent
onClicked: {
line.removeCoordinate(index);
markerModel.remove(index);
}
drag.target: marker
}
}
}
/* maker */
}
}
}
I have tried several methods to solve the problem.
This method is not feasible cos the event (drag.onActiveChanged) is triggered only at the moment that the drag event happens.
drag.onActiveChanged: {
if(mouseArea.drag.active) {
line.replaceCoordinate(index, marker.coordinate);
}
}
I tried to define a DropArea under the Map and called the drag.ondragStarted() function to trigger the event, but I didn't figure out how to visit the index in the delegate, then I gave up.
It worked! When I dragged the marker on the map, the path automatically changed! The event (onPositionChanged) is triggered everytime the coordinate of marker changes.
onPositionChanged: {
line.replaceCoordinate(index, marker.coordinate);
}
Thank myself :-)
I am having a QML code which shows map, it has a MapQuickItem for an image.
MapQuickItem {
id: transMarker
sourceItem: Image {
id: transImage
width: 50
height: 50
source: "trans.png"
}
}
When I clicks on the map, it should paste that image on the map, I could achieve that by below code
transMarker.coordinate = map.toCoordinate(Qt.point(mouse.x,mouse.y))
I want to save the position permanently, but the problem is I am trying to print map.toCoordinate(Qt.point(mouse.x,mouse.y))
It prints in degree and minutes (Coordinate: 8° 29' 21.4" N, 76° 57' 41.9" E)
I want to get that as decimal latitude and longitude (Coordinate: 76.9616344 8.4892798).
How this can be accomplished?
You have to use the latitude and longitude properties of coordinate:
Map {
id: map
anchors.fill: parent
plugin: Plugin {
name: "osm"
}
center: QtPositioning.coordinate(59.91, 10.75)
zoomLevel: 10
MapQuickItem {
id: transMarker
sourceItem: Image {
id: transImage
width: 50
height: 50
source: "trans.png"
}
}
MouseArea{
anchors.fill: parent
onClicked: {
var coord = map.toCoordinate(Qt.point(mouse.x,mouse.y));
transMarker.coordinate = coord;
console.log(coord.latitude, coord.longitude)
}
}
}
Output:
qml: 59.969159320456804 10.824157714841107
qml: 59.98427615215763 10.895568847649372
qml: 59.989771470871446 10.780212402338407
qml: 59.965722714293186 10.652496337891108
I'm trying to make buildings on map clickable using MouseArea. I tried using GeocodeModel with query "building" which was obviously stupid idea. Then I tried getting mapItems : list of Map Object and printing them on the console, but that: "qml: Map items: []" was the only result. Now I'm thinking if it is even possible without going into implementation side of maybe delegate of Map if such thing exists :P Why there is nothing in mapItems ? Are they in some way private in Map ?
My shortened code:
Window {
visible: true
width: 640
height: 480
Map {
id: map
anchors.fill: parent
plugin: Plugin{
name: "osm"
}
zoomLevel: 15
Component.onCompleted: {
console.log("Map items: ", map.mapItems);
}
}
GeocodeModel{
id: geoModel
plugin: Plugin{
name: "osm"
}
autoUpdate: true
query: "building"
limit: -1
onLocationsChanged: {
map.center = geoModel.get(0).coordinate
console.log(count);
}
}