Switch to leaflet.control.opacity from npm

package-lock.json

 {
-  "name": "sampo-web-app",
+  "name": "sampo-ui",
   "requires": true,
   "lockfileVersion": 1,
   "dependencies": {
@@ -2798,13 +2798,6 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true
     },
-    "Leaflet.Control.Opacity": {
-      "version": "git+https://github.com/SemanticComputing/Leaflet.Control.Opacity.git#348af24ad78fca331a435161cc803ecbaf9c1570",
-      "from": "git+https://github.com/SemanticComputing/Leaflet.Control.Opacity.git",
-      "requires": {
-        "leaflet": "^1.3.3"
-      }
-    },
     "Leaflet.extra-markers": {
       "version": "git+https://github.com/SemanticComputing/Leaflet.ExtraMarkers.git#7b71451a174371bbda7adef890dec7a7cdf535e1",
       "from": "git+https://github.com/SemanticComputing/Leaflet.ExtraMarkers.git"
@@ -11696,6 +11689,11 @@
       "resolved": "https://registry.npmjs.org/leaflet-fullscreen/-/leaflet-fullscreen-1.0.2.tgz",
       "integrity": "sha1-CcYcS6xF9jsu4Sav2H5c2XZQ/Bs="
     },
+    "leaflet.control.opacity": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/leaflet.control.opacity/-/leaflet.control.opacity-1.3.0.tgz",
+      "integrity": "sha512-2SwOuVgR8MF1Ax3f7BgMmPnXFIwn782HvaQeXEV1CVEQgDavcQMuDFuN0d2aaprIIj+EMag9iaj22jvAtMSYCw=="
+    },
     "leaflet.markercluster": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz",

package.json

@@ -53,7 +53,6 @@
     "@material-ui/core": "^4.9.0",
     "@material-ui/icons": "^4.5.1",
     "@material-ui/pickers": "^3.2.10",
-    "Leaflet.Control.Opacity": "git+https://github.com/SemanticComputing/Leaflet.Control.Opacity.git",
     "Leaflet.extra-markers": "git+https://github.com/SemanticComputing/Leaflet.ExtraMarkers.git",
     "apexcharts": "^3.10.0",
     "axios": "^0.19.0",
@@ -66,6 +65,7 @@
     "leaflet": "^1.6.0",
     "leaflet-draw": "^1.0.4",
     "leaflet-fullscreen": "^1.0.2",
+    "leaflet.control.opacity": "^1.3.0",
     "leaflet.markercluster": "^1.4.1",
     "leaflet.zoominfo": "git+https://github.com/SemanticComputing/Leaflet.zoominfo.git",
     "lodash": "^4.17.15",

src/client/components/facet_results/LeafletMap.js

@@ -17,8 +17,8 @@ import 'leaflet-fullscreen/dist/Leaflet.fullscreen.min.js'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
 import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 import 'leaflet.markercluster/dist/leaflet.markercluster.js'
-import 'Leaflet.Control.Opacity/dist/L.Control.Opacity.css'
-import 'Leaflet.Control.Opacity/dist/L.Control.Opacity.js'
+import 'leaflet.control.opacity/dist/L.Control.Opacity.css'
+import 'leaflet.control.opacity'
 import 'Leaflet.extra-markers/dist/js/leaflet.extra-markers.min.js'
 import 'Leaflet.extra-markers/dist/css/leaflet.extra-markers.min.css'
 import 'Leaflet.extra-markers/dist/img/markers_default.png'
@@ -33,6 +33,7 @@ import markerIconViolet from '../../img/markers/marker-icon-violet.png'
 import markerIconGreen from '../../img/markers/marker-icon-green.png'
 import markerIconRed from '../../img/markers/marker-icon-red.png'
 import markerIconOrange from '../../img/markers/marker-icon-orange.png'
+import markerIconYellow from '../../img/markers/marker-icon-yellow.png'
 
 const styles = theme => ({
   leafletContainerfacetResults: {
@@ -42,6 +43,13 @@ const styles = theme => ({
     },
     position: 'relative'
   },
+  leafletContainerclientFSResults: {
+    height: 400,
+    [theme.breakpoints.up('md')]: {
+      height: 'calc(100% - 72px)'
+    },
+    position: 'relative'
+  },
   leafletContainerinstancePage: {
     height: 400,
     [theme.breakpoints.up('md')]: {
@@ -525,7 +533,7 @@ class LeafletMap extends React.Component {
           events: result.events ? result.events : null
         })
       } else {
-        const color = 'green'
+        const color = result.markerColor || 'green'
         let markerIcon = ''
         switch (color) {
           case 'violet':
@@ -540,6 +548,11 @@ class LeafletMap extends React.Component {
           case 'orange':
             markerIcon = markerIconOrange
             break
+          case 'yellow':
+            markerIcon = markerIconYellow
+            break
+          default:
+            markerIcon = markerIconGreen
         }
         marker = L.marker(latLng, {
           icon: new ColorIcon({ iconUrl: markerIcon }),