I've made a very simple application whereby I use a ClipView to pan (default functionality) and zoom, by binding the scale of the ClipViews node to a variable that holds the zoom value. On this page: http://java.sun.com/developer/technicalArticles/javafx/v1_2_newlayouts, the ClipView is compared to Google Maps (pan/zoom), even though it does not support zooming out-of-the-box. This is the kind of behavior that I wish to reproduce.

Unfortunately, when I zoom in, it is no longer possible to pan the whole image but it gets cropped off on different sides depending on the zoom level and position.

Below is the code that I run, zooming can be achieved by either double clicking or using the scroll wheel.

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.ClipView;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;


var zoom:Number = 1.0;

Stage {
    width: 800
    height: 600
    scene: Scene {
        content:
            ClipView {
                pannable: true
                node:
                    ImageView {
                        // Enable zooming by binding the scale to a zoom variable
                        scaleX: bind zoom;
                        scaleY: bind zoom;

                        image: Image {
                            url: "http://www.oera.net/How2/PlanetTexs/EarthMap_2500x1250.jpg"
                        }

                        onMouseWheelMoved: function( e: MouseEvent ):Void {
                            // Zoom on scroll
                            zoom += -e.wheelRotation / 10
                        }

                        onMouseClicked: function( e: MouseEvent ):Void {
                            // Zoom on double click
                            if(e.clickCount >= 2){
                                zoom += 0.5
                            }
                        }
                    }
            }
    }
}