Revert "BREAKING CHANGE: switch from Mapbox GL JS to MapLibre GL JS (…

…DHIS2-11406) (#367)" (#373)

This reverts commit ac61ce8.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dhis2/maps-gl",
   "version": "1.8.6",
-  "description": "A WebGL rendering engine for DHIS2 maps based on MapLibre GL JS.",
+  "description": "A WebGL rendering engine for DHIS2 maps based on Mapbox GL JS.",
   "publishConfig": {
     "access": "public"
   },
@@ -27,7 +27,8 @@
     "@turf/length": "^6.3.0",
     "fetch-jsonp": "^1.1.3",
     "lodash.throttle": "^4.1.1",
-    "maplibre-gl": "^1.15.0",
+    "mapbox-gl": "^1.13.1",
+    "mapboxgl-spiderifier": "^1.0.9",
     "polylabel": "^1.1.0",
     "suggestions": "^1.7.1",
     "uuid": "^8.3.2"

src/Map.css

@@ -3,7 +3,7 @@
     -webkit-tap-highlight-color: transparent;
 }
 
-.dhis2-map-split-view .maplibregl-ctrl-group {
+.dhis2-map-split-view .mapboxgl-ctrl-group {
     position: absolute;
     top: 10px;
     right: 10px;
@@ -13,15 +13,15 @@
     z-index: 20;
 }
 
-.maplibregl-popup-close-button:focus {
+.mapboxgl-popup-close-button:focus {
     outline: none;
 }
 
-.dhis2-map-popup .maplibregl-popup-content {
+.dhis2-map-popup .mapboxgl-popup-content {
     box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
 }
 
-.dhis2-map-popup .maplibregl-popup-content em {
+.dhis2-map-popup .mapboxgl-popup-content em {
     font-style: normal;
     font-weight: bold;
 }
@@ -39,14 +39,14 @@
     padding-right: 5px;
 }
 
-.maplibregl-popup-close-button:focus {
+.mapboxgl-popup-close-button:focus {
     outline: none;
 }
 
-.maplibregl-ctrl-attrib.maplibregl-compact {
+.mapboxgl-ctrl-attrib.mapboxgl-compact {
     min-height: 24px;
 }
 
-.maplibregl-ctrl-attrib-button:focus {
+.mapboxgl-ctrl-attrib-button:focus {
     box-shadow: none;
 }

src/Map.js

@@ -1,5 +1,5 @@
-import { Evented, Map } from 'maplibre-gl'
-import 'maplibre-gl/dist/maplibre-gl.css'
+import { Evented, Map } from 'mapbox-gl'
+import 'mapbox-gl/dist/mapbox-gl.css'
 import Layer from './layers/Layer'
 import layerTypes from './layers/layerTypes'
 import controlTypes from './controls/controlTypes'

src/__tests__/Map.spec.js

@@ -1,6 +1,6 @@
 import Map from '../Map'
 
-jest.mock('maplibre-gl', () => ({
+jest.mock('mapbox-gl', () => ({
     Map: () => mockMapGL,
     Evented: () => {},
     Marker: () => {},

src/controls/Controls.css

@@ -1,63 +1,63 @@
-.dhis2-map .maplibregl-ctrl-scale {
+.dhis2-map .mapboxgl-ctrl-scale {
     margin-bottom: 5px;
 }
 
-.dhis2-map .maplibregl-ctrl-attrib.maplibregl-compact {
+.dhis2-map .mapboxgl-ctrl-attrib.mapboxgl-compact {
     margin-bottom: 3px;
     margin-right: 3px;
 }
 
-.dhis2-map-split-view .maplibregl-ctrl-group {
+.dhis2-map-split-view .mapboxgl-ctrl-group {
     box-shadow: none;
 }
 
-.dhis2-map-split-view .maplibregl-ctrl-zoom-in,
-.dhis2-map-split-view .maplibregl-ctrl-zoom-out,
-.dhis2-map-split-view .maplibregl-ctrl-compass,
-.dhis2-map-split-view .maplibregl-ctrl-fullscreen,
-.dhis2-map-split-view .maplibregl-ctrl-shrink {
+.dhis2-map-split-view .mapboxgl-ctrl-zoom-in,
+.dhis2-map-split-view .mapboxgl-ctrl-zoom-out,
+.dhis2-map-split-view .mapboxgl-ctrl-compass,
+.dhis2-map-split-view .mapboxgl-ctrl-fullscreen,
+.dhis2-map-split-view .mapboxgl-ctrl-shrink {
     position: absolute;
     right: 0;
     background: #fff;
     box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
 
-.dhis2-map-split-view .maplibregl-ctrl-zoom-in:not(:disabled):hover,
-.dhis2-map-split-view .maplibregl-ctrl-zoom-out:not(:disabled):hover,
-.dhis2-map-split-view .maplibregl-ctrl-compass:not(:disabled):hover,
-.dhis2-map-split-view .maplibregl-ctrl-fullscreen:not(:disabled):hover,
-.dhis2-map-split-view .maplibregl-ctrl-shrink:not(:disabled):hover {
+.dhis2-map-split-view .mapboxgl-ctrl-zoom-in:not(:disabled):hover,
+.dhis2-map-split-view .mapboxgl-ctrl-zoom-out:not(:disabled):hover,
+.dhis2-map-split-view .mapboxgl-ctrl-compass:not(:disabled):hover,
+.dhis2-map-split-view .mapboxgl-ctrl-fullscreen:not(:disabled):hover,
+.dhis2-map-split-view .mapboxgl-ctrl-shrink:not(:disabled):hover {
     background-color: #f3f3f3;
 }
 
-.dhis2-map-split-view .maplibregl-ctrl-zoom-in {
+.dhis2-map-split-view .mapboxgl-ctrl-zoom-in {
     top: 0;
     background: #fff;
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
     z-index: 1002;
 }
 
-.dhis2-map-split-view .maplibregl-ctrl-zoom-out {
+.dhis2-map-split-view .mapboxgl-ctrl-zoom-out {
     top: 29px;
     z-index: 1001;
 }
 
-.dhis2-map-split-view .maplibregl-ctrl-compass {
+.dhis2-map-split-view .mapboxgl-ctrl-compass {
     top: 58px;
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
     z-index: 1000;
 }
 
-.dhis2-map-split-view .maplibregl-ctrl-fullscreen,
-.dhis2-map-split-view .maplibregl-ctrl-shrink {
+.dhis2-map-split-view .mapboxgl-ctrl-fullscreen,
+.dhis2-map-split-view .mapboxgl-ctrl-shrink {
     top: 98px;
     border-radius: 3px;
 }
 
-.dhis2-map-plugin .dhis2-map-split-view .maplibregl-ctrl-fullscreen,
-.dhis2-map-plugin .dhis2-map-split-view .maplibregl-ctrl-shrink {
+.dhis2-map-plugin .dhis2-map-split-view .mapboxgl-ctrl-fullscreen,
+.dhis2-map-plugin .dhis2-map-split-view .mapboxgl-ctrl-shrink {
     top: 69px;
 }
 
@@ -74,28 +74,28 @@
     right: 10px;
 }
 
-.dhis2-map-split-view .maplibregl-ctrl-attrib {
+.dhis2-map-split-view .mapboxgl-ctrl-attrib {
     position: absolute;
     right: 1px;
     bottom: 1px;
     font-size: 12px;
     margin: 0;
 }
 
-.dhis2-map-split-view .maplibregl-ctrl-attrib.maplibregl-compact:hover {
+.dhis2-map-split-view .mapboxgl-ctrl-attrib.mapboxgl-compact:hover {
     height: 24px;
     padding-top: 4px;
 }
 
 .dhis2-map-split-view
-    .maplibregl-ctrl-attrib.maplibregl-compact:hover
-    .maplibregl-ctrl-attrib-inner {
+    .mapboxgl-ctrl-attrib.mapboxgl-compact:hover
+    .mapboxgl-ctrl-attrib-inner {
     position: relative;
     right: 0;
     padding: 2px 8px;
 }
 
-.dhis2-map-split-view .maplibregl-ctrl-attrib.maplibregl-compact:after {
+.dhis2-map-split-view .mapboxgl-ctrl-attrib.mapboxgl-compact:after {
     right: 0;
     bottom: 0;
 }
@@ -104,22 +104,22 @@
     display: none;
 }
 
-.dhis2-map-download .maplibregl-ctrl-zoom-in,
-.dhis2-map-download .maplibregl-ctrl-zoom-out,
-.dhis2-map-download .maplibregl-ctrl-compass,
-.dhis2-map-download .maplibregl-ctrl-fullscreen {
+.dhis2-map-download .mapboxgl-ctrl-zoom-in,
+.dhis2-map-download .mapboxgl-ctrl-zoom-out,
+.dhis2-map-download .mapboxgl-ctrl-compass,
+.dhis2-map-download .mapboxgl-ctrl-fullscreen {
     display: none;
 }
 
-.dhis2-map-download .maplibregl-ctrl-attrib {
+.dhis2-map-download .mapboxgl-ctrl-attrib {
     white-space: nowrap;
 }
 
-.dhis2-map-plugin .maplibregl-ctrl-compass {
+.dhis2-map-plugin .mapboxgl-ctrl-compass {
     display: none;
 }
 
-.dhis2-map-plugin .maplibregl-ctrl-zoom-out {
+.dhis2-map-plugin .mapboxgl-ctrl-zoom-out {
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
 }

src/controls/FitBounds.js

@@ -22,7 +22,7 @@ class FitBoundsControl {
         const label = mapgl._getUIString('FitBoundsControl.ZoomToContent')
         const container = document.createElement('div')
 
-        container.className = 'maplibregl-ctrl maplibregl-ctrl-group'
+        container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group'
 
         const button = document.createElement('div')
 

src/controls/Fullscreen.js

@@ -1,4 +1,4 @@
-import { FullscreenControl } from 'maplibre-gl'
+import { FullscreenControl } from 'mapbox-gl'
 
 // Extended to include map name and legend in fullscreen for dashboard maps
 class Fullscreen extends FullscreenControl {

src/controls/Measure.js

@@ -27,7 +27,7 @@ class MeasureControl {
     onAdd() {
         this._container = createElement(
             'div',
-            'maplibregl-ctrl maplibregl-ctrl-group'
+            'mapboxgl-ctrl mapboxgl-ctrl-group'
         )
         this._setupUI()
 
@@ -47,7 +47,7 @@ class MeasureControl {
 
         this._button = createElement(
             'button',
-            'maplibregl-ctrl-icon dhis2-map-ctrl-measure',
+            'mapboxgl-ctrl-icon dhis2-map-ctrl-measure',
             '',
             this._container
         )

src/controls/Navigation.js

@@ -1,14 +1,14 @@
-import { NavigationControl } from 'maplibre-gl'
+import { NavigationControl } from 'mapbox-gl'
 
 const defaultOptions = {
-    visualizePitch: true,
+    visualizePitch: true
 }
 
-// Extended to reset pitch
+// Extended to reset pitch 
 class Navigation extends NavigationControl {
     constructor(options = {}) {
-        super({ ...defaultOptions, ...options })
+        super({...defaultOptions, ...options})
     }
 }
 
-export default Navigation
+export default  Navigation

src/controls/Search.css

@@ -83,8 +83,8 @@
     font-size: 12px;
 }
 
-.maplibregl-ctrl-bottom-left .dhis2-map-ctrl-search ul,
-.maplibregl-ctrl-bottom-right .dhis2-map-ctrl-search ul {
+.mapboxgl-ctrl-bottom-left .dhis2-map-ctrl-search ul,
+.mapboxgl-ctrl-bottom-right .dhis2-map-ctrl-search ul {
     top: auto;
     bottom: 100%;
 }

src/controls/Search.js

@@ -1,4 +1,4 @@
-import { Popup } from 'maplibre-gl'
+import { Popup } from 'mapbox-gl'
 import Typeahead from 'suggestions'
 import './Search.css'
 
@@ -49,7 +49,7 @@ class SearchControl {
         const label = map._getUIString('SearchControl.SearchForPlace')
 
         const el = (this._container = document.createElement('div'))
-        el.className = 'maplibregl-ctrl dhis2-map-ctrl-search'
+        el.className = 'mapboxgl-ctrl dhis2-map-ctrl-search'
 
         const icon = document.createElement('span')
         icon.className = 'geocoder-icon geocoder-icon-search'

src/controls/controlTypes.js

@@ -1,4 +1,4 @@
-import { AttributionControl, ScaleControl } from 'maplibre-gl'
+import { AttributionControl, ScaleControl } from 'mapbox-gl'
 import Navigation from './Navigation'
 import Search from './Search'
 import Measure from './Measure'

src/index.js

@@ -5,7 +5,7 @@ import getEarthEngineApi from './utils/eeapi'
 import { getLabelPosition } from './utils/labels'
 
 /**
- *  Wrapper around MapLibre GL JS for DHIS2 Maps
+ *  Wrapper around Mapbox GL JS for DHIS2 Maps
  */
 
 export const layerTypes = Object.keys(supportedLayers)

src/layers/BingLayer.css

@@ -4,15 +4,15 @@
     left: 3px;
 }
 
-.dhis2-map-bing .maplibregl-ctrl-bottom-left {
+.dhis2-map-bing .mapboxgl-ctrl-bottom-left {
     left: 60px;
 }
 
 /* Bing logo is blocked by CORS policy */
-.dhis2-map-download .dhis2-map-bing-logo {
+.dhis2-map-download .dhis2-map-bing-logo  {
     display: none;
 }
 
-.dhis2-map-download .dhis2-map-bing .maplibregl-ctrl-bottom-left {
+.dhis2-map-download .dhis2-map-bing .mapboxgl-ctrl-bottom-left {
     left: 0;
-}
+}

src/layers/ClientCluster.js

@@ -1,3 +1,4 @@
+
 import Cluster from './Cluster'
 import { featureCollection } from '../utils/geometry'
 import { clusterLayer, clusterCountLayer } from '../utils/layers'
@@ -50,7 +51,7 @@ class ClientCluster extends Cluster {
         const { feature } = evt
 
         if (!feature.properties.cluster) {
-            // Hack until MapLibre GL JS support string ids
+            // Hack until Mapbox GL JS support string ids
             // https://github.com/mapbox/mapbox-gl-js/issues/2716
             if (
                 typeof feature.id === 'number' &&
@@ -76,6 +77,7 @@ class ClientCluster extends Cluster {
             this.updatePolygons()
         }
     }
+
 
     // Returns all features in a cluster
     getClusterFeatures = clusterId =>

src/layers/DonutCluster.js

@@ -65,7 +65,7 @@ class DonutCluster extends Cluster {
         const { feature } = evt
 
         if (!feature.properties.cluster) {
-            // Hack until MapLibre GL JS support string ids
+            // Hack until Mapbox GL JS support string ids
             // https://github.com/mapbox/mapbox-gl-js/issues/2716
             if (
                 typeof feature.id === 'number' &&

src/layers/DonutMarker.js

@@ -1,4 +1,4 @@
-import { Marker } from 'maplibre-gl'
+import { Marker } from 'mapbox-gl'
 
 // Creates a donut marker component
 class DonutMarker extends Marker {

src/layers/EarthEngine.js

@@ -178,7 +178,7 @@ class EarthEngine extends Layer {
             ? FeatureCollection(
                   features.map(f => ({
                       ...f,
-                      id: f.properties.id, // EE requires id to be string, MapLibre integer
+                      id: f.properties.id, // EE requires id to be string, Mapbox integer
                   }))
               )
             : null

src/layers/Layer.js

@@ -1,6 +1,6 @@
 import { v4 as uuid } from 'uuid'
 import bbox from '@turf/bbox'
-import { Evented } from 'maplibre-gl'
+import { Evented } from 'mapbox-gl'
 import { addImages } from '../utils/images'
 import { featureCollection } from '../utils/geometry'
 import { bufferSource } from '../utils/buffers'