Downgrade react-leaflet, restore fullscreen button and slider

package-lock.json

@@ -12092,24 +12092,13 @@
       }
     },
     "react-leaflet": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-2.0.0.tgz",
-      "integrity": "sha512-2GUMPNEGJ67nNcaVFiS+X7xSF1Gujq1u+oAcJM4iWlpt0NOTYygR6355wKWVlDroIIg6axorUinwBWM+O5t2vw==",
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-1.9.1.tgz",
+      "integrity": "sha512-QiYpjyf1DHy0gLAR2958Mo5Wlu2u7FubIjapPpuUAQNFmjkVSteiDLlEdDpGswTHTyNAfKLS+u9PqvfipMDZKA==",
       "requires": {
-        "hoist-non-react-statics": "^2.5.0",
         "lodash": "^4.0.0",
         "lodash-es": "^4.0.0",
-        "warning": "^4.0.0"
-      },
-      "dependencies": {
-        "warning": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz",
-          "integrity": "sha512-rAVtTNZw+cQPjvGp1ox0XC5Q2IBFyqoqh+QII4J/oguyu83Bax1apbo2eqB8bHRS+fqYUBagys6lqUoVwKSmXQ==",
-          "requires": {
-            "loose-envify": "^1.0.0"
-          }
-        }
+        "warning": "^3.0.0"
       }
     },
     "react-leaflet-control": {

package.json

@@ -75,7 +75,7 @@
     "react-data-grid-addons": "^4.0.8",
     "react-dom": "^16.4.2",
     "react-google-maps": "^9.4.5",
-    "react-leaflet": "^2.0.0",
+    "react-leaflet": "^1.9.1",
     "react-leaflet-control": "^1.4.1",
     "react-leaflet-fullscreen": "0.0.6",
     "react-leaflet-google": "^3.3.1",

src/client/components/map/LeafletMap.js

@@ -7,18 +7,14 @@ import {
   GeoJSON
 } from 'react-leaflet';
 const { BaseLayer, Overlay } = LayersControl;
-
-// import FullscreenControl from 'react-leaflet-fullscreen';
-// import 'react-leaflet-fullscreen/dist/styles.css';
-
+import FullscreenControl from 'react-leaflet-fullscreen';
+import 'react-leaflet-fullscreen/dist/styles.css';
 import ResultMarkerList from './ResultMarkerList';
-import MarkerCluster from './MarkerCluster';
-
-// import SimpleSlider from './SimpleSlider';
-// import Control from 'react-leaflet-control';
-//
+// import MarkerCluster from './MarkerCluster';
+import SimpleSlider from './SimpleSlider';
+import Control from 'react-leaflet-control';
 // import { GoogleLayer } from 'react-leaflet-google';
-// https://console.developers.google.com/apis/credentials?project=hipla-187309
+// // https://console.developers.google.com/apis/credentials?project=hipla-187309
 // const gKey = 'AIzaSyCKWw5FjhwLsfp_l2gjVAifPkT)3cxGXhA4';
 // const road = 'ROADMAP'; // displays the default road map view. This is the default map type.
 // const satellite = 'SATELLITE'; // displays Google Earth satellite images.
@@ -75,12 +71,12 @@ class LeafletMap extends React.Component {
             <BaseLayer name='Google Maps Terrain'>
             <GoogleLayer googlekey={gKey}  maptype={terrain} />
           </BaseLayer> */}
-          <BaseLayer name="MML Maastokartta">
+          {/* <BaseLayer name="MML Maastokartta">
             <TileLayer
               attribution="SeCo"
               url="https://avoin-karttakuva.maanmittauslaitos.fi/avoin/wmts/1.0.0/maastokartta/default/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png"
             />
-          </BaseLayer>
+          </BaseLayer> */}
           <Overlay name="Karelian maps">
             <TileLayer
               attribution="SeCo"
@@ -108,25 +104,25 @@ class LeafletMap extends React.Component {
           data={this.props.geoJSON}
           onEachFeature={this.handleOnEachFeature}
         />
-        {this.props.mapMode == 'cluster' && this.props.results.length > 0 &&
+        {/* {this.props.mapMode == 'cluster' && this.props.results.length > 0 &&
           <MarkerCluster results={this.props.results} />
-        }
+        } */}
         {this.props.mapMode == 'noCluster' &&  this.props.results.length > 0 &&
           <ResultMarkerList results={this.props.results} />}
-        {/* <FullscreenControl position='topright' /> */}
-        {/* <Control position="topright" >
+        <FullscreenControl position='topright' />
+        <Control position="topright" >
           <SimpleSlider
             sliderValue={this.props.sliderValue}
             setOpacity={this.handleSetOpacity}
           />
-          </Control>
-          <Control position="topright" >
+        </Control>
+        <Control position="topright" >
           <button
             onClick={this.props.getGeoJSON}
           >
             Kotus pitäjät
           </button>
-        </Control> */}
+        </Control>
       </Map>
     );
   }

src/client/reducers/options.js

@@ -6,7 +6,7 @@ import {
 
 const DEFAULT_LANGUAGE = 'en';
 const DEFAULT_RESULT_FORMAT = 'table';
-const DEFAULT_MAP_MODE = 'cluster';
+const DEFAULT_MAP_MODE = 'noCluster';
 
 export const INITIAL_STATE = {
   language: DEFAULT_LANGUAGE,

src/client/reducers/search.js

@@ -50,8 +50,8 @@ export const INITIAL_STATE = {
   suggestions: [],
   suggestionsQuery: '',
   fetchingSuggestions: false,
-  results: [],
-  //results: sampleResults,
+  // results: [],
+  results: sampleResults,
   resultsFilter: {
     'label': new Set(),
     'modifier': new Set(),