From f7b3b96f2c52b980da74436936398e5d5d622337 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Tue, 22 Jun 2021 14:12:17 +0300
Subject: [PATCH] LeafletMap: add popup to component state
---
src/client/components/App.js | 2 +-
.../components/facet_results/LeafletMap.js | 49 ++++++++++++++-----
.../perspectives/sampo/Perspective1.js | 24 +++++----
src/client/index.css | 15 +++++-
4 files changed, 65 insertions(+), 25 deletions(-)
diff --git a/src/client/components/App.js b/src/client/components/App.js
index 1ca93903..0cfc2dc5 100644
--- a/src/client/components/App.js
+++ b/src/client/components/App.js
@@ -8,7 +8,7 @@ const theme = createMuiTheme({
main: '#212121'
},
secondary: {
- main: '#f44336'
+ main: '#f44336'
}
},
overrides: {
diff --git a/src/client/components/facet_results/LeafletMap.js b/src/client/components/facet_results/LeafletMap.js
index 6e98cbcd..8f000e39 100644
--- a/src/client/components/facet_results/LeafletMap.js
+++ b/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
})
};
diff --git a/src/client/components/perspectives/sampo/Perspective1.js b/src/client/components/perspectives/sampo/Perspective1.js
index b7d0ff31..ace032de 100644
--- a/src/client/components/perspectives/sampo/Perspective1.js
+++ b/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}
diff --git a/src/client/index.css b/src/client/index.css
index d3abc131..f132118e 100644
--- a/src/client/index.css
+++ b/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 {
--
GitLab