Bind the Shift Click To A Button

ThinkGeo UI for Web MVC
1

I was wondering if there was a way to bind the shift key to an icon on the screen, so you dont have to hold down the shift key to area zoom to teh map? so when the user clicks on the icon it acts as if the user is holding the shift key down and can highlight an area to zoom into. i found another example but when i try and click on other buttons the zoom box keeps active.


var isactive = false;
       function switchZoomFunction(map) {
           if (isactive == false) {
               olmap = Map1.getOpenLayersMap();
               olmap.controls[1].deactivate();       // Please make sure the control id is Navigation for this controls[1]
 
               var zoomBox = new OpenLayers.Control.ZoomBox({ alwaysZoom: false });
               olmap.addControl(zoomBox);
               zoomBox.activate();
               isactive = true;
           }
           else {
               
               isactive = false;
 
           }
       }


2

Hi Gordon, 
  
 If that don’t works for you, I think that’s maybe because in your map the index of Navigation control is not equal 1. 
  
 If you can debug JavaScript, please make sure the id of olmap.controls[1] is Navigation. 
  
 If it still don’t works for you, please upload a simple project, I can help you make sure the problem. 
  
 Regards, 
  
 Don

3

I got the Zoom to work using this code 


function switchZoomFunction() {
       
       olMap = Map1.getOpenLayersMap();
       
       if (olMap.controls[2].active == true) {
           var zoomBox = new OpenLayers.Control.ZoomBox({ alwaysZoom: false });
           olMap.controls[2].deactivate();       // Please make sure the control id is Navigation for this controls[1]
           //var zoomBox = new OpenLayers.Control.ZoomBox({ alwaysZoom: true });
           olMap.addControl(zoomBox);
           zoomBox.activate();
           return false;
       }
       else {
            
           olMap.removeControl(olMap.controls[10]);
           //zoomBox.deactivate();
           olMap.controls[2].activate(); // This control support common zoom function 
           return true;
       }
        
   }



but now when you zoom in and change it back to the normal mouse the click event wont fire. It wont find any click events after zooming in using the zoom box tool but if you click with the zoom box the mouse click fires then you can switch to the normals mouse and everything works 


function normalMouseFunction() {
       olMap = Map1.getOpenLayersMap();
       Map1.setCursor("default");
       olMap.controls[2].activate();
       Map1.setMeasureMode(‘Normal’);
       return false;
   }


4

Hi Gordon,



Would you please try the below codes, it works fine for me:


function switchZoomFunction() {
    olMap = Map1.getOpenLayersMap();
    var navigationControl = olMap.getControlsByClass("OpenLayers.Control.Navigation")[0];
    if (navigationControl.zoomBoxEnabled) {
        navigationControl.disableZoomBox();
    }
    else {
        navigationControl.enableZoomBox();
    }
}

More details about navigation control, please refer to dev.openlayers.org/releases/OpenLayers-2.13.1/doc/apidocs/files/OpenLayers/Control/Navigation-js.html



Any questions, please feel free to let us know.

Thanks,

Troy

5

For some reason this doesnt work, it wont draw the zoom box. also it wont zoom in when used

6

Gordon,



Would you please try the attached files by comparing if there is any differences between us? Both the click event and the zoom box switching work fine.

If the issue persists, would you please create a sample for us?



Thanks,

Troy

004_003_002_001_DisplayASimpleMapForMvc.zip (1.13 KB)