# Bind the Shift Click To A Button

**URL:** <https://community.thinkgeo.com/t/bind-the-shift-click-to-a-button/4233>\
**Category:** MVC\
**Created:** [September 26, 2014, 1:33pm UTC](https://community.thinkgeo.com/t/bind-the-shift-click-to-a-button/4233 "2014-09-26T13:33:08Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gordon1](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/g/db5fbb/32.png) [@Gordon1](https://community.thinkgeo.com/u/Gordon1)\
**Post date:** [September 26, 2014, 1:33pm UTC](https://community.thinkgeo.com/t/bind-the-shift-click-to-a-button/4233/1 "2014-09-26T13:33:08Z")

</div>

I&nbsp;was&nbsp;wondering&nbsp;if&nbsp;there&nbsp;was&nbsp;a&nbsp;way&nbsp;to&nbsp;bind&nbsp;the&nbsp;shift&nbsp;key&nbsp;to&nbsp;an&nbsp;icon&nbsp;on&nbsp;the&nbsp;screen,&nbsp;so&nbsp;you&nbsp;dont&nbsp;have&nbsp;to&nbsp;hold&nbsp;down&nbsp;the&nbsp;shift&nbsp;key&nbsp;to&nbsp;area&nbsp;zoom&nbsp;to&nbsp;teh&nbsp;map?&nbsp;so&nbsp;when&nbsp;the&nbsp;user&nbsp;clicks&nbsp;on&nbsp;the&nbsp;icon&nbsp;it&nbsp;acts&nbsp;as&nbsp;if&nbsp;the&nbsp;user&nbsp;is&nbsp;holding&nbsp;the&nbsp;shift&nbsp;key&nbsp;down&nbsp;and&nbsp;can&nbsp;highlight&nbsp;an&nbsp;area&nbsp;to&nbsp;zoom&nbsp;into.&nbsp;i&nbsp;found&nbsp;another&nbsp;example&nbsp;but&nbsp;when&nbsp;i&nbsp;try&nbsp;and&nbsp;click&nbsp;on&nbsp;other&nbsp;buttons&nbsp;the&nbsp;zoom&nbsp;box&nbsp;keeps&nbsp;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]`  
> &nbsp;  
> `               ``var zoomBox = new OpenLayers.Control.ZoomBox({ alwaysZoom: false });`  
> `               ``olmap.addControl(zoomBox);`  
> `               ``zoomBox.activate();`  
> `               ``isactive = true;`  
> `           ``}`  
> `           ``else {`  
> `              `&nbsp;  
> `               ``isactive = false;`  
> &nbsp;  
> `           ``}`  
> `       ``}`

---

<div class="post-metadata">

**Author:** ![Ethan](https://community.thinkgeo.com/user_avatar/community.thinkgeo.com/ethan/32/19964_2.png) [@Ethan](https://community.thinkgeo.com/u/Ethan)\
**Post date:** [September 28, 2014, 1:31am UTC](https://community.thinkgeo.com/t/bind-the-shift-click-to-a-button/4233/2 "2014-09-28T01:31:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Gordon1](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/g/db5fbb/32.png) [@Gordon1](https://community.thinkgeo.com/u/Gordon1)\
**Post date:** [November 10, 2014, 12:02pm UTC](https://community.thinkgeo.com/t/bind-the-shift-click-to-a-button/4233/3 "2014-11-10T12:02:58Z")

</div>

I&nbsp;got&nbsp;the&nbsp;Zoom&nbsp;to&nbsp;work&nbsp;using&nbsp;this&nbsp;code&nbsp;

> `function switchZoomFunction() {`  
> `      `&nbsp;  
> `       ``olMap = Map1.getOpenLayersMap();`  
> `      `&nbsp;  
> `       ``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 {`  
> `           `&nbsp;  
> `           ``olMap.removeControl(olMap.controls[10]);`  
> `           ``//zoomBox.deactivate();`  
> `           ``olMap.controls[2].activate(); // This control support common zoom function `  
> `           ``return true;`  
> `       ``}`  
> `       `&nbsp;  
> `   ``}`

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

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

---

<div class="post-metadata">

**Author:** ![Troy](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/t/85f322/32.png) [@Troy](https://community.thinkgeo.com/u/Troy)\
**Post date:** [November 11, 2014, 1:06am UTC](https://community.thinkgeo.com/t/bind-the-shift-click-to-a-button/4233/4 "2014-11-11T01:06:30Z")

</div>

Hi&nbsp;Gordon,  
  
  
  
Would&nbsp;you&nbsp;please&nbsp;try&nbsp;the&nbsp;below&nbsp;codes,&nbsp;it&nbsp;works&nbsp;fine&nbsp;for&nbsp;me:

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

  
More&nbsp;details&nbsp;about&nbsp;navigation&nbsp;control,&nbsp;please&nbsp;refer&nbsp;to&nbsp;dev.openlayers.org/releases/OpenLayers-2.13.1/doc/apidocs/files/OpenLayers/Control/Navigation-js.html  
  
  
  
Any&nbsp;questions,&nbsp;please&nbsp;feel&nbsp;free&nbsp;to&nbsp;let&nbsp;us&nbsp;know.  
  
Thanks,  
  
Troy

---

<div class="post-metadata">

**Author:** ![Gordon1](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/g/db5fbb/32.png) [@Gordon1](https://community.thinkgeo.com/u/Gordon1)\
**Post date:** [November 11, 2014, 11:11am UTC](https://community.thinkgeo.com/t/bind-the-shift-click-to-a-button/4233/5 "2014-11-11T11:11:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Troy](https://community.thinkgeo.com/letter_avatar_proxy/v4/letter/t/85f322/32.png) [@Troy](https://community.thinkgeo.com/u/Troy)\
**Post date:** [November 12, 2014, 2:50am UTC](https://community.thinkgeo.com/t/bind-the-shift-click-to-a-button/4233/6 "2014-11-12T02:50:07Z")

</div>

Gordon,  
  
  
  
Would&nbsp;you&nbsp;please&nbsp;try&nbsp;the&nbsp;attached&nbsp;files&nbsp;by&nbsp;comparing&nbsp;if&nbsp;there&nbsp;is&nbsp;any&nbsp;differences&nbsp;between&nbsp;us?&nbsp;Both&nbsp;the&nbsp;click&nbsp;event&nbsp;and&nbsp;the&nbsp;zoom&nbsp;box&nbsp;switching&nbsp;work&nbsp;fine.  
  
If&nbsp;the&nbsp;issue&nbsp;persists,&nbsp;would&nbsp;you&nbsp;please&nbsp;create&nbsp;a&nbsp;sample&nbsp;for&nbsp;us?  
  
  
  
Thanks,  
  
Troy  
  
[004\_003\_002\_001\_DisplayASimpleMapForMvc.zip](https://community.thinkgeo.com/uploads/default/original/2X/0/0c47ce750666c2868b32c8942e419eeb4ccd299c.zip) (1.13 KB)