/usr/share/qt5/doc/qtlocation/qtlocation-mapviewer-example.html is in qtlocation5-doc-html 5.5.1-3ubuntu1.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 | <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- declarative-mapviewer.qdoc -->
<title>Map Viewer (QML) | Qt Location 5.5</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<ul>
<li>Qt 5.5</li>
<li><a href="qtlocation-index.html">Qt Location</a></li>
<li>Map Viewer (QML)</li>
<li id="buildversion">Qt 5.5.1 Reference Documentation</li>
</ul>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#running-the-example">Running the Example</a></li>
<li class="level1"><a href="#overview">Overview</a></li>
<li class="level1"><a href="#displaying-a-map">Displaying a Map</a></li>
<li class="level1"><a href="#finding-an-address-geocoding">Finding an Address (Geocoding)</a></li>
<li class="level1"><a href="#directions-and-travel-routes">Directions and Travel Routes</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Map Viewer (QML)</h1>
<span class="subtitle"></span>
<!-- $$$mapviewer-description -->
<div class="descr"> <a name="details"></a>
<p class="centerAlign"><img src="images/example-mapviewer.png" alt="" /></p><p>This is a large example covering many basic uses of maps, positioning, and navigation services in Qt Location. This page is divided into sections covering each of these areas of functionality with snippets from the code.</p>
<a name="running-the-example"></a>
<h2 id="running-the-example">Running the Example</h2>
<p>To run the example from Qt Creator, open the <b>Welcome</b> mode and select the example from <b>Examples</b>. For more information, visit Building and Running an Example.</p>
<p>The example can work with any of the available geo services plugins. However, some plugins may require additional <a href="qml-qtlocation-pluginparameter.html">plugin parameters</a> in order to function correctly. <a href="qml-qtlocation-pluginparameter.html">Plugin parameters</a> can be passed on the command line using the <code>--plugin</code> argument, which takes the form:</p>
<pre class="cpp">--plugin.<parameter name> <parameter value></pre>
<p>Refer to the documentation for each of the geo services plugins for details on what plugin parameters they support. The default plugin used by this example is <a href="location-plugin-osm.html">Qt Location Open Street Map Plugin</a>, which does not require any parameters.</p>
<a name="overview"></a>
<h2 id="overview">Overview</h2>
<p>QML types shown in this example:</p>
<ul>
<li>Displaying a map<ul>
<li><a href="qml-qtlocation-map.html">Map</a></li>
<li><a href="qml-qtlocation-mapgesturearea.html">MapGestureArea</a></li>
<li><a href="../qtcore/qt.html#modal">Coordinate</a></li>
</ul>
</li>
<li>Finding an address<ul>
<li><a href="qml-qtlocation-geocodemodel.html">GeocodeModel</a></li>
<li><a href="qml-qtlocation-mapitemview.html">MapItemView</a></li>
<li><a href="qml-qtlocation-mapcircle.html">MapCircle</a></li>
</ul>
</li>
<li>Directions and travel routes<ul>
<li><a href="qml-qtlocation-routemodel.html">RouteModel</a></li>
<li><a href="qml-qtlocation-maproute.html">MapRoute</a></li>
</ul>
</li>
</ul>
<a name="displaying-a-map"></a>
<h2 id="displaying-a-map">Displaying a Map</h2>
<p>Drawing a map on-screen is accomplished using the Map type, as shown below.</p>
<pre class="qml"><span class="type"><a href="qml-qtlocation-map.html">Map</a></span> {
<span class="name">id</span>: <span class="name">map</span>
<span class="name">zoomLevel</span>: (<span class="name">maximumZoomLevel</span> <span class="operator">-</span> <span class="name">minimumZoomLevel</span>)<span class="operator">/</span><span class="number">2</span>
<span class="type"><a href="../qtcore/qtextstream.html#center">center</a></span> {
<span class="comment">// The Qt Company in Oslo</span>
<span class="name">latitude</span>: <span class="number">59.9485</span>
<span class="name">longitude</span>: <span class="number">10.7686</span>
}
}</pre>
<p>In this example, we give the map an initial center <a href="../qtcore/qt.html#modal">coordinate</a> with a set latitude and longitude. We also set the initial zoom level to 50% (halfway between the maximum and minimum).</p>
<a name="finding-an-address-geocoding"></a>
<h2 id="finding-an-address-geocoding">Finding an Address (Geocoding)</h2>
<p>To locate a certain address or place on the map uses a process called geocoding. In order to perform a geocode operation, we first need to adjust our Map object to be able to receive the result.</p>
<p>Receiving results of geocoding is done through a <a href="qml-qtlocation-geocodemodel.html">GeocodeModel</a>:</p>
<pre class="qml"><span class="type"><a href="qml-qtlocation-geocodemodel.html">GeocodeModel</a></span> {
<span class="name">id</span>: <span class="name">geocodeModel</span>
<span class="name">plugin</span>: <span class="name">map</span>.<span class="name">plugin</span>
<span class="name">onStatusChanged</span>: {
<span class="keyword">if</span> ((<span class="name">status</span> <span class="operator">==</span> <span class="name">GeocodeModel</span>.<span class="name">Ready</span>) <span class="operator">||</span> (<span class="name">status</span> <span class="operator">==</span> <span class="name">GeocodeModel</span>.<span class="name">Error</span>))
<span class="name">map</span>.<span class="name">geocodeFinished</span>()
}
<span class="name">onLocationsChanged</span>:
{
<span class="keyword">if</span> (<span class="name">count</span> <span class="operator">==</span> <span class="number">1</span>) {
<span class="name">map</span>.<span class="name">center</span>.<span class="name">latitude</span> <span class="operator">=</span> <span class="name">get</span>(<span class="number">0</span>).<span class="name">coordinate</span>.<span class="name">latitude</span>
<span class="name">map</span>.<span class="name">center</span>.<span class="name">longitude</span> <span class="operator">=</span> <span class="name">get</span>(<span class="number">0</span>).<span class="name">coordinate</span>.<span class="name">longitude</span>
}
}
}</pre>
<p>To display the contents of the <a href="qml-qtlocation-geocodemodel.html">GeocodeModel</a> we use a <a href="qml-qtlocation-mapitemview.html">MapItemView</a>:</p>
<pre class="qml"><span class="type"><a href="qml-qtlocation-mapitemview.html">MapItemView</a></span> {
<span class="name">model</span>: <span class="name">geocodeModel</span>
<span class="name">delegate</span>: <span class="name">pointDelegate</span>
}</pre>
<p><a href="qml-qtlocation-mapitemview.html">MapItemView</a> uses an object called a "delegate" to act as a template for the items it creates. This can contain any map object desired, but in this case we show a <a href="qml-qtlocation-mapcircle.html">MapCircle</a>:</p>
<pre class="qml"><span class="type">Component</span> {
<span class="name">id</span>: <span class="name">pointDelegate</span>
<span class="type"><a href="qml-qtlocation-mapcircle.html">MapCircle</a></span> {
<span class="name">id</span>: <span class="name">point</span>
<span class="name">radius</span>: <span class="number">1000</span>
<span class="name">color</span>: <span class="string">"#46a2da"</span>
<span class="name">border</span>.color: <span class="string">"#190a33"</span>
<span class="name">border</span>.width: <span class="number">2</span>
<span class="name">smooth</span>: <span class="number">true</span>
<span class="name">opacity</span>: <span class="number">0.25</span>
<span class="name">center</span>: <span class="name">locationData</span>.<span class="name">coordinate</span>
}
}</pre>
<p>With these three objects, we have enough to receive Geocode responses and display them on our Map. The final piece is to send the actual Geocode request.</p>
<p>To send a geocode request, first we create an <a href="../qtcore/qt.html#modal">Address</a> object, and fill it in with the desired parameters.</p>
<pre class="qml"><span class="type">Address</span> {
<span class="name">id</span> :<span class="name">fromAddress</span>
<span class="name">street</span>: <span class="string">"Sandakerveien 116"</span>
<span class="name">city</span>: <span class="string">"Oslo"</span>
<span class="name">country</span>: <span class="string">"Norway"</span>
<span class="name">state</span> : <span class="string">""</span>
<span class="name">postalCode</span>: <span class="string">"0484"</span>
}</pre>
<p>Then we set "geocodeModel.query" to the filled in <a href="../qtcore/qt.html#modal">Address</a>, and call update() on the <a href="qml-qtlocation-geocodemodel.html">GeocodeModel</a>.</p>
<pre class="qml"><span class="comment">// send the geocode request</span>
<span class="name">geocodeModel</span>.<span class="name">query</span> <span class="operator">=</span> <span class="name">fromAddress</span>
<span class="name">geocodeModel</span>.<span class="name">update</span>()</pre>
<a name="directions-and-travel-routes"></a>
<h2 id="directions-and-travel-routes">Directions and Travel Routes</h2>
<p>Similar to the <a href="qml-qtlocation-geocodemodel.html">GeocodeModel</a>, Qt Location also features the <a href="qml-qtlocation-routemodel.html">RouteModel</a> type, which allows information about routes (for example driving directions) between two or more points, to be received and used with a Map.</p>
<p>Here again, we instantiate the <a href="qml-qtlocation-routemodel.html">RouteModel</a> as a property of our Map:</p>
<pre class="qml"><span class="type"><a href="qml-qtlocation-routemodel.html">RouteModel</a></span> {
<span class="name">id</span>: <span class="name">routeModel</span>
<span class="name">plugin</span> : <span class="name">map</span>.<span class="name">plugin</span>
<span class="name">query</span>: <span class="name">RouteQuery</span> {
<span class="name">id</span>: <span class="name">routeQuery</span>
}
<span class="name">onStatusChanged</span>: {
<span class="keyword">if</span> (<span class="name">status</span> <span class="operator">==</span> <span class="name">RouteModel</span>.<span class="name">Ready</span>) {
<span class="keyword">switch</span> (<span class="name">count</span>) {
<span class="keyword">case</span> <span class="number">0</span>:
<span class="comment">// technically not an error</span>
<span class="name">map</span>.<span class="name">routeError</span>()
<span class="keyword">break</span>
<span class="keyword">case</span> <span class="number">1</span>:
<span class="name">map</span>.<span class="name">showRouteList</span>()
<span class="keyword">break</span>
}
} <span class="keyword">else</span> <span class="keyword">if</span> (<span class="name">status</span> <span class="operator">==</span> <span class="name">RouteModel</span>.<span class="name">Error</span>) {
<span class="name">map</span>.<span class="name">routeError</span>()
}
}
}</pre>
<p>To display the contents of a model to the user, we need a view. Once again we will use a <a href="qml-qtlocation-mapitemview.html">MapItemView</a>, to display the Routes as objects on the Map:</p>
<pre class="qml"><span class="type"><a href="qml-qtlocation-mapitemview.html">MapItemView</a></span> {
<span class="name">model</span>: <span class="name">routeModel</span>
<span class="name">delegate</span>: <span class="name">routeDelegate</span>
}</pre>
<p>To act as a template for the objects we wish the view to create, we create a delegate component:</p>
<pre class="qml"><span class="type">Component</span> {
<span class="name">id</span>: <span class="name">routeDelegate</span>
<span class="type"><a href="qml-qtlocation-maproute.html">MapRoute</a></span> {
<span class="name">id</span>: <span class="name">route</span>
<span class="name">route</span>: <span class="name">routeData</span>
<span class="name">line</span>.color: <span class="string">"#46a2da"</span>
<span class="name">line</span>.width: <span class="number">5</span>
<span class="name">smooth</span>: <span class="number">true</span>
<span class="name">opacity</span>: <span class="number">0.8</span>
}
}</pre>
<p>With the model, view and delegate now complete, the only missing component is some kind of control over the model to begin the Route request process. In the simplest case, we can fill out a Route request using two already available <a href="../qtcore/qt.html#modal">coordinates</a>:</p>
<pre class="qml">property <span class="type">variant</span> <span class="name">fromCoordinate</span>: <span class="name">QtPositioning</span>.<span class="name">coordinate</span>(<span class="number">59.9483</span>, <span class="number">10.7695</span>)
property <span class="type">variant</span> <span class="name">toCoordinate</span>: <span class="name">QtPositioning</span>.<span class="name">coordinate</span>(<span class="number">59.9645</span>, <span class="number">10.671</span>)</pre>
<p>In the next snippet, we show how to set up the request object and instruct the model to update. We also instruct the map to center on the start coordinate for our routing request.</p>
<pre class="qml"><span class="comment">// clear away any old data in the query</span>
<span class="name">routeQuery</span>.<span class="name">clearWaypoints</span>();
<span class="comment">// add the start and end coords as waypoints on the route</span>
<span class="name">routeQuery</span>.<span class="name">addWaypoint</span>(<span class="name">startCoordinate</span>)
<span class="name">routeQuery</span>.<span class="name">addWaypoint</span>(<span class="name">endCoordinate</span>)
<span class="name">routeQuery</span>.<span class="name">travelModes</span> <span class="operator">=</span> <span class="name">RouteQuery</span>.<span class="name">CarTravel</span>
<span class="name">routeQuery</span>.<span class="name">routeOptimizations</span> <span class="operator">=</span> <span class="name">RouteQuery</span>.<span class="name">FastestRoute</span>
<span class="name">routeModel</span>.<span class="name">update</span>();
<span class="comment">// center the map on the start coord</span>
<span class="name">map</span>.<span class="name">center</span> <span class="operator">=</span> <span class="name">startCoordinate</span>;</pre>
<p>This is all that is required to display a Route on the Map. However, it is also useful to be able to retrieve the written directions and explanation of the travel route. In the example, these are displayed in a ListView element. To create this content, we use a standard ListModel and ListView pair. The data in the ListModel is built from the routeModel's output:</p>
<pre class="qml"><span class="type">ListView</span> {
<span class="name">interactive</span>: <span class="number">true</span>
<span class="name">model</span>: <span class="name">ListModel</span> { <span class="name">id</span>: <span class="name">routeInfoModel</span> }
<span class="name">header</span>: <span class="name">RouteListHeader</span> {}
<span class="name">delegate</span>: <span class="name">RouteListDelegate</span>{
<span class="name">routeIndex</span>.text: <span class="name">index</span> <span class="operator">+</span> <span class="number">1</span>
<span class="name">routeInstruction</span>.text: <span class="name">instruction</span>
<span class="name">routeDistance</span>.text: <span class="name">distance</span>
}
}</pre>
<p>Inside the <a href="qml-qtlocation-routemodel.html">RouteModel</a>, as you can see above, we add an <a href="qml-qtlocation-routemodel.html#status-prop">onStatusChanged</a> handler, which calls the <code>showRouteList()</code> which updates the <code>routeInfoModel</code>:</p>
<pre class="qml"><span class="name">routeInfoModel</span>.<span class="name">clear</span>()
<span class="keyword">if</span> (<span class="name">routeModel</span>.<span class="name">count</span> <span class="operator">></span> <span class="number">0</span>) {
<span class="keyword">for</span> (<span class="keyword">var</span> <span class="name">i</span> = <span class="number">0</span>; <span class="name">i</span> <span class="operator"><</span> <span class="name">routeModel</span>.<span class="name">get</span>(<span class="number">0</span>).<span class="name">segments</span>.<span class="name">length</span>; i++) {
<span class="name">routeInfoModel</span>.<span class="name">append</span>({
"instruction": <span class="name">routeModel</span>.<span class="name">get</span>(<span class="number">0</span>).<span class="name">segments</span>[<span class="name">i</span>].<span class="name">maneuver</span>.<span class="name">instructionText</span>,
"distance": <span class="name">Helper</span>.<span class="name">formatDistance</span>(<span class="name">routeModel</span>.<span class="name">get</span>(<span class="number">0</span>).<span class="name">segments</span>[<span class="name">i</span>].<span class="name">maneuver</span>.<span class="name">distanceToNextInstruction</span>)
});
}
}</pre>
<p>Files:</p>
<ul>
<li><a href="qtlocation-mapviewer-helper-js.html">mapviewer/helper.js</a></li>
<li><a href="qtlocation-mapviewer-mapviewer-qml.html">mapviewer/mapviewer.qml</a></li>
<li><a href="qtlocation-mapviewer-forms-geocode-qml.html">mapviewer/forms/Geocode.qml</a></li>
<li><a href="qtlocation-mapviewer-forms-geocodeform-ui-qml.html">mapviewer/forms/GeocodeForm.ui.qml</a></li>
<li><a href="qtlocation-mapviewer-forms-locale-qml.html">mapviewer/forms/Locale.qml</a></li>
<li><a href="qtlocation-mapviewer-forms-localeform-ui-qml.html">mapviewer/forms/LocaleForm.ui.qml</a></li>
<li><a href="qtlocation-mapviewer-forms-message-qml.html">mapviewer/forms/Message.qml</a></li>
<li><a href="qtlocation-mapviewer-forms-messageform-ui-qml.html">mapviewer/forms/MessageForm.ui.qml</a></li>
<li><a href="qtlocation-mapviewer-forms-reversegeocode-qml.html">mapviewer/forms/ReverseGeocode.qml</a></li>
<li><a href="qtlocation-mapviewer-forms-reversegeocodeform-ui-qml.html">mapviewer/forms/ReverseGeocodeForm.ui.qml</a></li>
<li><a href="qtlocation-mapviewer-forms-routeaddress-qml.html">mapviewer/forms/RouteAddress.qml</a></li>
<li><a href="qtlocation-mapviewer-forms-routeaddressform-ui-qml.html">mapviewer/forms/RouteAddressForm.ui.qml</a></li>
<li><a href="qtlocation-mapviewer-forms-routecoordinate-qml.html">mapviewer/forms/RouteCoordinate.qml</a></li>
<li><a href="qtlocation-mapviewer-forms-routecoordinateform-ui-qml.html">mapviewer/forms/RouteCoordinateForm.ui.qml</a></li>
<li><a href="qtlocation-mapviewer-forms-routelist-qml.html">mapviewer/forms/RouteList.qml</a></li>
<li><a href="qtlocation-mapviewer-forms-routelistdelegate-qml.html">mapviewer/forms/RouteListDelegate.qml</a></li>
<li><a href="qtlocation-mapviewer-forms-routelistheader-qml.html">mapviewer/forms/RouteListHeader.qml</a></li>
<li><a href="qtlocation-mapviewer-map-circleitem-qml.html">mapviewer/map/CircleItem.qml</a></li>
<li><a href="qtlocation-mapviewer-map-imageitem-qml.html">mapviewer/map/ImageItem.qml</a></li>
<li><a href="qtlocation-mapviewer-map-mapcomponent-qml.html">mapviewer/map/MapComponent.qml</a></li>
<li><a href="qtlocation-mapviewer-map-marker-qml.html">mapviewer/map/Marker.qml</a></li>
<li><a href="qtlocation-mapviewer-map-minimap-qml.html">mapviewer/map/MiniMap.qml</a></li>
<li><a href="qtlocation-mapviewer-map-polygonitem-qml.html">mapviewer/map/PolygonItem.qml</a></li>
<li><a href="qtlocation-mapviewer-map-polylineitem-qml.html">mapviewer/map/PolylineItem.qml</a></li>
<li><a href="qtlocation-mapviewer-map-rectangleitem-qml.html">mapviewer/map/RectangleItem.qml</a></li>
<li><a href="qtlocation-mapviewer-menus-itempopupmenu-qml.html">mapviewer/menus/ItemPopupMenu.qml</a></li>
<li><a href="qtlocation-mapviewer-menus-mainmenu-qml.html">mapviewer/menus/MainMenu.qml</a></li>
<li><a href="qtlocation-mapviewer-menus-mappopupmenu-qml.html">mapviewer/menus/MapPopupMenu.qml</a></li>
<li><a href="qtlocation-mapviewer-menus-markerpopupmenu-qml.html">mapviewer/menus/MarkerPopupMenu.qml</a></li>
<li><a href="qtlocation-mapviewer-main-cpp.html">mapviewer/main.cpp</a></li>
<li><a href="qtlocation-mapviewer-mapviewer-pro.html">mapviewer/mapviewer.pro</a></li>
<li><a href="qtlocation-mapviewer-mapviewer-qrc.html">mapviewer/mapviewer.qrc</a></li>
</ul>
</div>
<!-- @@@mapviewer -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2015 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
|