From 3d49bfb1f95f1ca0d106baeb87f3797daf4315a4 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Mon, 31 May 2021 12:20:55 +0300
Subject: [PATCH] Leaflet map: improve map bounds handling
---
.../components/facet_results/LeafletMap.js | 22 ++++++++++---------
1 file changed, 12 insertions(+), 10 deletions(-)
diff --git a/src/client/components/facet_results/LeafletMap.js b/src/client/components/facet_results/LeafletMap.js
index a19f58b4..b6e5bb74 100644
--- a/src/client/components/facet_results/LeafletMap.js
+++ b/src/client/components/facet_results/LeafletMap.js
@@ -358,9 +358,8 @@ class LeafletMap extends React.Component {
this.addDrawButtons()
}
- if (this.props.updateMapBounds) {
+ if (this.props.updateMapBounds && !this.props.locateUser) {
this.updateMapBounds()
- this.leafletMap.on('moveend', () => this.updateMapBounds())
}
}
@@ -415,6 +414,7 @@ class LeafletMap extends React.Component {
// .openPopup()
this.initMapEventListeners()
this.maybeUpdateEnlargedBoundsAndFetchGeoJSONLayers({ eventType: 'programmatic' })
+ this.updateMapBounds()
}
onLocationError = e => {
@@ -422,12 +422,13 @@ class LeafletMap extends React.Component {
this.props.center,
this.props.zoom
)
+ this.updateMapBounds()
+ this.initMapEventListeners()
+ this.maybeUpdateEnlargedBoundsAndFetchGeoJSONLayers({ eventType: 'programmatic' })
// this.props.showError({
// title: '',
// text: e.message
// })
- this.initMapEventListeners()
- this.maybeUpdateEnlargedBoundsAndFetchGeoJSONLayers({ eventType: 'programmatic' })
}
boundsToObject = () => {
@@ -469,6 +470,7 @@ class LeafletMap extends React.Component {
return results.map(result => [+result.lat, +result.long])
}
+ // event listeners, only used when this.props.showExternalLayers
initMapEventListeners = () => {
// Fired when an overlay is selected using layer controls
this.leafletMap.on('layeradd', event => {
@@ -509,22 +511,22 @@ class LeafletMap extends React.Component {
// Fired when zooming starts
this.leafletMap.on('zoomstart', () => {
- this.setState({ prevZoomLevel: this.leafletMap.getZoom() })
+ if (this.props.showExternalLayers) {
+ this.setState({ prevZoomLevel: this.leafletMap.getZoom() })
+ }
})
// Fired when zooming ends
this.leafletMap.on('zoomend', event => {
+ if (this.props.updateMapBounds) { this.updateMapBounds() }
this.maybeUpdateEnlargedBoundsAndFetchGeoJSONLayers({ eventType: 'zoomend' })
})
// Fired when dragging ends
this.leafletMap.on('dragend', () => {
+ if (this.props.updateMapBounds) { this.updateMapBounds() }
this.maybeUpdateEnlargedBoundsAndFetchGeoJSONLayers({ eventType: 'dragend' })
})
-
- // Fired when the map is initialized (when its center and zoom are set for the first time).
- // this.leafletMap.on('load', () => {
- // })
}
initOverLays = basemaps => {
@@ -589,7 +591,7 @@ class LeafletMap extends React.Component {
const currentBounds = this.leafletMap.getBounds()
// When user triggers zoom or drag event and map is within enlarged bounds, do nothing
- if (eventType !== 'programmatic' && this.state.enlargedBounds.contains(currentBounds)) {
+ if (eventType !== 'programmatic' && this.props.leafletMapState.updateID > 0 && this.state.enlargedBounds.contains(currentBounds)) {
return
}
--
GitLab