ol.control.Button without jQuery by ThomasG77

index.html

<!DOCTYPE html>
<html>
<head>
<!----------------------------------------------------------

  Copyright (c) 2015 Jean-Marc VIGLINO,
  released under CeCILL-B (french BSD like) licence: //www.cecill.info/

------------------------------------------------------------>
  <title>ol-ext: Control button</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="description" content="ol.control.Button is a simple control with a button." />
  <meta name="keywords" content="ol3, control, button" />

  <link rel="stylesheet" href="//viglino.github.io/ol-ext/examples/style.css" />

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <!-- FontAwesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Openlayers -->
    <link rel="stylesheet" href="https://openlayers.org/en/master/css/ol.css" />
  <script type="text/javascript" src="https://openlayers.org/en/master/build/ol.js"></script>

  <!-- ol-ext -->
    <link rel="stylesheet" href="//viglino.github.io/ol-ext/dist/ol-ext.css" />
  <script type="text/javascript" src="//viglino.github.io/ol-ext/dist/ol-ext.js"></script>

  <style>
    .ol-button i
    { color: inherit;
    }
    .hello
    { right: 50%;
      top: 0.5em;
    }
    .save
    { left: 50%;
      top: 0.5em;
    }
    .text
    { left: 50%;
      top: 2.5em;
    }
  </style>

</head>
<body >
  <a href="https://github.com/Viglino/ol3-ext"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>

  <a href="../../index.html">
    <h1>ol-ext: control bar</h1>
  </a>
  <div class="info">
    <i>ol.control.Button</i> is a simple push button control.
    <ul>
      <li>
        <i>handleClick</i> options set a function to handle an action when the button is clicked.
      </li>
      <li>
        use <i>className</i> to customize 
      </li>
    </ul>
  </div>

  <!-- Map div -->
  <div id="map" style="width:600px; height:400px;"></div>

  <div class="options" >
    Info:<br/>
    <textarea id="info" style="width:28em; height:10em"></textarea>
  </div>

  <script type="text/javascript">

/*  Copyright (c) 2016 Jean-Marc VIGLINO,
  released under the CeCILL-B license (French BSD license)
  (//www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).
*/
/** A simple push button control
* @constructor
* @extends {ol.control.Control}
* @param {Object=} options Control options.
* @param {String} options.className class of the control
* @param {String} options.title title of the control
* @param {String} options.html html to insert in the control
* @param {function} options.handleClick callback when control is clicked (or use change:active event)
*/
ol.control.Button = function(options) {
  options = options || {};
  var element = document.createElement('div');
  element.className = (options.className || '') + ' ol-button ol-unselectable ol-control';

  var self = this;
  var bt = document.createElement('button');
  bt.type = 'button';
  bt.title = options.title;
  bt.innerHTML = options.html || "";
  bt.addEventListener("click", function(e) {
    if (e && e.preventDefault) {
      e.preventDefault();
      e.stopPropagation();
    }
    if (options.handleClick) {
      options.handleClick.call(self, e);
    };
  });
  element.appendChild(bt);

  if (!options.title) {
    bt.title = bt.firstElementChild.title;
  };
  ol.control.Control.call(this, {
    element: element,
    target: options.target
  });
  if (options.title) {
    this.set("title", options.title);
  }
};

ol.inherits(ol.control.Button, ol.control.Control);

    // The map
    var map = new ol.Map({
      target: 'map',
      view: new ol.View({
        zoom: 14,
        center: [270701, 6247637]
      }),
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
      ]
    });

    console.log("ok")
    // Add a custom push button with onToggle function
    var hello = new ol.control.Button({
      html: '<i class="fa fa-smile-o"></i>',
      className: "hello",
      title: "Hello world!",
      handleClick: function() {
        info("hello World!");
      }
    });
    map.addControl(hello);

    // Add a save button with on active event
    var save = new ol.control.Button({
      html: '<i class="fa fa-download"></i>',
      className: "save",
      title: "Save",
      handleClick: function() {
        info("Center: " + map.getView().getCenter() + " - zoom: " + map.getView().getZoom());
      }
    });
    map.addControl(save);

    // Show info
    function info(i){
      document.querySelector("#info").innerHTML = i || "";
    }

  </script>
</body>
</html>