Use images for OL buttons

images/extent.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M24 0v10.999l-3.379-3.378-4.379 4.379-4.242-4.242 4.379-4.379-3.379-3.379h11zm-11.875 16.138l-4.242-4.242-4.504 4.483-3.379-3.378v10.999h11l-3.379-3.379 4.504-4.483z"/></svg>

images/layers.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff"  d="M21.698 10.658l2.302 1.342-12.002 7-11.998-7 2.301-1.342 9.697 5.658 9.7-5.658zm-9.7 10.657l-9.697-5.658-2.301 1.343 11.998 7 12.002-7-2.302-1.342-9.7 5.657zm0-19l8.032 4.685-8.032 4.685-8.029-4.685 8.029-4.685zm0-2.315l-11.998 7 11.998 7 12.002-7-12.002-7z"/></svg>

js/api_openlayers3.js

@@ -32,7 +32,7 @@ function init() {
     new ol.control.Zoom(),
     new ol.control.Rotate(),
     new ol.control.ScaleLine(),
-    new ol.control.ZoomToExtent(),
+    new ol.control.ZoomToExtent({ label: getExtentImg() }),
   ];
 
   var view = new ol.View({
@@ -252,7 +252,10 @@ function init() {
   };
 
   var switcherButton = document.createElement('button');
-  switcherButton.innerHTML = 'L';
+  var layerImg = document.createElement('img');
+  layerImg.src = 'images/layers.svg';
+  layerImg.style.width = '60%';
+  switcherButton.appendChild(layerImg);
 
   var switcherHandle = function() {
     var el = document.getElementById('switcher');
@@ -332,7 +335,8 @@ function displayTrack(xml, update) {
   }
 
   var zoomToExtentControl = new ol.control.ZoomToExtent({
-    extent: extent
+    extent: extent,
+    label: getExtentImg()
   });
   map.addControl(zoomToExtentControl);
 
@@ -413,3 +417,10 @@ function zoomToBounds(b) {
 function updateSize() {
   map.updateSize();
 }
+
+function getExtentImg() {
+  var extentImg = document.createElement('img');
+  extentImg.src = 'images/extent.svg';
+  extentImg.style.width = '60%';
+  return extentImg;
+}