diff --git a/src/client/components/LeafletMap.js b/src/client/components/LeafletMap.js index 5f361a5eb10403077324e5d243ed95c40fdf39d1..9d616d855df4198ce3d2a0eade7293cf87c48283 100644 --- a/src/client/components/LeafletMap.js +++ b/src/client/components/LeafletMap.js @@ -109,7 +109,7 @@ class LeafletMap extends React.Component { } - componentDidUpdate({ results, mapMode }) { + componentDidUpdate({ results, place, mapMode }) { // check if results data or mapMode have changed if (this.props.results !== results || this.props.mapMode !== mapMode) { @@ -119,8 +119,21 @@ class LeafletMap extends React.Component { this.updateMarkers(this.props.results); } } + + if (this.props.place !== place) { + this.markers[this.props.place.id.replace('http://ldf.fi/mmm/place/', '')] + .bindPopup(this.createPopUpContent(this.props.place), { + maxHeight: 300, + maxWidth: 400, + minWidth: 400, + //closeButton: false, + }) + .openPopup(); + } + } + updateMarkers(results) { this.resultMarkerLayer.clearLayers(); this.markers = {}; @@ -193,7 +206,6 @@ class LeafletMap extends React.Component { }; createPopUpContent(result) { - // console.log(result) let popUpTemplate = `<h3><a target="_blank" rel="noopener noreferrer" href=${result.sdbmLink}>${result.prefLabel}</a></p></h3>`; if (has(result, 'source')) { popUpTemplate += `<p>Place authority: <a target="_blank" rel="noopener noreferrer" href=${result.source}>${result.source}</a></p>`; @@ -253,7 +265,8 @@ LeafletMap.propTypes = { fetchPlaces: PropTypes.func.isRequired, fetchPlace: PropTypes.func.isRequired, results: PropTypes.array.isRequired, - mapMode: PropTypes.string.isRequired + mapMode: PropTypes.string.isRequired, + place: PropTypes.object.isRequired, }; export default LeafletMap; diff --git a/src/client/components/Manuscripts.js b/src/client/components/Manuscripts.js index 67f19834be5af6b5486876db418cdee1d7750bd6..31bae66a12878861da0cc9486e13e010cd76d8fb 100644 --- a/src/client/components/Manuscripts.js +++ b/src/client/components/Manuscripts.js @@ -34,6 +34,7 @@ let Manuscripts = props => { fetchPlaces={props.fetchPlaces} fetchPlace={props.fetchPlace} results={props.search.places} + place={props.search.place} mapMode='cluster' />} />