Openlayer: Two finger movement (dragPan)

Question

Google recently reworked there maps mobile behaviour. Now on mobile you have can move the map with two fingers. (see map-simple example on a phone, not with any browser emulator!).

I want to implement the same feature in openlayer. Detecting mobile (with e.g. WURFL), disabling the dragPan is not the problem, but how can I write my own ol.interaction.Interaction to work with two fingers?

I looked into the doku and didn't find any examples, where to start.

Answer 1

The drag interactions typically come with a 'condition' option. You provide a function taking one parameter (ol.MapBrowserEvent) and returning a boolean indicating whether or not the interaction should apply.

The ol.MapBrowserEvent wraps the original browser event which means you can just look for the touches array on that and check if it is of length 2.

<script>
    var map = new ol.Map({
        interactions: [
            new ol.interaction.DragPan({

                // This comment marks the beginning of the code of interest.

                condition: function(olBrowserEvent) {
                    if (olBrowserEvent.originalEvent.touches)
                        return olBrowserEvent.originalEvent.touches.length === 2;
                    return false;
                }

                // This comment marks the end.

            })
        ],
        layers: [
            // Your layers.
        ],
        target: 'map',
        view: new ol.View({
            center: [-33519607, 5616436],
            rotation: -Math.PI / 8,
            zoom: 8
        })
    });
</script>