onHeightChanged: if (imagePreview.status === Image.Ready) imagePreview.fitToScreen();

        MouseArea {
            anchors.fill: imageContainer
            onClicked: imagePreview.fitToScreen()
        }

        PageHeader { title: "Network map" }

import QtQuick 2.0
import Sailfish.Silica 1.0

Page {

    Rectangle { anchors.fill: parent; color: 'black' }

    SilicaFlickable {
        id: imageFlickable
        anchors.fill: parent
        contentWidth: imageContainer.width; contentHeight: imageContainer.height
        onHeightChanged: if (imagePreview.status === Image.Ready) imagePreview.fitToScreen();

        PageHeader { title: "Network map" }

        Item {
            id: imageContainer
            width: Math.max(imagePreview.width * imagePreview.scale, imageFlickable.width)
            height: Math.max(imagePreview.height * imagePreview.scale, imageFlickable.height)

            Image {
                id: imagePreview

                property real prevScale

                function fitToScreen() {
                    scale = Math.min(imageFlickable.width / width, imageFlickable.height / height, 1)
                    pinchArea.minScale = scale
                    prevScale = scale
                }
                anchors.centerIn: parent
                fillMode: Image.PreserveAspectFit
                source: "../images/networkmap.png"
                sourceSize.height: 3489;
                smooth: !imageFlickable.moving

                onStatusChanged: {
                    if (status == Image.Ready) {
                        fitToScreen()
                        loadedAnimation.start()
                    }
                }
                NumberAnimation {
                    id: loadedAnimation
                    target: imagePreview
                    property: "opacity"
                    duration: 250
                    from: 0; to: 1
                    easing.type: Easing.InOutQuad
                }
                onScaleChanged: {
                    if ((width * scale) > imageFlickable.width) {
                        var xoff = (imageFlickable.width / 2 + imageFlickable.contentX) * scale / prevScale;
                        imageFlickable.contentX = xoff - imageFlickable.width / 2
                    }
                    if ((height * scale) > imageFlickable.height) {
                        var yoff = (imageFlickable.height / 2 + imageFlickable.contentY) * scale / prevScale;
                        imageFlickable.contentY = yoff - imageFlickable.height / 2
                    }
                    prevScale = scale
                }
            }
        }
        PinchArea {
            id: pinchArea

            property real minScale: 1.0
            property real maxScale: 3.0

            anchors.fill: parent
            enabled: imagePreview.status === Image.Ready
            pinch.target: imagePreview
            pinch.minimumScale: minScale * 0.9
            pinch.maximumScale: maxScale * 2.0

            onPinchFinished: {
                imageFlickable.returnToBounds()
                if (imagePreview.scale < pinchArea.minScale) {
                    bounceBackAnimation.to = pinchArea.minScale
                    bounceBackAnimation.start()
                }
                else if (imagePreview.scale > pinchArea.maxScale) {
                    bounceBackAnimation.to = pinchArea.maxScale
                    bounceBackAnimation.start()
                }
            }
            NumberAnimation {
                id: bounceBackAnimation
                target: imagePreview
                duration: 250
                property: "scale"
                from: imagePreview.scale
            }
            MouseArea {
                id: pageDimmer
                anchors.fill: parent
                onPressAndHold: {
                    if      (imagePreview.opacity==1.00) imagePreview.opacity=0.75
                    else if (imagePreview.opacity==0.75) imagePreview.opacity=0.50
                    else if (imagePreview.opacity==0.50) imagePreview.opacity=1.00
                }
            }
        }

        VerticalScrollDecorator { color: 'black'; width: 6 }

        HorizontalScrollDecorator { color: 'black'; height: 6 }
    }
}