feat: map control buttons

src/Map.js

@@ -1,7 +1,6 @@
 import { Map, AttributionControl, Popup } from 'mapbox-gl'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import { Evented } from 'mapbox-gl'
-// import getControl from './controls'
 import Layer from './layers/Layer'
 import layerTypes from './layers/layerTypes'
 import controlTypes from './controls/controlTypes'

src/controls/FitBounds.js

@@ -1,3 +1,5 @@
+import './FitBounds.css'
+
 const defaultOptions = {}
 
 // https://github.com/mapbox/mapbox-gl-js/blob/master/src/css/mapbox-gl.css
@@ -7,8 +9,6 @@ class FitBoundsControl {
             ...defaultOptions,
             ...options,
         }
-
-        console.log('fit bounds control')
     }
 
     getDefaultPosition() {

src/controls/Measure.css

@@ -0,0 +1,11 @@
+.dhis2-maps-ctrl-measure {
+    width: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-color: #fff;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAGJJREFUOI1jYGBgOM3AwPAfCTMwMDA8QxPDhT8xoAlIM5AG/jMi2QoDjKQYwITEkSFRM9w2qrkA5oqBc8EIDYNHDAzkp0I4QE/fMDF5YvnoBsiTwscWBiQBJgYGhpMU6D8CAJDrOVecOVsbAAAAAElFTkSuQmCC);
+    background-size: 18px 18px;
+    cursor: pointer;
+}

src/controls/Measure.js

@@ -1,13 +1,14 @@
+import './Measure.css'
+
 const defaultOptions = {}
 
+// https://github.com/mapbox/mapbox-gl-js/blob/master/src/css/mapbox-gl.css
 class MeasureControl {
     constructor(options) {
         this.options = {
             ...defaultOptions,
             ...options,
         }
-
-        console.log('measure control')
     }
 
     getDefaultPosition() {
@@ -17,9 +18,13 @@ class MeasureControl {
     onAdd(map) {
         this._map = map
         this._container = document.createElement('div')
-        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-search'
+        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group'
+
+        this._button = document.createElement('div')
+        this._button.className = 'dhis2-maps-ctrl-measure'
+        this._button.type = 'button'
 
-        map.getContainer().appendChild(this._container)
+        this._container.appendChild(this._button)
 
         return this._container
     }

src/controls/Search.css

@@ -1,3 +1,17 @@
+.dhis2-maps-ctrl-search {
+    width: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-color: #fff;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAz1BMVEUAAAAkJCQmJiYmJiYlJSUkJCQAAAAqKiokJCQmJiYzMzMlJSUkJCQmJiYlJSUmJiYoKCgmJiYmJiYnJycmJiYAAAAmJiYmJiYlJSUZGRklJSUmJiYmJiYlJSUlJSUmJiYmJiYtLS0mJiYlJSUmJiYnJyccHBwmJiYmJiYlJSUiIiImJiYmJiYmJiYlJSUkJCQlJSUjIyMuLi4mJiYmJiYlJSUlJSUlJSUAAAAmJiYlJSUoKCglJSUlJSUmJiYmJiYlJSUlJSUlJSUlJSUmJiawjvnZAAAARHRSTlMARfbw3jEDBkb+BatNZMu1GfHGDdQBoPjyCsOfFD2C/LQRaqiTVQmMcFkW4uR961pnOQshyWDgnAKuzDP5uPVW+tp5S3AUDfcAAACGSURBVBgZzcFFAoMwAATARQN1d3d3d9n/v6n0SsKdGYROrW7ZUMlWm+SsD1kkw1ZnPnXHkMTZADAxFwP4JdMCnhU1+CVy+NO4hF+02IbnwzX8YuwKwDLeNiQFHo7nG7+Q5UcmX/eH/oTK5oQLjS3Urjp3Amp7cogAPboO1ESl5CBAOYVQ+QEjbg1iCZEUOgAAAABJRU5ErkJggg==);
+    background-size: 30px 30px;
+    cursor: pointer;
+}
+
+
+/*
 .dhis2-maps-search {
     font: 15px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
     position: relative;
@@ -31,4 +45,6 @@
 .dhis2-maps-search-icon-loading {
     background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwYXRoIGQ9Im0xMCAyIDAgMy4zYzIuNiAwIDQuNyAyLjEgNC43IDQuN2wzLjMgMGMwLTQuNC0zLjYtOC04LTh6IiBmaWxsPSIjMDAwIi8+PHBhdGggZD0iTTEwIDJDNi44IDIgMy43IDQuMSAyLjYgNy4xIDEuNCAxMCAyLjEgMTMuNiA0LjUgMTUuOGMyLjQgMi40IDYuNCAyLjkgOS40IDEuMiAyLjUtMS40IDQuMi00LjIgNC4yLTctMS4xIDAtMi4yIDAtMy4zIDAgMC4xIDIuMi0xLjcgNC4zLTMuOCA0LjZDOC43IDE1IDYuNCAxMy44IDUuNyAxMS43IDQuOCA5LjcgNS42IDcuMSA3LjYgNiA4LjMgNS42IDkuMSA1LjMgMTAgNS4zYzAtMS4xIDAtMi4yIDAtMy4zeiIgc3R5bGU9ImZpbGw6IzAwMDtvcGFjaXR5OjAuMiIvPjwvc3ZnPg==);
     animation: rotate 400ms linear infinite;
-}
+}
+*/
+

src/controls/Search.js

@@ -10,8 +10,6 @@ class SearchControl {
             ...defaultOptions,
             ...options,
         }
-
-        console.log('search control')
     }
 
     getDefaultPosition() {
@@ -20,18 +18,16 @@ class SearchControl {
 
     onAdd(map) {
         this._map = map
-        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 = document.createElement('div')
+        this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group'
 
-        this.container.appendChild(icon)
+        this._button = document.createElement('div')
+        this._button.className = 'dhis2-maps-ctrl-search'
+        this._button.type = 'button'
 
-        // map.getContainer().appendChild(this._container)
+        this._container.appendChild(this._button)
 
-        return this.container
+        return this._container
     }
 
     onRemove() {

src/layers/Spider.js

@@ -1,3 +1,4 @@
+import { Point } from 'mapbox-gl'
 import MapboxglSpiderifier from 'mapboxgl-spiderifier'
 import 'mapboxgl-spiderifier/index.css'
 import { outlineColor, outlineWidth } from '../utils/style'
@@ -71,15 +72,17 @@ const Spider = function(map, options) {
         const { feature, mapboxMarker, param } = leg
         const { angle, legLength } = param
         const length = legLength + options.radius
-        const deltaX = length * Math.cos(angle)
-        const deltaY = length * Math.sin(angle)
-        const { lng, lat } = mapboxMarker.getLngLat()
+        const offset = new Point(
+            length * Math.cos(angle),
+            length * Math.sin(angle)
+        )
+        const point = map.project(mapboxMarker.getLngLat()).add(offset)
+        const { lng, lat } = map.unproject(point)
 
         options.onClick({
             type: 'click',
             coordinates: [lng, lat],
             position: [evt.x, evt.pageY || evt.y],
-            offset: [deltaX, deltaY],
             feature: feature,
         })
     }