Add Leaflet control for heatmap

src/client/components/facet_results/LeafletMap.css

@@ -20,4 +20,8 @@
     width: 18px !important;
     height: 18px !important;
     padding-top: 0px !important;
+}
+
+.leaflet-control-heatmap-input-container {
+    display:flex; 
 }
\ No newline at end of file

src/client/components/facet_results/LeafletMap.js

@@ -173,6 +173,8 @@ class LeafletMap extends React.Component {
     if (has(this.props, 'facet') && this.props.facet.filterType === 'spatialFilter') {
       this.addDrawButtons()
     }
+
+    if (this.props.showMapModeControl) { this.addHeatMapControl() }
   }
 
   drawPointData = () => {
@@ -309,6 +311,37 @@ class LeafletMap extends React.Component {
     leafletOverlay.clearLayers()
   }
 
+  addHeatMapControl = () => {
+    L.Control.Heatmap = L.Control.extend({
+      onAdd: map => {
+        const container = L.DomUtil.create('div')
+        container.innerHTML = `
+          <div class="leaflet-control-layers leaflet-control-layers-expanded">
+            <form>
+              <span>Map mode:</span>
+              <div class="leaflet-control-heatmap-input-container">
+                <input type="radio" id="markers" name="markers" value="markers">  
+                <label for="markers">Markers</label>        
+              </div>
+              <div class="leaflet-control-heatmap-input-container">
+                <input type="radio" id="heatmap" name="heatmap" value="heatmap">        
+                <label for="heatmap">Heatmap</label>              
+              </div>
+            </form>  
+          </div>    
+        `
+        return container
+      },
+      onRemove: map => {
+        // Nothing to do here
+      }
+    })
+    L.control.heatmap = opts => {
+      return new L.Control.Heatmap(opts)
+    }
+    L.control.heatmap({ position: 'topleft' }).addTo(this.leafletMap)
+  }
+
   addDrawButtons = () => {
     this.drawnItems = new L.FeatureGroup()
     this.leafletMap.addLayer(this.drawnItems)

src/client/components/perspectives/sampo/Perspective1.js

@@ -49,6 +49,7 @@ const Perspective1 = props => {
             resultClass='placesMsProduced'
             facetClass='perspective1'
             mapMode='heatmap'
+            showMapModeControl
             instance={props.places.instance}
             fetchResults={props.fetchResults}
             fetchGeoJSONLayers={props.fetchGeoJSONLayers}