QML Maps with Pinch Zoom: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
(Add "cleanup" tag)
(Sub-categorize)
 
(One intermediate revision by one other user not shown)
Line 1: Line 1:
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
 
{{LangSwitch}}
[[Category:Snippets]]
[[Category:Snippets::QML]]
[[Category:Developing with Qt::QtMobility]]
[[Category:Developing with Qt::QtMobility]]
[[Category:HowTo]]
[[Category:HowTo]]
'''English''' | [[QML_Maps_with_Pinch_Zoom_Bulgarian|Български]]


= QML Map using PinchArea to zoom and MouseArea to pan =
= QML Map using PinchArea to zoom and MouseArea to pan =
Line 11: Line 9:
Qt Mobility's Location plugin provides a very nice QML Map item, but currently leaves navigation up to the developer to implement. Two common navigation methods are using a swipe gesture to pan the map around and using a pinch gesture to zoom in and out.
Qt Mobility's Location plugin provides a very nice QML Map item, but currently leaves navigation up to the developer to implement. Two common navigation methods are using a swipe gesture to pan the map around and using a pinch gesture to zoom in and out.


Having not found any solid examples of how to do these two things together, I thought I would post an example of some code which implement these two features. The code uses the "PinchArea":http://doc.qt.nokia.com/4.7-snapshot/qml-pincharea.html element which was introduced in Qt Quick 1.1.
Having not found any solid examples of how to do these two things together, I thought I would post an example of some code which implement these two features. The code uses the [http://doc.qt.nokia.com/4.7-snapshot/qml-pincharea.html PinchArea] element which was introduced in Qt Quick 1.1.


I hope you find this helpful!
I hope you find this helpful!

Latest revision as of 13:05, 28 November 2016

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine.
Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh

QML Map using PinchArea to zoom and MouseArea to pan

Qt Mobility's Location plugin provides a very nice QML Map item, but currently leaves navigation up to the developer to implement. Two common navigation methods are using a swipe gesture to pan the map around and using a pinch gesture to zoom in and out.

Having not found any solid examples of how to do these two things together, I thought I would post an example of some code which implement these two features. The code uses the PinchArea element which was introduced in Qt Quick 1.1.

I hope you find this helpful!

import QtQuick 1.1
import QtMobility.location 1.2

Rectangle {
 id: pinchmap

property double defaultLatitude: 37.69
 property double defaultLongitude: 97.33
 property int defaultZoomLevel: 7

property alias mapType: map.mapType

width: 640
 height: 350

Map {
 id: map

anchors.fill: parent
 zoomLevel: pinchmap.defaultZoomLevel
 plugin: Plugin { name: "nokia" }
 mapType: Map.StreetMap

center: Coordinate {
 latitude: pinchmap.defaultLatitude
 longitude: pinchmap.defaultLongitude
 }
 }

PinchArea {
 id: pincharea

property double _''oldZoom

 anchors.fill: parent

 function calcZoomDelta(zoom, percent) {
 return zoom + Math.log(percent)/Math.log(2)
 }

 onPinchStarted: {
oldZoom = map.zoomLevel
 }

 onPinchUpdated: {
 map.zoomLevel = calcZoomDelta(oldZoom, pinch.scale)
 }

 onPinchFinished: {
 map.zoomLevel = calcZoomDelta(oldZoom, pinch.scale)
 }
 }

 MouseArea {
 id: mousearea

 property boolisPanning: false
 property intlastX: 1
 property intlastY: 1

 anchors.fill : parent

 onPressed: {
isPanning = true
lastX = mouse.x
lastY = mouse.y
 }

 onReleased: {
isPanning = false
 }

 onPositionChanged: {
 if (isPanning) {
 var dx = mouse.x -lastX
 var dy = mouse.y -lastY
 map.pan(-dx, -dy)
lastX = mouse.x
lastY = mouse.y
 }
 }

 onCanceled: {
''_isPanning = false;
 }
 }
}