feat: map controls

src/Map.css

@@ -2,10 +2,14 @@
     box-shadow: 0 3px 14px rgba(0,0,0,0.4);
 }
 
-#dhis2-map-container .bing-maps-logo {
+.dhis2-maps-bing .mapboxgl-ctrl-bottom-left {
+    left: 60px;
+}
+
+.dhis2-maps-bing-logo {
     position: absolute;
-    bottom: 0;
-    left: 0;
+    bottom: 5px;
+    left: 3px;
 }
 
 #dhis2-map-container .mapboxgl-popup em {

src/Map.js

@@ -1,9 +1,10 @@
 import { Map, AttributionControl, Popup } from 'mapbox-gl'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import { Evented } from 'mapbox-gl'
-import getControl from './controls'
+// import getControl from './controls'
 import Layer from './layers/Layer'
 import layerTypes from './layers/layerTypes'
+import controlTypes from './controls/controlTypes'
 import { getBoundsFromLayers } from './utils/geometry'
 import syncMaps from './utils/sync'
 import './Map.css'
@@ -14,6 +15,11 @@ export class MapGL extends Evented {
         return !!layerTypes[type]
     }
 
+    // Returns true if the control type is supported
+    static hasControlSupport(type) {
+        return !!controlTypes[type]
+    }
+
     constructor(el) {
         super()
 
@@ -102,13 +108,15 @@ export class MapGL extends Evented {
         return !!this._layers.find(l => l === layer)
     }
 
-    addControl(control) {
-        const { type } = control
-        const mapboxControl = getControl(control)
+    addControl(config) {
+        const { type } = config
+
+        if (controlTypes[type]) {
+            const control = new controlTypes[type](config)
+
+            this._mapgl.addControl(control)
 
-        if (mapboxControl) {
-            this._mapgl.addControl(mapboxControl)
-            this._controls[type] = mapboxControl
+            this._controls[type] = control
         }
     }
 

src/controls/FitBounds.js

@@ -0,0 +1,38 @@
+const defaultOptions = {}
+
+// https://github.com/mapbox/mapbox-gl-js/blob/master/src/css/mapbox-gl.css
+class FitBoundsControl {
+    constructor(options) {
+        this.options = {
+            ...defaultOptions,
+            ...options,
+        }
+
+        console.log('fit bounds control')
+    }
+
+    getDefaultPosition() {
+        return 'top-right'
+    }
+
+    onAdd(map) {
+        this._map = map
+        this._container = document.createElement('div')
+        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group'
+
+        this._button = document.createElement('div')
+        this._button.className = 'dhis2-maps-ctrl-fitbounds'
+        this._button.type = 'button'
+
+        this._container.appendChild(this._button)
+
+        return this._container
+    }
+
+    onRemove() {
+        map.getContainer().removeChild(this._container)
+        delete this._map
+    }
+}
+
+export default FitBoundsControl

src/controls/Measure.js

@@ -0,0 +1,33 @@
+const defaultOptions = {}
+
+class MeasureControl {
+    constructor(options) {
+        this.options = {
+            ...defaultOptions,
+            ...options,
+        }
+
+        console.log('measure control')
+    }
+
+    getDefaultPosition() {
+        return 'top-right'
+    }
+
+    onAdd(map) {
+        this._map = map
+        this._container = document.createElement('div')
+        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-search'
+
+        map.getContainer().appendChild(this._container)
+
+        return this._container
+    }
+
+    onRemove() {
+        map.getContainer().removeChild(this._container)
+        delete this._map
+    }
+}
+
+export default MeasureControl

src/controls/Search.css

@@ -0,0 +1,34 @@
+.dhis2-maps-search {
+    font: 15px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    position: relative;
+    background-color: white;
+    width: 33.3333%;
+    min-width: 400px;
+    max-width: 500px;
+    z-index: 1;
+    border-radius: 3px;
+}
+
+.dhis2-maps-search-icon {
+    display: inline-block;
+    width :20px;
+    height: 20px;
+    vertical-align: middle;
+    background-repeat: no-repeat;
+}
+
+.dhis2-maps-search-icon-magnifier {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIj4NCiAgPHBhdGggZD0iTTguNSA0QzYgNCA0IDYgNCA4LjUgNCAxMSA2IDEzIDguNSAxMyA5LjQgMTMgMTAuMiAxMi44IDEwLjggMTIuM0wxMC45IDEyLjMgMTQuMyAxNS43QzE0LjUgMTUuOSAxNC43IDE2IDE1IDE2IDE1LjYgMTYgMTYgMTUuNiAxNiAxNSAxNiAxNC43IDE1LjkgMTQuNSAxNS43IDE0LjNMMTIuMyAxMC45IDEyLjMgMTAuOEMxMi44IDEwLjIgMTMgOS40IDEzIDguNSAxMyA2IDExIDQgOC41IDR6TTguNSA1LjVDMTAuMiA1LjUgMTEuNSA2LjggMTEuNSA4LjUgMTEuNSAxMC4yIDEwLjIgMTEuNSA4LjUgMTEuNSA2LjggMTEuNSA1LjUgMTAuMiA1LjUgOC41IDUuNSA2LjggNi44IDUuNSA4LjUgNS41eiIgZmlsbD0iIzAwMCIvPg0KPC9zdmc+);
+}
+
+.dhis2-maps-search-icon-close {
+    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgdmVyc2lvbj0iMS4xIiBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiPg0KICA8cGF0aCBkPSJtNSA1IDAgMS41IDMuNSAzLjUtMy41IDMuNSAwIDEuNSAxLjUgMCAzLjUtMy41IDMuNSAzLjUgMS41IDAgMC0xLjUtMy41LTMuNSAzLjUtMy41IDAtMS41LTEuNSAwLTMuNSAzLjUtMy41LTMuNS0xLjUgMHoiIGZpbGw9IiMwMDAiLz4NCjwvc3ZnPg==);
+}
+
+.dhis2-maps-search-icon-loading {
+    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwYXRoIGQ9Im0xMCAyIDAgMy4zYzIuNiAwIDQuNyAyLjEgNC43IDQuN2wzLjMgMGMwLTQuNC0zLjYtOC04LTh6IiBmaWxsPSIjMDAwIi8+PHBhdGggZD0iTTEwIDJDNi44IDIgMy43IDQuMSAyLjYgNy4xIDEuNCAxMCAyLjEgMTMuNiA0LjUgMTUuOGMyLjQgMi40IDYuNCAyLjkgOS40IDEuMiAyLjUtMS40IDQuMi00LjIgNC4yLTctMS4xIDAtMi4yIDAtMy4zIDAgMC4xIDIuMi0xLjcgNC4zLTMuOCA0LjZDOC43IDE1IDYuNCAxMy44IDUuNyAxMS43IDQuOCA5LjcgNS42IDcuMSA3LjYgNiA4LjMgNS42IDkuMSA1LjMgMTAgNS4zYzAtMS4xIDAtMi4yIDAtMy4zeiIgc3R5bGU9ImZpbGw6IzAwMDtvcGFjaXR5OjAuMiIvPjwvc3ZnPg==);
+    animation: rotate 400ms linear infinite;
+}

