From 8e6d77b69352b1dc5bc6174b79810c2ae1af0fb6 Mon Sep 17 00:00:00 2001
From: Bartek Fabiszewski <github@fabiszewski.net>
Date: Mon, 29 Jan 2018 22:17:43 +0100
Subject: [PATCH] Use images for OL buttons

---
 images/extent.svg     |  1 +
 images/layers.svg     |  1 +
 js/api_openlayers3.js | 17 ++++++++++++++---
 3 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 images/extent.svg
 create mode 100644 images/layers.svg

diff --git a/images/extent.svg b/images/extent.svg
new file mode 100644
index 0000000..4af5e20
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/images/layers.svg b/images/layers.svg
new file mode 100644
index 0000000..7f05441
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/js/api_openlayers3.js b/js/api_openlayers3.js
index e2bfbb8..a51dac8 100755
--- a/js/api_openlayers3.js
+++ b/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;
+}