Add documentation for GeoJson Viewer example

Some code has been changed to make the documentation clearer.

Pick-to: 6.5
Change-Id: Icae03a7babc7e40d10cbdca5bfa81d3ab8efbd86
Reviewed-by: Volker Hilsheimer <volker.hilsheimer@qt.io>

9 files changed, 308 insertions, 62 deletions

diff --git a/examples/location/geojson_viewer/GeoJsonDelegate.qml b/examples/location/geojson_viewer/GeoJsonDelegate.qml
index 81d23c54..87b0abfe 100644
--- a/examples/location/geojson_viewer/GeoJsonDelegate.qml
+++ b/examples/location/geojson_viewer/GeoJsonDelegate.qml
@@ -7,12 +7,15 @@ import QtPositioning
 import QtLocation
 import Qt.labs.qmlmodels 1.0
 
+//! [DelegateChooser]
 DelegateChooser {
     id: dc
     role: "type"
-    property color defaultColor: "grey"
+//! [DelegateChooser]
+    property color defaultColor: "#46a2da"
     property real defaultOpacity: 0.6
 
+    //! [DelegateChoice Point]
     DelegateChoice {
         roleValue: "Point"
         delegate: MapCircle {
@@ -20,15 +23,14 @@ DelegateChooser {
             property var props: modelData.properties
             geoShape: modelData.data
             radius: (props && props.radius) || 20*1000
-            border.width: 3
-            border.color: hh.hovered ? "magenta" : "black"
+            border.width: 2
+            border.color: hh.hovered ? "magenta" : Qt.darker(color)
             opacity: dc.defaultOpacity
-            /* The expression below is equivalent to:
-               ((props !== undefined && props["color"] !== undefined) ? props["color"] :
-               ((parent && parent.props !== undefined && parent.props["color"] !== undefined) ? parent.props["color"] : dc.defaultColor))
-            */
             color: (props && props.color) || (parent && parent.props && parent.props.color) || dc.defaultColor
+            autoFadeIn: false
+    //! [DelegateChoice Point]
 
+            //! [Handler Point]
             TapHandler {
                 onTapped: {
                     if (props !== undefined)
@@ -42,6 +44,7 @@ DelegateChooser {
             HoverHandler {
                 id: hh
             }
+            //! [Handler Point]
         }
     }
 
@@ -51,9 +54,10 @@ DelegateChooser {
             property string geojsonType: "LineString"
             property var props: modelData.properties
             geoShape: modelData.data
-            line.width: 4
+            line.width: 2
             opacity: dc.defaultOpacity
-            line.color: hh.hovered ? "magenta" : (props && props.color) || (parent && parent.props && parent.props.color) || dc.defaultColor
+            line.color: hh.hovered ? "magenta" : (props && props.color) || (parent && parent.props && parent.props.color) || Qt.darker(dc.defaultColor)
+            autoFadeIn: false
 
             TapHandler {
                 onTapped: {
@@ -79,8 +83,10 @@ DelegateChooser {
             geoShape: modelData.data
             opacity: dc.defaultOpacity
             color: (props && props.color) || (parent && parent.props && parent.props.color) || dc.defaultColor
-            border.width: 4
-            border.color: hh.hovered ? "magenta" : "black"
+            border.width: 2
+            border.color: hh.hovered ? "magenta" : Qt.darker(color)
+            autoFadeIn: false
+
             TapHandler {
                 onTapped: {
                     if (props !== undefined)
diff --git a/examples/location/geojson_viewer/doc/images/geojson_viewer.png b/examples/location/geojson_viewer/doc/images/geojson_viewer.png
new file mode 100644
index 00000000..f88588a3
--- /dev/null
+++ b/examples/location/geojson_viewer/doc/images/geojson_viewer.png
diff --git a/examples/location/geojson_viewer/doc/src/geojson_viewer.qdoc b/examples/location/geojson_viewer/doc/src/geojson_viewer.qdoc
new file mode 100644
index 00000000..b90c02b8
--- /dev/null
+++ b/examples/location/geojson_viewer/doc/src/geojson_viewer.qdoc
@@ -0,0 +1,190 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \example geojson_viewer
+    \title GeoJson Viewer (C++/QML)
+    \ingroup qtlocation-examples
+
+    \brief The GeoJson viewer example demonstrates how to manipulate MapItems, handle user input
+    and I/O to and from a GeoJson file.
+
+    \image geojson_viewer.png
+
+    The example displays a map with various MapItems. The MapItems are either imported from a
+    GeoJson file, using the \l {QGeoJson} API of \l {QtLocation} or drawn by the user using
+    \l {TapHandler}{TapHandlers}.
+
+    Examples for GeoJson files can be found in the directory data within the example directory.
+    They are read and written using the \l {QGeoJson::importGeoJson}{importGeoJson} and
+    \l {QGeoJson::exportGeoJson}{exportGeoJson} functions.
+
+    To draw a MapItem, right click on an empty part of the map and select an item type of your
+    choice in the appearing menu. The next clicks will define the chosen item. The example allows
+    to draw \l {MapCircle}{MapCircles}, \l {MapRectangle}{MapRectangles}, \l {MapPolygon}{MapPolygons}
+    and \l {MapPolyline}{MapPolylines}. Items that are fully defined by two points, i.e. circles
+    and rectangles, are drawn with two clicks of the left mouse button. Items that are defined by
+    multiple points, i.e. polygons and polylines, are created by an arbitrary amount of left button
+    clicks and completed with the right mouse button. Items drawn this way are saved as points,
+    polygons and polylines to fit the GeoJson specification, see \l {https://geojson.org/}.
+
+
+    \include examples-run.qdocinc
+
+
+    \section1 Creating a MapView
+
+    First we create a base map on which all items can be placed on. We take advantage of a
+    \l {MapView} element that combines a basic \l Map with input handling (mouse wheel, drag,
+    etc.). The underlying \l Map can be accessed with \l {MapView::map}{map} property. If you miss
+    a property in \l {MapView} it can be most likely accessed with \l {MapView::map}{MapView.map}.
+
+    \snippet geojson_viewer/main.qml MapView Creation
+
+
+    \section1 Setting up the GeoJson Model / Display MapItems
+
+    In order to display file contents on the map we will use a design pattern known as
+    \l {model-view-programming}{Model/View Programming}. First we need to set up a suitable view,
+    in this example a \l {MapItemView} element. Its parent must be set to the underlying map of the
+    \l {MapView} to correctly display all items placed in it.
+
+    \snippet geojson_viewer/main.qml MapItemView
+
+    Next we need a suitable model, representing a GeoJson file. The GeoJson file is converted into
+    a tree of \l {QVariantMap}{QVariantMaps} and \l{QVariantList}{QVariantLists} within a C++ class
+    in this example.
+
+    \snippet geojson_viewer/main.cpp GeoJsoner
+
+    The class contains a member \c{model} which will be set after reading a GeoJson file.
+
+    \snippet geojson_viewer/main.cpp Conversion QVariantList
+
+    The class is made available to the QML Engine to further process the model in QML.
+
+    \snippet geojson_viewer/main.cpp QMLEngine
+
+    The \l {MapItemView::model}{model} property of the \l{MapItemView} element can then be set to
+    the \l{QVariant} representation of the model:
+
+    \snippet geojson_viewer/main.qml MapItemView Model
+
+    Finally we need a delegate, translating the model data into a representation of items, filling
+    the \l {MapItemView}. It is set to the \l {MapItemView::delegate}{delegate} property of the
+    \l{MapItemView}:
+
+    \snippet geojson_viewer/main.qml MapItemView Delegate
+
+    We use a \l {DelegateChooser} element defined the file \c{GeoJsonDelegate.qml} to take into
+    account the varying representation of different geometry types of GeoJson objects.
+
+    \snippet geojson_viewer/GeoJsonDelegate.qml DelegateChooser
+
+    Various \l {DelegateChoice}{DelegateChoices} are included, each representing a different
+    geometry type to be found in a GeoJson file. The property \l {DelegateChooser::role}{role}
+    will be matched with \l {DelegateChoice::roleValue}{DelegateChoice.roleValue} to determine the
+    correct delegate.
+
+    As an example, a point, described with \c {"type":"Point"} in GeoJson, is represented by a
+    \l {MapCircle} on the \l {MapItemView}:
+
+    \snippet geojson_viewer/GeoJsonDelegate.qml DelegateChoice Point
+
+    Properties of the \l {MapCircle}, such as \l {MapCircle::color}{color} or
+    \l{MapCircle::radius}{radius} are attempted to be read from the GeoJson file that is
+    available in form of the modelData property. However, this is not a strict standard of GeoJson
+    and fallback values are set for all properties.
+
+
+    \section1 Writing MapItems to GeoJson
+
+    To write MapItems to a GeoJson file we first will convert the Mapitems into a representation
+    of \l {QVariantMap}{QVariantMaps} and \l{QVariantList}{QVariantLists}. This is conducted in C++
+    in this example, as part of the \c {GeoJsoner} class used before:
+
+    \snippet geojson_viewer/main.cpp Conversion QVariantList From Items
+
+    \c {extractor} is a helper class that converts Mapitems into \l {QVariant} representations, for
+    example the \l{MapCircle}:
+
+    \snippet geojson_viewer/main.cpp Extractor Example Circle
+
+    In a second step the \l {QVariant} representation can be dumped into a file using
+    \l {QJsonDocument}.
+
+    \snippet geojson_viewer/main.cpp Write QVariantList to Json
+
+    The two C++ functions that are required for writing files can be called from QML, thanks to the
+    definition as \l {Q_INVOKABLE}:
+
+    \snippet geojson_viewer/main.qml Write File
+
+    Note that we could use \c {geoJsoner.model} instead of rebuilding the \l {QVariant}
+    representation. However, the latter is done for demonstration purposes here.
+
+    \section1 User Interaction with MapItems
+
+    To handle user interactions we will use \l {PointHandler}{PointHandlers}. They are especially
+    well suited for the task as they conform to the exact shape of the underlying item, in contrast
+    to \l{MouseArea}{MouseArea}, which always covers a square shape. MapItems that are imported
+    from a GeoJson file get their own \l {HoverHandler} and \l {TapHandler} directly in the delegate:
+
+    \snippet geojson_viewer/GeoJsonDelegate.qml Handler Point
+
+    The \l {TapHandler} is used to write some information about the item on the console when the
+    item is tapped. The \l {HoverHandler} is used to highlight items that lie beneath the mouse
+    pointer. This is implemented by describing the property
+    \l {MapCircle::border::color}{border.color} depending on the property / state
+    \l {HoverHandler::hovered}{hovered} of the \l{HoverHandler}.
+
+
+    \section1 Adding new Items
+
+    A combination of \l {HoverHandler} and \l {TapHandler} for the \l {MapView} allows us to
+    react to mouse movements and clicks by the user.
+
+    If the \l{TapHandler} emits a \l{TapHandler::singleTapped}{singleTapped} signal, we will
+    create or modify a new MapItem on \l{Qt::LeftButton}{LeftButton} and finish the MapItem on
+    \l{Qt::RightButton}{RightButton}. If there is no item to finish then the
+    \l{Qt::RightButton}{RightButton} will open a menu.
+
+    \snippet geojson_viewer/main.qml Taphandler Map
+
+    The \l {HoverHandler::pointChanged}{pointChanged} signal is used to temporarily update a
+    MapItem, giving the user a preview.
+
+    \snippet geojson_viewer/main.qml Hoverhandler Map
+
+    Mapitems are generated from prototypes that are defined in separate qml files. They are created
+    using the \l{Qt::createComponent}{createComponent} function and added to the map with
+    \l {Map::addMapItem}{addMapItem}. A reference to the new item is stored for further manipulation
+    by the user.
+
+    \snippet geojson_viewer/main.qml add item
+
+
+    Adding the item to the \l {Map} is sufficient to display the item. However, in order to
+    further use the item (e.g. saving it to a file), it has has to be registered with the model.
+    This is done after editing is finished:
+
+    \snippet geojson_viewer/main.qml finish item
+
+    The class GeoJsoner converts the new item into a \l {QVariant} representation and inserts the
+    respective result into the existing \l {QVariant} representation of all items:
+
+    \snippet geojson_viewer/main.cpp add item
+
+
+    \section1 Removing Items
+
+    To remove all items from the map, we simply reset the model to an empty \l {QVariantList}.
+    This is possible because we registered all new items with the model and items not added to the
+    mode will not be affected. This is implemented in C++,
+
+    \snippet geojson_viewer/main.cpp clear
+
+    and executed from QML
+
+    \snippet geojson_viewer/main.qml clearAllItems
+*/
diff --git a/examples/location/geojson_viewer/main.cpp b/examples/location/geojson_viewer/main.cpp
index ba390c7d..8fcf8198 100644
--- a/examples/location/geojson_viewer/main.cpp
+++ b/examples/location/geojson_viewer/main.cpp
@@ -70,6 +70,7 @@ public:
             ls["properties"] = mapPolyline->property("props").toMap();
         return ls;
     }
+    //! [Extractor Example Circle]
     static QVariantMap toVariant(QDeclarativeCircleMapItem *mapCircle)
     {
         QVariantMap pt;
@@ -80,6 +81,7 @@ public:
         pt["properties"] = propMap;
         return pt;
     }
+    //! [Extractor Example Circle]
     static QVariantMap toVariant(QDeclarativeRectangleMapItem *mapRectangle)
     {
         QVariantMap pt;
@@ -128,7 +130,6 @@ public:
                 entry = toVariant(circle); // If GeoJSON Point type is visualized in other ways, handle those types here instead.
             } else if (QDeclarativeRectangleMapItem *rectangle = qobject_cast<QDeclarativeRectangleMapItem *>(kid)) {
                 entry = toVariant(rectangle); // For the self-drawn rectangles. Will be exported as Polygons
-
             }
             features.append(entry);
         }
@@ -145,10 +146,12 @@ public:
     }
 };
 
+//! [GeoJsoner]
 class GeoJsoner: public QObject
 {
     Q_OBJECT
     Q_PROPERTY(QVariant model MEMBER m_importedGeoJson NOTIFY modelChanged)
+//! [GeoJsoner]
 
 public:
     GeoJsoner(QObject *parent = nullptr) : QObject(parent)
@@ -157,6 +160,42 @@ public:
     }
 
 public slots:
+    //! [clear]
+    Q_INVOKABLE void clear()
+    {
+        m_importedGeoJson = QVariantList();
+        emit modelChanged();
+    }
+    //! [clear]
+
+    //! [add item]
+    Q_INVOKABLE void addItem(QQuickItem *item)
+    {
+        QVariant entry;
+        if (QDeclarativePolylineMapItem *polyline = qobject_cast<QDeclarativePolylineMapItem *>(item)) {
+            entry = extractor::toVariant(polyline);
+        } else if (QDeclarativePolygonMapItem *polygon = qobject_cast<QDeclarativePolygonMapItem *>(item)) {
+            entry = extractor::toVariant(polygon);
+        } else if (QDeclarativeCircleMapItem *circle = qobject_cast<QDeclarativeCircleMapItem *>(item)) {
+            entry = extractor::toVariant(circle);
+        } else if (QDeclarativeRectangleMapItem *rectangle = qobject_cast<QDeclarativeRectangleMapItem *>(item)) {
+            entry = extractor::toVariant(rectangle);
+        } else {
+            return;
+        }
+        QVariantList geoJson = m_importedGeoJson.toList();
+        if (!geoJson.isEmpty()){
+            QVariantList geoData = (geoJson[0].toMap()["type"] == "FeatureCollection") ? geoJson[0].toMap()["data"].toList() : geoJson;
+            geoData.append(entry);
+            geoJson[0] = QVariantMap{{"type", "FeatureCollection"}, {"data", geoData}};
+        }
+        else {
+            geoJson.append(entry);
+        }
+        m_importedGeoJson = geoJson;
+        emit modelChanged();
+    }
+    //! [add item]
 
     Q_INVOKABLE bool load(QUrl url)
     {
@@ -177,14 +216,17 @@ public slots:
         }
 
         // Import geographic data to a QVariantList
+        //! [Conversion QVariantList]
         QVariantList modelList = QGeoJson::importGeoJson(loadDoc);
         m_importedGeoJson =  modelList;
         emit modelChanged();
+        //! [Conversion QVariantList]
         return true;
     }
 
     // Used by the MapItemView Extractor to identify a Feature
-    Q_INVOKABLE QVariantList toGeoJson(QDeclarativeGeoMapItemView *mapItemView)
+    //! [Conversion QVariantList From Items]
+    Q_INVOKABLE QVariantList toVariant(QDeclarativeGeoMapItemView *mapItemView)
     {
         QVariantList res;
         QDeclarativeGeoMapItemView *root = mapItemView;
@@ -193,7 +235,9 @@ public slots:
             res.append(miv);
         return res;
     }
+    //! [Conversion QVariantList From Items]
 
+    //! [Write QVariantList to Json]
     Q_INVOKABLE void dumpGeoJSON(QVariantList geoJson, QUrl url)
     {
         QJsonDocument json = QGeoJson::exportGeoJson(geoJson);
@@ -202,6 +246,7 @@ public slots:
         jsonFile.write(json.toJson());
         jsonFile.close();
     }
+    //! [Write QVariantList to Json]
 
     Q_INVOKABLE void writeDebug(QVariantList geoJson, QUrl url)
     {
@@ -264,7 +309,10 @@ int main(int argc, char *argv[])
     engine.rootContext()->setContextProperty("dataPath", QUrl(QStringLiteral("file://")
                                                               + qPrintable(QT_STRINGIFY(SRC_PATH))
                                                               + QStringLiteral("/data")));
+    //! [QMLEngine]
     qmlRegisterType<GeoJsoner>("Qt.GeoJson", 1, 0, "GeoJsoner");
+    //! [QMLEngine]
+
     engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
 
     if (engine.rootObjects().isEmpty())
diff --git a/examples/location/geojson_viewer/main.qml b/examples/location/geojson_viewer/main.qml
index d514ef1e..0db8ab2f 100644
--- a/examples/location/geojson_viewer/main.qml
+++ b/examples/location/geojson_viewer/main.qml
@@ -14,8 +14,8 @@ import "mapitems"
 ApplicationWindow {
     id: win
     visible: true
-    width: 1024
-    height: 1024
+    width: 512
+    height: 512
     menuBar: mainMenu
     title: qsTr("GeoJSON Viewer: ") + view.map.center +
            " zoom " + view.map.zoomLevel.toFixed(3)
@@ -42,9 +42,11 @@ ApplicationWindow {
         fileMode: FileDialog.SaveFile
         currentFolder: StandardPaths.writableLocation(StandardPaths.TempLocation)
         nameFilters: ["GeoJSON files (*.geojson *.json)"]
+        //! [Write File]
         onAccepted: {
-            geoJsoner.dumpGeoJSON(geoJsoner.toGeoJson(miv), fileWriteDialog.selectedFile);
+            geoJsoner.dumpGeoJSON(geoJsoner.toVariant(miv), fileWriteDialog.selectedFile);
         }
+        //! [Write File]
     }
 
     FileDialog {
@@ -55,7 +57,7 @@ ApplicationWindow {
         currentFolder: StandardPaths.writableLocation(StandardPaths.TempLocation)
         nameFilters: ["GeoJSON files (*.geojson *.json)"]
         onAccepted: {
-            geoJsoner.writeDebug(geoJsoner.toGeoJson(miv), debugWriteDialog.selectedFile);
+            geoJsoner.writeDebug(geoJsoner.toVariant(miv), debugWriteDialog.selectedFile);
         }
     }
 
@@ -78,6 +80,12 @@ ApplicationWindow {
                 }
             }
             MenuItem {
+                text: "&Clear"
+                onTriggered: {
+                    view.clearAllItems()
+                }
+            }
+            MenuItem {
                 text: "E&xit"
                 onTriggered: Qt.quit()
             }
@@ -115,50 +123,63 @@ ApplicationWindow {
         onActivated: view.map.zoomLevel = Math.round(view.map.zoomLevel - 1)
     }
 
+    //! [MapView Creation]
     MapView {
         id: view
         anchors.fill: parent
-        map.center: QtPositioning.coordinate(43.59, 13.50) // Ancona, Italy
         map.plugin: Plugin { name: "osm" }
         map.zoomLevel: 4
+    //! [MapView Creation]
 
-        property variant unfinishedItem: 'undefined'
+        property variant unfinishedItem: undefined
 
         signal showMainMenu(variant coordinate)
 
+        //! [add item]
         function addGeoItem(item)
         {
-            var count = view.map.mapItems.length
             var co = Qt.createComponent('mapitems/'+item+'.qml')
             if (co.status === Component.Ready) {
                 unfinishedItem = co.createObject(map)
                 unfinishedItem.setGeometry(tapHandler.lastCoordinate)
                 unfinishedItem.addGeometry(hoverHandler.currentCoordinate, false)
                 view.map.addMapItem(unfinishedItem)
-                unfinishedItem.parent = miv
             } else {
                 console.log(item + " is not supported right now, please call us later.")
             }
         }
+        //! [add item]
 
+        //! [finish item]
+        function finishGeoItem()
+        {
+            unfinishedItem.finishAddGeometry()
+            geoJsoner.addItem(unfinishedItem)
+            map.removeMapItem(unfinishedItem)
+            unfinishedItem = undefined
+        }
+        //! [finish item]
+
+        //! [clearAllItems]
         function clearAllItems()
         {
-            var count = view.map.mapItems.length
-            for (var i = count-1; i>=0; i--){
-                var item = view.map.mapItems[i]
-                item.parent = view.map
-                view.map.removeMapItem(item)
-            }
+            geoJsoner.clear();
         }
+        //! [clearAllItems]
 
+        //! [MapItemView]
         MapItemView {
             id: miv
             parent: view.map
+            //! [MapItemView]
+            //! [MapItemView Model]
             model: geoJsoner.model
+            //! [MapItemView Model]
+            //! [MapItemView Delegate]
             delegate: GeoJsonDelegate {
             }
+            //! [MapItemView Delegate]
         }
-
         Menu {
             id: mapPopupMenu
 
@@ -191,6 +212,7 @@ ApplicationWindow {
             }
         }
 
+        //! [Hoverhandler Map]
         HoverHandler {
             id: hoverHandler
             property variant currentCoordinate
@@ -198,52 +220,43 @@ ApplicationWindow {
 
             onPointChanged: {
                 currentCoordinate = view.map.toCoordinate(hoverHandler.point.position)
-                if (view.unfinishedItem !== 'undefined')
+                if (view.unfinishedItem !== undefined)
                     view.unfinishedItem.addGeometry(view.map.toCoordinate(hoverHandler.point.position), true)
             }
-
         }
+        //! [Hoverhandler Map]
 
         TapHandler {
             id: tapHandler
             property variant lastCoordinate
             acceptedButtons: Qt.LeftButton | Qt.RightButton
 
+            //! [Taphandler Map]
             onSingleTapped: (eventPoint, button) => {
                 lastCoordinate = view.map.toCoordinate(tapHandler.point.position)
                 if (button === Qt.RightButton) {
-                    if (view.unfinishedItem !== 'undefined') {
-                        view.unfinishedItem.finishAddGeometry()
-                        view.unfinishedItem = 'undefined'
+                    if (view.unfinishedItem !== undefined) {
+                        view.finishGeoItem()
                     } else
                         mapPopupMenu.show(lastCoordinate)
                 } else if (button === Qt.LeftButton) {
-                    if (view.unfinishedItem !== 'undefined') {
+                    if (view.unfinishedItem !== undefined) {
                         if (view.unfinishedItem.addGeometry(view.map.toCoordinate(tapHandler.point.position), false)) {
-                            view.unfinishedItem.finishAddGeometry()
-                            view.unfinishedItem = 'undefined'
+                            view.finishGeoItem()
                         }
                     }
                 }
             }
+            //! [Taphandler Map]
         }
         TapHandler {
-            acceptedButtons: Qt.LeftButton
-            onDoubleTapped: (eventPoint, button) => {
-                var preZoomPoint = view.map.toCoordinate(eventPoint.position);
-                view.map.zoomLevel = Math.floor(view.map.zoomLevel + 1)
-                var postZoomPoint = view.map.toCoordinate(eventPoint.position);
-                var dx = postZoomPoint.latitude - preZoomPoint.latitude;
-                var dy = postZoomPoint.longitude - preZoomPoint.longitude;
-                view.map.center = QtPositioning.coordinate(view.map.center.latitude - dx,
-                                                           view.map.center.longitude - dy);
-            }
-        }
-        TapHandler {
-            acceptedButtons: Qt.RightButton
+            acceptedButtons: Qt.LeftButton | Qt.RightButton
             onDoubleTapped: (eventPoint, button) => {
                 var preZoomPoint = view.map.toCoordinate(eventPoint.position);
-                view.map.zoomLevel = Math.floor(view.map.zoomLevel - 1)
+                if (button === Qt.LeftButton)
+                    view.map.zoomLevel = Math.floor(view.map.zoomLevel + 1)
+                else
+                    view.map.zoomLevel = Math.floor(view.map.zoomLevel - 1)
                 var postZoomPoint = view.map.toCoordinate(eventPoint.position);
                 var dx = postZoomPoint.latitude - preZoomPoint.latitude;
                 var dy = postZoomPoint.longitude - preZoomPoint.longitude;
diff --git a/examples/location/geojson_viewer/mapitems/CircleItem.qml b/examples/location/geojson_viewer/mapitems/CircleItem.qml
index 08709357..2f6790e7 100644
--- a/examples/location/geojson_viewer/mapitems/CircleItem.qml
+++ b/examples/location/geojson_viewer/mapitems/CircleItem.qml
@@ -23,8 +23,5 @@ MapCircle {
     }
 
     function finishAddGeometry(){
-        color = "#46a2da"
-        border.color = "#190a33"
-        opacity = 0.25
     }
 }
diff --git a/examples/location/geojson_viewer/mapitems/PolygonItem.qml b/examples/location/geojson_viewer/mapitems/PolygonItem.qml
index b17c4c84..2dcd4e11 100644
--- a/examples/location/geojson_viewer/mapitems/PolygonItem.qml
+++ b/examples/location/geojson_viewer/mapitems/PolygonItem.qml
@@ -27,8 +27,5 @@ MapPolygon {
     function finishAddGeometry(){
         if (path.length > 0)
             removeCoordinate(path[path.length-1])
-        color = "#46a2da"
-        border.color = "#190a33"
-        opacity = 0.25
     }
 }
diff --git a/examples/location/geojson_viewer/mapitems/PolylineItem.qml b/examples/location/geojson_viewer/mapitems/PolylineItem.qml
index f2922d26..cea4111c 100644
--- a/examples/location/geojson_viewer/mapitems/PolylineItem.qml
+++ b/examples/location/geojson_viewer/mapitems/PolylineItem.qml
@@ -5,7 +5,7 @@ import QtLocation
 
 MapPolyline {
     line.color: "#330a0a"
-    line.width: 4
+    line.width: 2
     opacity: 0.75
     smooth: true
     autoFadeIn: false
@@ -26,7 +26,5 @@ MapPolyline {
 
     function finishAddGeometry(){
         removeCoordinate(pathLength()-1)
-        line.color = "#46a2da"
-        opacity = 0.5
     }
 }
diff --git a/examples/location/geojson_viewer/mapitems/RectangleItem.qml b/examples/location/geojson_viewer/mapitems/RectangleItem.qml
index 51b6d538..02946ef9 100644
--- a/examples/location/geojson_viewer/mapitems/RectangleItem.qml
+++ b/examples/location/geojson_viewer/mapitems/RectangleItem.qml
@@ -21,8 +21,5 @@ MapRectangle {
     }
 
     function finishAddGeometry(){
-        color = "#46a2da"
-        border.color = "#190a33"
-        opacity = 0.25
     }
 }