ThinkGeo.com    |     Documentation    |     Premium Support

Zoom in using button to selected area

#1

Hi,





There is an inbuilt functionality in thinkgeo like if we hold shift key and using mouse we can zoom into specific area. Is it possible to do this type of functionality using button? i.e. Suppose I clicked on button and using mouse I select one area using square(same as using hold shift key and mouse)

and after I leave mouse so zoom to that specific area.

#2

Hi Vivek, 
  
 Our MVC edition is based on OpenLayers, so I did a quickly research and found set alwaysZoom by JavaScript maybe helpful for your requirement. 
  
 dev.openlayers.org/apidocs/files/OpenLayers/Control/ZoomBox-js.html#OpenLayers.Control.ZoomBox.alwaysZoom 
  
 Do you think that will works for your scenario? 
  
 Regards, 
  
 Don 


#3

Thanks Don 
  
 Can you please give me some demo code related to this?

#4

Hi Vivek, 
  
 I find a sample about it and make it works for our map control. 
  
 Please see the code as below and modify it to let it works for your project. 
  
  
  var OnMapCreated = function (map) {
        var olmap = map.getOpenLayersMap();
        olmap.controls[1].deactivate();       // control id: Navigation 

        OpenLayers.Control.CustomNavToolbar = OpenLayers.Class(OpenLayers.Control.Panel, {
            initialize: function (options) {
                OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
                this.addControls([
                   new OpenLayers.Control.Navigation(),
                   new OpenLayers.Control.ZoomBox({ alwaysZoom: true })
                 ]);
                this.displayClass = ‘olControlNavToolbar’
            },

            draw: function () {
                var div = OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);
                this.defaultControl = this.controls[0];
                return div;
            }
        });

        var panel = new OpenLayers.Control.CustomNavToolbar();        
        olmap.addControl(panel);
        panel.activate();
    }
 
  
 Please notice it looks the switch zoom mode button don’t show correct in my test code but you still can click it, its position is under the pan button. You can view the online sample to make sure its position: openlayers.org/dev/examples/navtoolbar-alwaysZoom.html 
  
 Regards, 
  
 Don

#5

Thanks Don for the sample 



I guess it works for me, but I am little bit confuse about this code to where I can apply the code, because as I have one button and I need to apply this code in that button’s click event. 



My button code is like below: 



input id=“btnZoomIn” title=“Zoom In” type=“Image” src=“zoom_in.png” style="height: 25px; width: 25px;"



so Can you please help me on this?

#6

Hi Vivek, 
  
 Please see whether this code works for you. 
  
  

 var olmap;
    var OnMapCreated = function (map) {
        olmap = map.getOpenLayersMap();
    }

    function switchZoomFunction() {        
        olmap.controls[1].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;
    }



input id="btnZoomIn" title="Zoom In" type="button" style="height: 25px; width: 25px;" 
            onclick="javascript:switchZoomFunction();"

 
  
 Regards, 
  
 Don

#7

Thank you very much Don 



It’s Work great 



Is it possible for zoom out as same way?



and can you please tell me how to deactivate this as because I only use this functionality in ZoomIn button If I clicked on other buttons then how to disable this functionality?



Thanks in Advance

#8

Hi Vivek,  
  
 I think zoom out won’t works like zoom in, zoom in works because it’s supported by OpenLayers. 
  
 If you want to deactive it, you should want to find it’s index first by debug in JavaScript, then call: 
  
 zoomBox.deactivate(); 
 olmap.controls[1].activate();   // This control support common zoom function 
  
 Regards, 
  
 Don

#9

Thanks Don for Help Thank You very much

#10

Hi Vivek, 
  
 Any more questions, please feel free to let us know. 
 Thanks, 
 Troy