Adapt LeafletMap

src/client/components/facet_results/FacetedSearchPerspective.js

@@ -104,6 +104,7 @@ const FacetedSearchPerspective = props => {
             defaultActiveFacets={perspective.defaultActiveFacets}
             rootUrl={rootUrl}
             screenSize={screenSize}
+            leafletMapState={props.leafletMapState}
             apexChartsConfig={apexChartsConfig}
             leafletConfig={leafletConfig}
             networkConfig={networkConfig}
@@ -133,7 +134,7 @@ const FacetedSearchPerspective = props => {
             perspectiveState={perspectiveState}
             facetState={facetState}
             facetStateConstrainSelf={facetStateConstrainSelf}
-            leafletMapState={props.leafletMap}
+            leafletMapState={props.leafletMapState}
             fetchPaginatedResults={props.fetchPaginatedResults}
             fetchResults={props.fetchResults}
             fetchInstanceAnalysis={props.fetchInstanceAnalysis}

src/client/components/facet_results/LeafletMap.js

 import React from 'react'
 import PropTypes from 'prop-types'
-import withStyles from '@mui/styles/withStyles';
 import intl from 'react-intl-universal'
 import L from 'leaflet'
 import { has } from 'lodash'
 import CircularProgress from '@mui/material/CircularProgress'
+import Box from '@mui/material/Box'
 import { purple } from '@mui/material/colors'
 import history from '../../History'
-// import { apiUrl } from '../../epics'
 import 'leaflet/dist/leaflet.css' // Official Leaflet styles
 
 // Leaflet plugins
@@ -42,47 +41,6 @@ import markerIconYellow from '../../img/markers/marker-icon-yellow.png'
 // const buffer = lazy(() => import('@turf/buffer'))
 import buffer from '@turf/buffer'
 
-const styles = theme => ({
-  leafletContainerfacetResults: props => ({
-    height: 400,
-    [theme.breakpoints.up(props.layoutConfig.hundredPercentHeightBreakPoint)]: {
-      height: `calc(100% - ${props.layoutConfig.tabHeight}px)`
-    },
-    position: 'relative'
-  }),
-  leafletContainerclientFSResults: props => ({
-    height: 400,
-    [theme.breakpoints.up(props.layoutConfig.hundredPercentHeightBreakPoint)]: {
-      height: `calc(100% - ${props.layoutConfig.tabHeight}px)`
-    },
-    position: 'relative'
-  }),
-  leafletContainerinstancePage: props => ({
-    height: 400,
-    [theme.breakpoints.up(props.layoutConfig.hundredPercentHeightBreakPoint)]: {
-      height: '100%'
-    },
-    position: 'relative'
-  }),
-  leafletContainermobileMapPage: {
-    height: '100%',
-    position: 'relative'
-  },
-  mapElement: {
-    width: '100%',
-    height: '100%'
-  },
-  spinnerContainer: {
-    height: 40,
-    width: 40,
-    position: 'absolute',
-    left: '50%',
-    top: '50%',
-    transform: 'translate(-50%,-50%)',
-    zIndex: 500
-  }
-})
-
 // https://github.com/pointhi/leaflet-color-markers
 const ColorIcon = L.Icon.extend({
   options: {
@@ -137,6 +95,13 @@ class LeafletMap extends React.Component {
   }
 
   componentDidUpdate = (prevProps, prevState) => {
+    // Dispatch a resize event so that Leaflet fits
+    // it's container properly. Copied from
+    // https://stackoverflow.com/a/61205108
+    const evt = document.createEvent('UIEvents')
+    evt.initUIEvent('resize', true, false, window, 0)
+    window.dispatchEvent(evt)
+
     this.props.facetedSearchMode === 'clientFS'
       ? this.clientFScomponentDidUpdate(prevProps)
       : this.serverFScomponentDidUpdate(prevProps, prevState)
@@ -351,6 +316,7 @@ class LeafletMap extends React.Component {
       fullscreenControl: true
     }).whenReady(context => {
       this.updateEnlargedBounds({ mapInstance: context.target })
+      context.target.invalidateSize()
     })
 
     this.zoominfoControl = this.leafletMap.zoominfoControl
@@ -1015,24 +981,50 @@ class LeafletMap extends React.Component {
   }
 
   render = () => {
+    const { layoutConfig, pageType } = this.props
     return (
       <>
-        <div className={this.props.classes[`leafletContainer${this.props.pageType}`]}>
-          <div id={this.props.container ? this.props.container : 'map'} className={this.props.classes.mapElement}>
+        <Box
+          sx={theme => ({
+            [theme.breakpoints.up(layoutConfig.hundredPercentHeightBreakPoint)]: {
+              height: pageType === 'facetResults' || pageType === 'clientFSResults'
+                ? `calc(100% - ${layoutConfig.tabHeight}px)`
+                : '100%'
+            },
+            position: 'relative',
+            ...(pageType !== 'mobileMapPage' && { height: 400 })
+          })}
+        >
+          <Box
+            id={this.props.container ? this.props.container : 'map'}
+            sx={{
+              width: '100%',
+              height: '100%'
+            }}
+          >
             {(this.props.fetching ||
             (this.props.showExternalLayers && this.props.leafletMapState.fetching)) &&
-              <div className={this.props.classes.spinnerContainer}>
+              <Box
+                sx={{
+                  height: 40,
+                  width: 40,
+                  position: 'absolute',
+                  left: '50%',
+                  top: '50%',
+                  transform: 'translate(-50%,-50%)',
+                  zIndex: 500
+                }}
+              >
                 <CircularProgress style={{ color: purple[500] }} thickness={5} />
-              </div>}
-          </div>
-        </div>
+              </Box>}
+          </Box>
+        </Box>
       </>
     )
   }
 }
 
 LeafletMap.propTypes = {
-  classes: PropTypes.object.isRequired,
   pageType: PropTypes.string.isRequired,
   results: PropTypes.array,
   leafletMapState: PropTypes.object,
@@ -1057,6 +1049,4 @@ LeafletMap.propTypes = {
   uri: PropTypes.string
 }
 
-export const LeafletMapComponent = LeafletMap
-
-export default withStyles(styles)(LeafletMap)
+export default LeafletMap