QML Maps with Pinch Zoom: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
[[Category:Snippets]]<br />[[Category:Developing with Qt::QtMobility]]<br />[[Category:HowTo]]
[[Category:Snippets]]
[[Category:Developing with Qt::QtMobility]]
[[Category:HowTo]]


'''English''' | [[QML_Maps_with_Pinch_Zoom_Bulgarian|Български]]
'''English''' | [[QML_Maps_with_Pinch_Zoom_Bulgarian|Български]]
Line 7: 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 &quot;PinchArea&amp;quot;: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 "PinchArea":http://doc.qt.nokia.com/4.7-snapshot/qml-pincharea.html element which was introduced in Qt Quick 1.1.


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


<code><br />import QtQuick 1.1<br />import QtMobility.location 1.2
<code>
import QtQuick 1.1
import QtMobility.location 1.2


Rectangle {<br /> id: pinchmap
Rectangle {
id: pinchmap


property double defaultLatitude: 37.69<br /> property double defaultLongitude: –97.33<br /> property int defaultZoomLevel: 7
property double defaultLatitude: 37.69
property double defaultLongitude: –97.33
property int defaultZoomLevel: 7


property alias mapType: map.mapType
property alias mapType: map.mapType


width: 640<br /> height: 350
width: 640
height: 350


Map {<br /> id: map
Map {
id: map


anchors.fill: parent<br /> zoomLevel: pinchmap.defaultZoomLevel<br /> plugin: Plugin { name: &quot;nokia&amp;quot; }<br /> mapType: Map.StreetMap
anchors.fill: parent
zoomLevel: pinchmap.defaultZoomLevel
plugin: Plugin { name: "nokia" }
mapType: Map.StreetMap


center: Coordinate {<br /> latitude: pinchmap.defaultLatitude<br /> longitude: pinchmap.defaultLongitude<br /> }<br /> }
center: Coordinate {
latitude: pinchmap.defaultLatitude
longitude: pinchmap.defaultLongitude
}
}


PinchArea {<br /> id: pincharea
PinchArea {
id: pincharea


property double _''oldZoom
property double _''oldZoom
<br /> anchors.fill: parent
 
<br /> function calcZoomDelta(zoom, percent) {<br /> return zoom + Math.log(percent)/Math.log(2)<br /> }
anchors.fill: parent
<br /> onPinchStarted: {<br />oldZoom = map.zoomLevel<br /> }
 
<br /> onPinchUpdated: {<br /> map.zoomLevel = calcZoomDelta(oldZoom, pinch.scale)<br /> }
function calcZoomDelta(zoom, percent) {
<br /> onPinchFinished: {<br /> map.zoomLevel = calcZoomDelta(oldZoom, pinch.scale)<br /> }<br /> }
return zoom + Math.log(percent)/Math.log(2)
<br /> MouseArea {<br /> id: mousearea
}
<br /> property boolisPanning: false<br /> property intlastX: –1<br /> property intlastY: –1
 
<br /> anchors.fill : parent
onPinchStarted: {
<br /> onPressed: {<br />isPanning = true<br />lastX = mouse.x<br />lastY = mouse.y<br /> }
oldZoom = map.zoomLevel
<br /> onReleased: {<br />isPanning = false<br /> }
}
<br /> onPositionChanged: {<br /> if (isPanning) {<br /> var dx = mouse.x -lastX<br /> var dy = mouse.y -lastY<br /> map.pan(-dx, -dy)<br />lastX = mouse.x<br />lastY = mouse.y<br /> }<br /> }
 
<br /> onCanceled: {<br />''_isPanning = false;<br /> }<br /> }<br />}<br /></code>
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;
}
}
}
</code>

Revision as of 09:48, 25 February 2015


English | Български

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":http://doc.qt.nokia.com/4.7-snapshot/qml-pincharea.html 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;
 }
 }
}