#59 workaround for non-synchronised flyTo

clarity-h2020 · Mar 16, 2020 · f6e3f3b · f6e3f3b
1 parent 0dc2019
commit f6e3f3b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/components/GenericMap.js b/src/components/GenericMap.js
@@ -25,7 +25,11 @@ export default class GenericMap extends BasicMap {
 	componentDidUpdate() {
 		if (this.mapComponentA && this.mapComponentA.leafletMapInstance && this.mapComponentB && this.mapComponentB.leafletMapInstance) {
 			this.mapComponentA.leafletMapInstance.sync(this.mapComponentB.leafletMapInstance);
-			this.mapComponentB.leafletMapInstance.sync(this.mapComponentA.leafletMapInstance);
+			// WARNING: flyTo will not work if we apply it to both maps!
+			this.mapComponentB.leafletMapInstance.sync(this.mapComponentA.leafletMapInstance,
+				{
+					noInitialSync: true
+				});
 			log.debug('Map Components synchronised');
 		}
 	}
@@ -65,6 +69,7 @@ export default class GenericMap extends BasicMap {
 					exclusiveGroups={this.state.exclusiveGroups}
 					mapId={'synchronisedMapA'}
 					ref={(mapComponent) => (this.mapComponentA = mapComponent)}
+					fly='true'
 				/>
 				<MapComponent
 					loading={this.state.loading}
@@ -75,6 +80,7 @@ export default class GenericMap extends BasicMap {
 					exclusiveGroups={this.state.exclusiveGroups}
 					mapId={'synchronisedMapB'}
 					ref={(mapComponent) => (this.mapComponentB = mapComponent)}
+					fly='false'
 				/>
 			</>);
 		} else {

diff --git a/src/components/commons/MapComponent.js b/src/components/commons/MapComponent.js
@@ -6,6 +6,7 @@ import turf from 'turf';
 import 'leaflet-loading';
 import LegendComponent from './LegendComponent.js';
 import 'leaflet/dist/leaflet.css';
+import log from 'loglevel';
 
 // See https://github.com/mhasbie/react-leaflet-vectorgrid#usage-with-react-leaflet-v2
 const ReactLeafletGroupedLayerControl = withLeaflet(ReactLeafletGroupedLayerControlForLeafletv1);
@@ -30,7 +31,7 @@ export default class MapComponent extends React.Component {
 
 		this.baseLayers = props.baseLayers;
 		this.tileLayerUrl = props.baseLayers[0].url;
-		this.fly = true;
+		this.fly = props.fly ? true : false;
 		// the leaflet instance, retrieved from the leaflet context
 		// see https://stackoverflow.com/questions/51308835/how-to-use-react-leaflet-context
 
@@ -106,6 +107,7 @@ export default class MapComponent extends React.Component {
 			this.leafletMapInstance.invalidateSize();
 
 			if (this.fly && this.props.studyAreaPolygon != null) {
+				log.info('centering on study area');
 				this.leafletMapInstance.flyToBounds(this.getBoundsFromArea(this.props.studyAreaPolygon), null);
 				this.fly = false;
 			}