Refactor map

src/client/components/facet_results/LeafletMap.js

@@ -88,7 +88,50 @@ class LeafletMap extends React.Component {
         sortBy: null
       })
     }
+    this.initMap()
+  }
+
+  componentDidUpdate = prevProps => {
+    // check if filters have changed
+    if (has(prevProps, 'facetUpdateID') && prevProps.facetUpdateID !== this.props.facetUpdateID) {
+      this.props.fetchResults({
+        resultClass: this.props.resultClass,
+        facetClass: this.props.facetClass,
+        sortBy: null
+      })
+    }
+
+    // check if results data or mapMode have changed
+    if (prevProps.results !== this.props.results || prevProps.mapMode !== this.props.mapMode) {
+      if (this.props.mapMode === 'cluster') {
+        this.updateMarkersAndCluster(this.props.results)
+      } else {
+        this.updateMarkers(this.props.results)
+      }
+    }
+
+    // check if instance have changed
+    if ((this.props.instance !== null) && prevProps.instance !== this.props.instance) {
+      this.markers[this.props.instance.id]
+        .bindPopup(this.createPopUpContent(this.props.instance), {
+          maxHeight: 300,
+          maxWidth: 400,
+          minWidth: 400
+        // closeButton: false,
+        })
+        .openPopup()
+    }
+
+    if (has(prevProps, 'facet') && prevProps.facet.filterType !== this.props.facet.filterType) {
+      if (this.props.facet.filterType === 'spatialFilter') {
+        this.addDrawButtons()
+      } else {
+        this.removeDrawButtons()
+      }
+    }
+  }
 
+  initMap = () => {
     // Base layers
     const mapboxLight = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/{z}/{x}/{y}?access_token=' + MAPBOX_ACCESS_TOKEN, {
       attribution: '&copy; <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
@@ -120,13 +163,16 @@ class LeafletMap extends React.Component {
 
     // initialize layers from external sources
     if (this.props.showExternalLayers) {
+      const basemaps = {
+        'Mapbox Light': mapboxLight
+      }
       const fhaArchaeologicalSiteRegistryAreas = L.layerGroup([], { id: 'arkeologiset_kohteet_alue' })
       const fhaArchaeologicalSiteRegistryPoints = L.layerGroup([], { id: 'arkeologiset_kohteet_piste' })
       this.overlayLayers = {
         [intl.get('leafletMap.externalLayers.arkeologiset_kohteet_alue')]: fhaArchaeologicalSiteRegistryAreas,
         [intl.get('leafletMap.externalLayers.arkeologiset_kohteet_piste')]: fhaArchaeologicalSiteRegistryPoints
       }
-      L.control.layers(this.overlayLayers).addTo(this.leafletMap)
+      L.control.layers(basemaps, this.overlayLayers).addTo(this.leafletMap)
     }
 
     // Add scale
@@ -138,44 +184,17 @@ class LeafletMap extends React.Component {
     }
   }
 
-  componentDidUpdate = prevProps => {
-    // check if filters have changed
-    if (has(prevProps, 'facetUpdateID') && prevProps.facetUpdateID !== this.props.facetUpdateID) {
-      this.props.fetchResults({
-        resultClass: this.props.resultClass,
-        facetClass: this.props.facetClass,
-        sortBy: null
+  initMapEventListeners = () => {
+    // Fired when an overlay is selected through the layer control
+    this.map.on('overlayadd', event => {
+      const layerID = event.layer.options.id
+      // https://www.robinwieruch.de/react-state-array-add-update-remove
+      this.setState(state => {
+        return {
+          activeOverLays: [...state.activeOverLays, layerID]
+        }
       })
-    }
-
-    // check if results data or mapMode have changed
-    if (prevProps.results !== this.props.results || prevProps.mapMode !== this.props.mapMode) {
-      if (this.props.mapMode === 'cluster') {
-        this.updateMarkersAndCluster(this.props.results)
-      } else {
-        this.updateMarkers(this.props.results)
-      }
-    }
-
-    // check if instance have changed
-    if ((this.props.instance !== null) && prevProps.instance !== this.props.instance) {
-      this.markers[this.props.instance.id]
-        .bindPopup(this.createPopUpContent(this.props.instance), {
-          maxHeight: 300,
-          maxWidth: 400,
-          minWidth: 400
-        // closeButton: false,
-        })
-        .openPopup()
-    }
-
-    if (has(prevProps, 'facet') && prevProps.facet.filterType !== this.props.facet.filterType) {
-      if (this.props.facet.filterType === 'spatialFilter') {
-        this.addDrawButtons()
-      } else {
-        this.removeDrawButtons()
-      }
-    }
+    })
   }
 
   addDrawButtons = () => {

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

@@ -50,6 +50,7 @@ const Perspective1 = props => {
             mapMode='cluster'
             instance={props.places.instance}
             fetchResults={props.fetchResults}
+            fetchGeoJSONLayers={props.fetchGeoJSONLayers}
             fetchByURI={props.fetchByURI}
             fetching={props.places.fetching}
             showInstanceCountInClusters
@@ -71,6 +72,7 @@ const Perspective1 = props => {
             mapMode='cluster'
             instance={props.places.instance}
             fetchResults={props.fetchResults}
+            fetchGeoJSONLayers={props.fetchGeoJSONLayers}
             fetchByURI={props.fetchByURI}
             fetching={props.places.fetching}
             showInstanceCountInClusters
@@ -121,6 +123,7 @@ Perspective1.propTypes = {
   places: PropTypes.object.isRequired,
   facetData: PropTypes.object.isRequired,
   fetchResults: PropTypes.func.isRequired,
+  fetchGeoJSONLayers: PropTypes.func.isRequired,
   fetchPaginatedResults: PropTypes.func.isRequired,
   fetchByURI: PropTypes.func.isRequired,
   updatePage: PropTypes.func.isRequired,

src/client/containers/SemanticPortal.js

@@ -37,6 +37,7 @@ import {
   fetchByURI,
   fetchFacet,
   fetchFacetConstrainSelf,
+  fetchGeoJSONLayers,
   sortResults,
   updateFacetOption,
   updatePage,
@@ -196,6 +197,7 @@ const SemanticPortal = props => {
             facetData={props.perspective1Facets}
             fetchPaginatedResults={props.fetchPaginatedResults}
             fetchResults={props.fetchResults}
+            fetchGeoJSONLayers={props.fetchGeoJSONLayers}
             fetchByURI={props.fetchByURI}
             updatePage={props.updatePage}
             updateRowsPerPage={props.updateRowsPerPage}
@@ -487,6 +489,7 @@ const mapDispatchToProps = ({
   fetchByURI,
   fetchFacet,
   fetchFacetConstrainSelf,
+  fetchGeoJSONLayers,
   sortResults,
   clearResults,
   updateFacetOption,
@@ -517,6 +520,7 @@ SemanticPortal.propTypes = {
   fetchResultsClientSide: PropTypes.func.isRequired,
   fetchPaginatedResults: PropTypes.func.isRequired,
   fetchByURI: PropTypes.func.isRequired,
+  fetchGeoJSONLayers: PropTypes.func.isRequired,
   sortResults: PropTypes.func.isRequired,
   clearResults: PropTypes.func.isRequired,
   updatePage: PropTypes.func.isRequired,