[JavaScript] Adding two finger map movement in my OpenLayers map possible?

[dens22]

1. What is the problem?

I am struggling to implement the double finger map movement (like in Google Maps), in my OpenLayers map.

1. What is your code supposed to do?

Prevent user from being trapped in a map section on mobile devices.

1. What is your code doing instead?

Disabling zoom.

1. What have you tried?

I have tried to disable zoom and movement, but that obviously does not solve my problem:

 

function initializeMap(){

  var i = new ol.interaction.MouseWheelZoom();

    var oldFn = i.handleEvent;
    i.handleEvent = function(e) {
    var type = e.type;
    if (type !== "wheel" && type !== "wheel" ) {
        return true;
    }
    
    if (!e.originalEvent.altKey) {
        return true
    }

    oldFn.call(this,e);
    }

    var map = new ol.Map({
    interactions: ol.interaction.defaults({mouseWheelZoom: false}).extend([i]),
    layers: [
        new ol.layer.Tile({
        source: new ol.source.OSM()
        })
    ],
    target: 'map',
    view: new ol.View({
        center: ol.proj.fromLonLat([52.71730, 72.61975]),
        zoom: 18
    })
    });
        // Adding marker
        var markers = new ol.layer.Vector({
            source: new ol.source.Vector(),
            style: new ol.style.Style({
            image: new ol.style.Icon({
            anchor: [0.5, 1],
            src: '../resources/map_marker.png'
          })
        })
      });
      map.addLayer(markers);
      
      var marker = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat([52.71730, 72.61975])));
      markers.getSource().addFeature(marker);


}

1. Have you tried googling for answers?

I have and I do not understand how to implement it.

 

[AnotherMax]

It should be implemented out of the box. https://openlayers.org/en/latest/apidoc/module-ol_interaction.html

https://openlayers.org/en/latest/apidoc/module-ol_interaction_PinchZoom-PinchZoom.html

I assume you're using a somewhat recent version.

 

You could try and hook into the 'on' call and do a console log.

Last thing to check is whether it's supported on your device? If you're using an old device with old browers, could cause issues: https://caniuse.com/touch