I have this map with two controls

<!DOCTYPE html>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.17.1/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>
    <div id="map" class="map"></div>
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2

I want to select + or -, and when it is selected, I want to zoom in or zoom out when I click on my map.

How can I do this?


1 Answer 1


first you'll have to create your html elements ( buttons, radio, ... ) where you want to put + and -, here is an example using buttons :

<button id="zoom-out">-</button>
<button id="zoom-in">+</button>

then you add a control on each one:

var zoomType;
document.getElementById('zoom-out').onclick = function() {
document.getElementById('zoom-in').onclick = function() {

Now you'll have to listen to the click event on the map :

map.on('click', function(evt) {
         var view = map.getView();
         var zoom = view.getZoom();
         view.setZoom(zoom - 1);
         var view = map.getView();
         var zoom = view.getZoom();
         view.setZoom(zoom + 1);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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