CODEWITHSUNDEEP
openlayersopenlayers-6
user2300947
user2300947

Reputation: 666

OpenLayer Drag Rotate the map ONLY

how do we rotate the openlayer map by dragging and holding either shift or control key?

So far what i have tried is to follow the tutorial and samples, but I only found DragRotateZoom and there is no DragRotate in the API documentation

const map = new ol.Map({
      target: 'map',
      layers: [rasterLayer, vectorLayer],
      view: new ol.View({
        center: ol.proj.fromLonLat([0, 0]),
        zoom: 2,
      }),
      
      interactions: ol.interaction.defaults.defaults().extend([
         new ol.interaction.DragRotateAndZoom()
      ])
    });

I dont want the zoom as I am making a survey application and it is annoying when zoom occurs when rotating, how to solve this?

Upvotes: -1

Views: 59

Answers (2)

Mike
Mike

Reputation: 17962

You can use the options to remove unwanted interactions from the defaults. You can also combine conditions, for example

   const map = new ol.Map({
      target: 'map',
      layers: [rasterLayer, vectorLayer],
      view: new ol.View({
        center: ol.proj.fromLonLat([0, 0]),
        zoom: 2,
      }),
      
      interactions: ol.interaction.defaults.defaults({shiftDragZoom: false, altShiftDragRotate: false}).extend([
         new ol.interaction.DragRotate({condition: function(e) {
           return ol.events.condition.shiftKeyOnly(e) || ol.events.condition.altShiftKeyOnly(e)
         })
      ])
    });

Upvotes: 1

user2300947
user2300947

Reputation: 666

found the solution

  // Create the DragRotate interaction
  var dragRotate = new ol.interaction.DragRotate({
    condition: ol.events.condition.shiftKeyOnly  // Rotate only when Shift key is pressed
  });

  // Add the DragRotate interaction to the map
  map.addInteraction(dragRotate);

However i need to disable the drag zoom as I dont need that feature

  // Remove any DragZoom interaction if it was added previously
  map.getInteractions().forEach(function(interaction) {
    if (interaction instanceof ol.interaction.DragZoom) {
      map.removeInteraction(interaction);
    }
  });

Upvotes: -1

Related Questions