MapComponent.qml Example File

  /****************************************************************************
  **
  ** Copyright (C) 2015 The Qt Company Ltd.
  ** Contact: http://www.qt.io/licensing/
  **
  ** This file is part of the examples of the Qt Toolkit.
  **
  ** $QT_BEGIN_LICENSE:BSD$
  ** You may use this file under the terms of the BSD license as follows:
  **
  ** "Redistribution and use in source and binary forms, with or without
  ** modification, are permitted provided that the following conditions are
  ** met:
  **   * Redistributions of source code must retain the above copyright
  **     notice, this list of conditions and the following disclaimer.
  **   * Redistributions in binary form must reproduce the above copyright
  **     notice, this list of conditions and the following disclaimer in
  **     the documentation and/or other materials provided with the
  **     distribution.
  **   * Neither the name of The Qt Company Ltd nor the names of its
  **     contributors may be used to endorse or promote products derived
  **     from this software without specific prior written permission.
  **
  **
  ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
  **
  ** $QT_END_LICENSE$
  **
  ****************************************************************************/

  import QtQuick 2.5
  import QtQuick.Controls 1.4
  import QtPositioning 5.5
  import QtLocation 5.6
  import "../helper.js" as Helper

  Map {
      id: map
      property bool followme: false
      property variant scaleLengths: [5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 20000, 50000, 100000, 200000, 500000, 1000000, 2000000]

      function calculateScale()
      {
          var coord1, coord2, dist, text, f
          f = 0
          coord1 = map.toCoordinate(Qt.point(0,scale.y))
          coord2 = map.toCoordinate(Qt.point(0+scaleImage.sourceSize.width,scale.y))
          dist = Math.round(coord1.distanceTo(coord2))

          if (dist === 0) {
              // not visible
          } else {
              for (var i = 0; i < scaleLengths.length-1; i++) {
                  if (dist < (scaleLengths[i] + scaleLengths[i+1]) / 2 ) {
                      f = scaleLengths[i] / dist
                      dist = scaleLengths[i]
                      break;
                  }
              }
              if (f === 0) {
                  f = dist / scaleLengths[i]
                  dist = scaleLengths[i]
              }
          }

          text = Helper.formatDistance(dist)
          scaleImage.width = (scaleImage.sourceSize.width * f) - 2 * scaleImageLeft.sourceSize.width
          scaleText.text = text
      }

      center {
          // The Qt Company in Oslo
          latitude: 59.9485
          longitude: 10.7686
      }

      gesture.flickDeceleration: 3000
      gesture.enabled: true
      onCopyrightLinkActivated: Qt.openUrlExternally(link)

      onCenterChanged:{
          scaleTimer.restart()
          if (map.followme)
              if (map.center != positionSource.position.coordinate) map.followme = false
      }

      onZoomLevelChanged:{
          scaleTimer.restart()
          if (map.followme) map.center = positionSource.position.coordinate
      }

      onWidthChanged:{
          scaleTimer.restart()
      }

      onHeightChanged:{
          scaleTimer.restart()
      }

      Keys.onPressed: {
          if (event.key === Qt.Key_Plus) {
              map.zoomLevel++
          } else if (event.key === Qt.Key_Minus) {
              map.zoomLevel--
          }
      }

      Timer {
          id: scaleTimer
          interval: 100
          running: false
          repeat: false
          onTriggered: {
              map.calculateScale()
          }
      }

      Item {
          id: scale
          visible: scaleText.text != "0 m"
          z: map.z + 3
          anchors.bottom: parent.bottom
          anchors.right: parent.right
          anchors.margins: 20
          height: scaleText.height * 2
          width: scaleImage.width

          Image {
              id: scaleImageLeft
              source: "../../resources/scale_end.png"
              anchors.bottom: parent.bottom
              anchors.right: scaleImage.left
          }
          Image {
              id: scaleImage
              source: "../../resources/scale.png"
              anchors.bottom: parent.bottom
              anchors.right: scaleImageRight.left
          }
          Image {
              id: scaleImageRight
              source: "../../resources/scale_end.png"
              anchors.bottom: parent.bottom
              anchors.right: parent.right
          }
          Label {
              id: scaleText
              color: "#004EAE"
              anchors.centerIn: parent
              text: "0 m"
          }
          Component.onCompleted: {
              map.calculateScale();
          }
      }

      MapQuickItem {
          id: poiTheQtComapny
          sourceItem: Rectangle { width: 14; height: 14; color: "#e41e25"; border.width: 2; border.color: "white"; smooth: true; radius: 7 }
          coordinate {
              latitude: 59.9485
              longitude: 10.7686
          }
          opacity:1.0
          anchorPoint: Qt.point(sourceItem.width/2, sourceItem.height/2)
      }

      MapQuickItem {
          sourceItem: Text{
              text: "The Qt Company"
              color:"#242424"
              font.bold: true
              styleColor: "#ECECEC"
              style: Text.Outline
          }
          coordinate: poiTheQtComapny.coordinate
          anchorPoint: Qt.point(-poiTheQtComapny.sourceItem.width * 0.5,poiTheQtComapny.sourceItem.height * 1.5)
      }

      PositionSource{
          id: positionSource
          active: followme

          onPositionChanged: {
              map.center = positionSource.position.coordinate
          }
      }

      Slider {
          id: zoomSlider;
          z: map.z + 3
          minimumValue: map.minimumZoomLevel;
          maximumValue: map.maximumZoomLevel;
          anchors.margins: 10
          anchors.bottom: scale.top
          anchors.top: parent.top
          anchors.right: parent.right
          orientation : Qt.Vertical
          value: map.zoomLevel
          onValueChanged: {
              map.zoomLevel = value
          }
      }
  }