offline interactive OpenStreetMap in Qt - c++

Question

How to display a OpenStreetMap on a ui-form in Qt? In the main window of mainwindow.ui. I need an interactive map. The transmitting latitude, longitude of the point and adding information about the point.
How to make this example interactive and display on the mainwindow.ui form?
main.cpp :
#include <QGuiApplication>
#include <QQuickView>
int main(int argc, char **argv)
{
QGuiApplication app(argc,argv);
QQuickView view;
view.setSource(QUrl(QStringLiteral("qrc:///places_map.qml")));
view.setWidth(360);
view.setHeight(640);
view.show();
return app.exec();
}
places_map.qml :
import QtQuick 2.0
import QtPositioning 5.5
import QtLocation 5.6
//! [Imports]
Rectangle {
anchors.fill: parent
//! [Initialize Plugin]
Plugin {
id: myPlugin
name: "osm" // "mapboxgl", "esri", ...
//specify plugin parameters if necessary
//PluginParameter {...}
//PluginParameter {...}
//...
}
//! [Initialize Plugin]
//! [Current Location]
PositionSource {
id: positionSource
property variant lastSearchPosition: locationOslo
active: true
updateInterval: 120000 // 2 mins
onPositionChanged: {
var currentPosition = positionSource.position.coordinate
map.center = currentPosition
var distance = currentPosition.distanceTo(lastSearchPosition)
if (distance > 500) {
// 500m from last performed pizza search
lastSearchPosition = currentPosition
searchModel.searchArea = QtPositioning.circle(currentPosition)
searchModel.update()
}
}
}
//! [Current Location]
//! [PlaceSearchModel]
property variant locationOslo: QtPositioning.coordinate( 59.93, 10.76)
PlaceSearchModel {
id: searchModel
plugin: myPlugin
searchTerm: "Pizza"
searchArea: QtPositioning.circle(locationOslo)
Component.onCompleted: update()
}
//! [PlaceSearchModel]
//! [Places MapItemView]
Map {
id: map
anchors.fill: parent
plugin: myPlugin;
center: locationOslo
zoomLevel: 13
MapItemView {
model: searchModel
delegate: MapQuickItem {
coordinate: place.location.coordinate
anchorPoint.x: image.width * 0.5
anchorPoint.y: image.height
sourceItem: Column {
Image { id: image; source: "marker.png" }
Text { text: title; font.bold: true }
}
}
}
}
//! [Places MapItemView]
Connections {
target: searchModel
onStatusChanged: {
if (searchModel.status == PlaceSearchModel.Error)
console.log(searchModel.errorString());
}
}
}

Answer 1

At least there are 2 ways using QtDesigner
1. using the QQuickWidget plugin from Qt Designer
Qt Designer is the tool used by QtCreator to modify the .ui, so it has more used widgets plugins, in my case I have it as shown below
and you go to the view of properties and in source you place the url of the .qml as it shows the following image:
Then we add to the .pro:
QT += quickwidgets
2. If you do not have it, we can use the widget and promote it as a class that inherits from QQuickWidget
for this we create a class that inherits from QQuickWidget:
#ifndef QUICKWIDGET_H
#define QUICKWIDGET_H
#include <QQuickWidget>
class QuickWidget: public QQuickWidget
{
public:
QuickWidget(QWidget *parent = Q_NULLPTR):QQuickWidget(parent){
setSource(QUrl("qrc:/places_map.qml"));
setResizeMode(QQuickWidget::SizeRootObjectToView);
}
};
#endif // QUICKWIDGET_H
Then we drag the QtDesigner Widget
and we right click selecting Promote to..., after that we obtain a menu where we place the values shown in the image, press the add button and then the promote button:
Then we add to the .pro:
QT += quickwidgets
Both examples are in the following link