LeafletMap: add popup to component state

src/client/components/App.js

@@ -8,7 +8,7 @@ const theme = createMuiTheme({
       main: '#212121'
     },
     secondary: {
-      main: '#f44336' 
+      main: '#f44336'
     }
   },
   overrides: {

src/client/components/facet_results/LeafletMap.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { withStyles } from '@material-ui/core/styles'
 import intl from 'react-intl-universal'
 import L from 'leaflet'
-import { has, isEqual } from 'lodash'
+import { has } from 'lodash'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import { purple } from '@material-ui/core/colors'
 import history from '../../History'
@@ -105,7 +105,10 @@ class LeafletMap extends React.Component {
       prevZoomLevel: null,
       enlargedBounds: null,
       mapMode: props.mapMode,
-      showBuffer: true
+      showBuffer: true,
+      popupID: null,
+      popupOpen: false,
+      popupBinded: false
     }
   }
 
@@ -182,17 +185,32 @@ class LeafletMap extends React.Component {
       })
     }
 
-    // check if instance have changed
-    if ((this.props.instance !== null) && !isEqual(prevProps.instance, this.props.instance)) {
-      this.markers[this.props.instance.id]
-        .bindPopup(this.props.createPopUpContent({
-          data: this.props.instance,
-          resultClass: this.props.resultClass
-        }), {
-          ...(this.props.popupMaxHeight && { maxHeight: this.props.popupMaxHeight }),
-          ...(this.props.popupMinWidth && { minWidth: this.props.popupMinWidth })
-        })
+    // check if should open a popup
+    if (this.props.instance && this.state.popupOpen && !this.state.popupBinded &&
+      this.props.instance.id === this.state.popupID) {
+      const marker = this.markers[this.props.instance.id]
+      marker
+        .bindPopup(
+          this.props.createPopUpContent({
+            data: this.props.instance,
+            resultClass: this.props.resultClass
+          }),
+          {
+            closeButton: true,
+            ...(this.props.popupMaxHeight && { maxHeight: this.props.popupMaxHeight }),
+            ...(this.props.popupMaxWidth && { maxWidth: this.props.popupMaxWidth }),
+            ...(this.props.popupMinWidth && { minWidth: this.props.popupMinWidth })
+          })
         .openPopup()
+        .on('popupclose', () => {
+          marker.unbindPopup()
+          this.setState({
+            popupID: null,
+            popupOpen: false,
+            popupBinded: false
+          })
+        })
+      this.setState({ popupBinded: true })
     }
 
     if (this.props.showExternalLayers &&
@@ -959,10 +977,15 @@ class LeafletMap extends React.Component {
   }
 
   markerOnClickFacetResults = event => {
+    const { id } = event.target.options
+    this.setState({
+      popupID: id,
+      popupOpen: true
+    })
     this.props.fetchByURI({
       resultClass: this.props.resultClass,
       facetClass: this.props.facetClass,
-      uri: event.target.options.id
+      uri: id
     })
   };
 

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

@@ -31,6 +31,14 @@ const Perspective1 = props => {
   const layerControlExpanded = screenSize === 'md' ||
     screenSize === 'lg' ||
     screenSize === 'xl'
+  let popupMaxHeight = 320
+  let popupMinWidth = 280
+  let popupMaxWidth = 280
+  if (screenSize === 'xs' || screenSize === 'sm') {
+    popupMaxHeight = 200
+    popupMinWidth = 150
+    popupMaxWidth = 150
+  }
   return (
     <>
       <PerspectiveTabs
@@ -82,8 +90,9 @@ const Perspective1 = props => {
             mapMode='cluster'
             instance={props.perspectiveState.instanceTableData}
             createPopUpContent={createPopUpContentMMM}
-            popupMaxHeight={320}
-            popupMinWidth={280}
+            popupMaxHeight={popupMaxHeight}
+            popupMinWidth={popupMinWidth}
+            popupMaxWidth={popupMaxWidth}
             fetchResults={props.fetchResults}
             fetchGeoJSONLayers={props.fetchGeoJSONLayers}
             clearGeoJSONLayers={props.clearGeoJSONLayers}
@@ -99,12 +108,6 @@ const Perspective1 = props => {
             layerConfigs={layerConfigs}
             infoHeaderExpanded={props.perspectiveState.facetedSearchHeaderExpanded}
             layoutConfig={props.layoutConfig}
-          // activeLayers={[
-          // 'WFS_MV_KulttuuriymparistoSuojellut:Muinaisjaannokset_alue',
-          // 'WFS_MV_KulttuuriymparistoSuojellut:Muinaisjaannokset_piste',
-          // 'WFS_MV_Kulttuuriymparisto:Arkeologiset_kohteet_alue',
-          // 'WFS_MV_Kulttuuriymparisto:Arkeologiset_kohteet_piste'
-          // ]}
           />}
       />
       <Route
@@ -146,8 +149,9 @@ const Perspective1 = props => {
             showMapModeControl={false}
             instance={props.perspectiveState.instanceTableData}
             createPopUpContent={createPopUpContentMMM}
-            popupMaxHeight={320}
-            popupMinWidth={280}
+            popupMaxHeight={popupMaxHeight}
+            popupMinWidth={popupMinWidth}
+            popupMaxWidth={popupMaxWidth}
             fetchResults={props.fetchResults}
             fetchGeoJSONLayers={props.fetchGeoJSONLayers}
             clearGeoJSONLayers={props.clearGeoJSONLayers}

src/client/index.css

@@ -53,7 +53,7 @@ a, a:visited, a:hover, a:active {
 } 
 
 .leaflet-popup-content p {
-    margin: 0px;
+    margin: 0px !important;
 }
 
 .leaflet-popup-content h3 {
@@ -69,6 +69,15 @@ a, a:visited, a:hover, a:active {
     margin-left: 3px;
 }
 
+.leaflet-popup-scrolled {
+    border-top: none !important;
+    border-bottom: none !important;
+}
+
+.leaflet-control-layers-list {
+    max-width: 270px;
+}
+
 @media screen and (min-width: 1440px) {
     .leaflet-control-layers {
         font-size: 14px;
@@ -77,6 +86,10 @@ a, a:visited, a:hover, a:active {
         transform: scale(1.5);
         margin: 6px;
     }
+    .leaflet-control-layers-list {
+        /* min-width: 450px; */
+        max-width: 450px;
+    }
 }
 
 .carousel .control-dots {