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:
'''English''' | [[QML Maps with Pinch Zoom Bulgarian|Български]]
[[Category:Snippets]]<br />[[Category:Developing with Qt::QtMobility]]<br />[[Category:HowTo]]


=<span class="caps">QML</span> Map using PinchArea to zoom and MouseArea to pan=
'''English''' | [[QML_Maps_with_Pinch_Zoom_Bulgarian|Български]]


Qt Mobility’s Location plugin provides a very nice <span class="caps">QML</span> 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.
= QML Map using PinchArea to zoom and MouseArea to pan =


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] ''[doc.qt.nokia.com]'' element which was introduced in Qt Quick 1.1.
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.


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


===Categories:===
<code><br />import QtQuick 1.1<br />import QtMobility.location 1.2
 
Rectangle {<br /> id: pinchmap
 
property double defaultLatitude: 37.69<br /> property double defaultLongitude: –97.33<br /> property int defaultZoomLevel: 7
 
property alias mapType: map.mapType
 
width: 640<br /> height: 350
 
Map {<br /> id: map
 
anchors.fill: parent<br /> zoomLevel: pinchmap.defaultZoomLevel<br /> plugin: Plugin { name: &quot;nokia&amp;quot; }<br /> mapType: Map.StreetMap
 
center: Coordinate {<br /> latitude: pinchmap.defaultLatitude<br /> longitude: pinchmap.defaultLongitude<br /> }<br /> }
 
PinchArea {<br /> id: pincharea


* [[:Category:Developing with Qt|Developing_with_Qt]]
property double _''oldZoom
** [[:Category:Developing with Qt::QtMobility|QtMobility]]
<br /> anchors.fill: parent
* [[:Category:HowTo|HowTo]]
<br /> function calcZoomDelta(zoom, percent) {<br /> return zoom + Math.log(percent)/Math.log(2)<br /> }
* [[:Category:snippets|snippets]]
<br /> onPinchStarted: {<br />oldZoom = map.zoomLevel<br /> }
<br /> onPinchUpdated: {<br /> map.zoomLevel = calcZoomDelta(oldZoom, pinch.scale)<br /> }
<br /> onPinchFinished: {<br /> map.zoomLevel = calcZoomDelta(oldZoom, pinch.scale)<br /> }<br /> }
<br /> MouseArea {<br /> id: mousearea
<br /> property boolisPanning: false<br /> property intlastX: –1<br /> property intlastY: –1
<br /> anchors.fill : parent
<br /> onPressed: {<br />isPanning = true<br />lastX = mouse.x<br />lastY = mouse.y<br /> }
<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>

Revision as of 09:27, 24 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&quot;: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!

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

Rectangle {<br /> id: pinchmap

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

property alias mapType: map.mapType

width: 640<br /> height: 350

Map {<br /> id: map

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

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

PinchArea {<br /> id: pincharea

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