Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Hi (I'm i bit new to OpenLayers).

I'm trying to set up my OpenLayers map controls (e.g ZoomIn, ZoomOut) when images elsewhere on the page are clicked. Is this an issue of formatting a control panel to display the buttons as my images (if so how should I set up the CSS to use the images), or would I be better to set up a listener ogn the image, that then runs the method ZoomIn on the when clicked (and If so what sort of code do I need)?

share|improve this question
Either way would do. It actually depends on what you want to do and what images you wish to use. – Devdatta Tengshe May 1 '13 at 15:58
@DevdattaTengshe I want to make clicking on one photo zoom in, and clicking on another zoom out. They are quite large photos, does that make listening for an event and running a method most appropriate? – whatahitson May 1 '13 at 16:23
up vote 0 down vote accepted

In your comment you say

I want to make clicking on one photo zoom in, and clicking on another zoom out.

If this is the case, then your best option would be to listen to the onclick event using javascript and then call the appropriate OpenLayers functions for Zooming In and out of the map.

I have done something similar using the following code:


<div id='ZoomIn'><img class="ToolBtn" src="zin.png"title="Zoom In" onclick="ZoomIn();" ></div>
<div id='ZoomOut'><img class="ToolBtn" src="zout.png" title="Zoom Out" onclick="ZoomOut();" ></div>

In JavaScript:

function ZoomIn()
function ZoomOut()
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.