From 4ef6ecb7ebade9f61163f03fbdb9efc247829d2a Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 18 Feb 2020 18:50:30 +0000
Subject: [PATCH] Moved from magnify icon to 'zoom:' label. Also increased
 contrast on compass arrow.

---
 src/components/map/OpenLayersMap.jsx | 13 +------------
 src/libs/zoomcontrol.js              | 11 +----------
 src/mapboxgl.css                     |  5 +++--
 3 files changed, 5 insertions(+), 24 deletions(-)

diff --git a/src/components/map/OpenLayersMap.jsx b/src/components/map/OpenLayersMap.jsx
index 981584e..d0a056e 100644
--- a/src/components/map/OpenLayersMap.jsx
+++ b/src/components/map/OpenLayersMap.jsx
@@ -11,7 +11,6 @@ import {Map, View, Proj, Overlay} from 'ol';
 
 import {toLonLat} from 'ol/proj';
 import {toStringHDMS} from 'ol/coordinate';
-import {mdiMagnify} from '@mdi/js';
 
 
 function renderCoords (coords) {
@@ -159,17 +158,7 @@ export default class OpenLayersMap extends React.Component {
         />
       </div>
       <div className="maputnik-ol-zoom">
-        <svg
-          style={{
-            width: "14px",
-            height: "14px",
-            verticalAlign: "middle",
-          }}
-          viewBox="0 0 24 24"
-        >
-          <title>Zoom level</title>
-          <path fill="currentColor" d={mdiMagnify} />
-        </svg> {this.state.zoom}
+        Zoom: {this.state.zoom}
       </div>
       {this.props.debugToolbox &&
         <div className="maputnik-ol-debug">
diff --git a/src/libs/zoomcontrol.js b/src/libs/zoomcontrol.js
index 6ab7711..d032cca 100644
--- a/src/libs/zoomcontrol.js
+++ b/src/libs/zoomcontrol.js
@@ -1,19 +1,10 @@
-import {mdiMagnify} from '@mdi/js';
-
-
 export default class ZoomControl {
   onAdd(map) {
     this._map = map;
     this._container = document.createElement('div');
     this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group mapboxgl-ctrl-zoom';
     this._container.innerHTML = `
-      <svg
-        style="width: 14px; height: 14px; vertical-align: middle;"
-        viewBox="0 0 24 24"
-      >
-        <title>Zoom level</title>
-        <path fill="currentColor" d="${mdiMagnify}" />
-      </svg> <span></span>
+      Zoom: <span></span>
     `;
     this._textEl = this._container.querySelector("span");
     
diff --git a/src/mapboxgl.css b/src/mapboxgl.css
index 4de354a..2a03781 100644
--- a/src/mapboxgl.css
+++ b/src/mapboxgl.css
@@ -76,8 +76,9 @@
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23a4a4a4%3B%27%20d%3D%27m%207%2C9%20c%20-0.554%2C0%20-1%2C0.446%20-1%2C1%200%2C0.554%200.446%2C1%201%2C1%20l%206%2C0%20c%200.554%2C0%201%2C-0.446%201%2C-1%200%2C-0.554%20-0.446%2C-1%20-1%2C-1%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A")
 }
 
-.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%0A%09%3Cpolygon%20fill%3D%27%23a4a4a4%27%20points%3D%276%2C9%2010%2C1%2014%2C9%27%2F%3E%0A%09%3Cpolygon%20fill%3D%27%23a4a4a4%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E")
+.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%0A%09%3Cpolygon%20fill%3D%27%23a4a4a4%27%20points%3D%276%2C9%2010%2C1%2014%2C9%27%2F%3E%0A%09%3Cpolygon%20fill%3D%27%23545454%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E");
+    background-size: 18px;
 }
 
 .mapboxgl-ctrl-inspect {