ThomasG77/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<!----------------------------------------------------------

  Copyright (c) 2015 Jean-Marc VIGLINO,
  released under CeCILL-B (french BSD like) licence: http://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="http://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="http://viglino.github.io/ol-ext/dist/ol-ext.css" />
  <script type="text/javascript" src="http://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)
  (http://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>
	<!DOCTYPE html>
	<html>
	<head>
	<!----------------------------------------------------------

	Copyright (c) 2015 Jean-Marc VIGLINO,
	released under CeCILL-B (french BSD like) licence: http://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="http://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="http://viglino.github.io/ol-ext/dist/ol-ext.css" />
	<script type="text/javascript" src="http://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)
	(http://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>