Toggle striped regions

src/Map.js

@@ -19,6 +19,7 @@ class LocalLegislationMap extends Component {
       recordsModalOpen: false,
       searchResults: null,
       showBaseMap: true,
+      showStripedRegions: true,
     };
     this.mapRef = React.createRef();
   }
@@ -40,9 +41,9 @@ class LocalLegislationMap extends Component {
     });
   };
 
-  toggleBaseMap = (showBaseMap) => {
+  toggleCheckBox = (key, isChecked) => {
     this.setState({
-      showBaseMap: showBaseMap,
+      [key]: isChecked,
     });
   };
 
@@ -74,8 +75,9 @@ class LocalLegislationMap extends Component {
         <InfoPanel info={this.state.info} />
         <ControlPanel
           changeColorScheme={this.changeColorScheme}
-          toggleBaseMap={this.toggleBaseMap}
+          toggleCheckBox={this.toggleCheckBox}
           showBaseMap={this.state.showBaseMap}
+          showStripedRegions={this.state.showStripedRegions}
         />
         <ColorLegend
           mappingData={this.props.mappingData}
@@ -105,6 +107,7 @@ class LocalLegislationMap extends Component {
             mappingData={this.props.mappingData}
             maxNumEntries={maxNumEntries}
             showRecordsModal={this.showRecordsModal}
+            showStripedRegions={this.state.showStripedRegions}
           />
         </LeafletMap>
       </div>

src/components/ControlPanel.js

@@ -42,7 +42,17 @@ class ControlPanel extends Component {
           <Checkbox
             label="World map"
             checked={this.props.showBaseMap}
-            onChange={(e, data) => this.props.toggleBaseMap(data.checked)}
+            onChange={(e, data) =>
+              this.props.toggleCheckBox('showBaseMap', data.checked)
+            }
+          />
+          <br />
+          <Checkbox
+            label="Striped regions"
+            checked={this.props.showStripedRegions}
+            onChange={(e, data) =>
+              this.props.toggleCheckBox('showStripedRegions', data.checked)
+            }
           />
         </Card.Content>
       </Card>

src/components/GeoJSONLayer.js

@@ -61,7 +61,7 @@ class GeoJSONLayer extends Component {
 
     return {
       fillColor: '#fff',
-      fillOpacity: 0.8,
+      fillOpacity: this.props.showStripedRegions ? 0.8 : 0,
       weight: 0,
       fillPattern: Patterns.StripePattern({
         color: '#fff',
@@ -111,20 +111,29 @@ class GeoJSONLayer extends Component {
 
   highlightFeature = (e) => {
     const layer = e.target;
-    const info = this.getDioceseData(layer);
-    this.props.updateInfo(info);
-    let weight = 0.5;
-    let dashArray = '3';
+    if (_inDatabase(layer.feature) || this.props.showStripedRegions) {
+      const info = this.getDioceseData(layer);
+      this.props.updateInfo(info);
+    }
+
+    let style;
     if (_inDatabase(layer.feature)) {
-      weight = 2.0;
-      dashArray = '';
+      style = {
+        weight: 2,
+        color: 'black',
+        dashArray: '',
+        fillOpacity: 1.0,
+      };
+    } else {
+      style = {
+        weight: this.props.showStripedRegions ? 0.5 : 0,
+        color: 'black',
+        dashArray: '3',
+        fillOpacity: this.props.showStripedRegions ? 1.0 : 0,
+      };
     }
-    layer.setStyle({
-      weight: weight,
-      color: 'black',
-      dashArray: dashArray,
-      fillOpacity: 1.0,
-    });
+
+    layer.setStyle(style);
     layer.bringToFront();
   };
 

src/styles/Map.css

@@ -21,7 +21,7 @@
 }
 
 .panel.panel-info {
-  margin-top: 160px !important;
+  margin-top: 170px !important;
 }
 
 .panel-left {