feat(#13): 💄 Made a background for the minimap

src/MiniMap/miniMap.js

@@ -14,11 +14,38 @@ export function initMiniMap(viewer) {
 
   overrideMapViewUpdate(viewer)
 
+  setMiniMapBackground(map, '#d6ecff')
+
   // Transform minimap center [lon, lat] from EPSG:4326 to EPSG:3857
   const center = proj4('EPSG:4326', 'EPSG:3857', [2, 69])
   map.getView().setCenter(center)
 }
 
+/**
+ * Sets the background color for the Minimap so that it is not seethrough.
+ * Makes it easier to get an overview when deep in a survey.
+ *
+ * @param {*} map
+ * @param {*} color
+ */
+function setMiniMapBackground(map, color) {
+  // OL ≥ 6.5 supports a map background property
+  try {
+    map.set && map.set('background', color)
+  } catch {}
+
+  // Fallbacks that work on older OL + Potree
+  const viewport = map.getViewport && map.getViewport()
+  if (viewport) viewport.style.background = color
+
+  const target = map.getTargetElement && map.getTargetElement()
+  if (target) target.style.background = color
+
+  // As a last resort, paint the canvas background
+  const canvas = viewport && viewport.querySelector('canvas')
+  if (canvas) canvas.style.background = color
+}
+
 /**
  * Replaces default Open Street Map layer with custom GeoJSON in order for it to work offline.
  * Also removes the extent layer.