src/controls/Search.js

@@ -1,11 +1,17 @@
+import './Search.css'
+
 const defaultOptions = {}
 
+// Inspired by https://github.com/lemmingapex/mapbox-gl-generic-geocoder
+// https://css-tricks.com/using-svg/
 class SearchControl {
     constructor(options) {
         this.options = {
             ...defaultOptions,
             ...options,
         }
+
+        console.log('search control')
     }
 
     getDefaultPosition() {
@@ -14,17 +20,24 @@ class SearchControl {
 
     onAdd(map) {
         this._map = map
-        this._container = document.createElement('div')
-        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-search'
+        this.container = document.createElement('div')
+        this.container.className = 'mapboxgl-ctrl dhis2-maps-search'
+
+        const icon = document.createElement('span')
+        icon.className =
+            'dhis2-maps-search-icon dhis2-maps-search-icon-magnifier'
+
+        this.container.appendChild(icon)
 
-        map.getContainer().appendChild(this._container)
+        // map.getContainer().appendChild(this._container)
 
-        return this._container
+        return this.container
     }
 
     onRemove() {
-        map.getContainer().removeChild(this._container)
+        this.container.parentNode.removeChild(this.container)
         delete this._map
+        return this
     }
 }
 

src/controls/controlTypes.js

@@ -0,0 +1,12 @@
+import { NavigationControl, ScaleControl } from 'mapbox-gl'
+import Search from './Search'
+import Measure from './Measure'
+import FitBounds from './FitBounds'
+
+export default {
+    zoom: NavigationControl,
+    scale: ScaleControl,
+    search: Search,
+    measure: Measure,
+    fitBounds: FitBounds,
+}

src/layers/BingLayer.js

@@ -55,7 +55,10 @@ class BingLayer extends Layer {
         mapgl.off('moveend', this.updateAttribution)
 
         if (this._brandLogoImg) {
-            mapgl.getContainer().removeChild(this._brandLogoImg)
+            const container = mapgl.getContainer()
+
+            container.removeChild(this._brandLogoImg)
+            container.classList.remove('dhis2-maps-bing')
         }
     }
 
@@ -95,9 +98,10 @@ class BingLayer extends Layer {
         const img = document.createElement('img')
 
         img.src = this._brandLogoUri
-        img.className = 'bing-maps-logo'
+        img.className = 'dhis2-maps-bing-logo'
 
         container.appendChild(img)
+        container.classList.add('dhis2-maps-bing')
 
         this._brandLogoImg = img
     }