From 4b48f6c2fb21bdb1fe562b12017349042b555de3 Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Tue, 21 Jan 2020 08:38:43 -0500
Subject: [PATCH 1/2] feat: persist the map center point. avoids big dramatic
 animations when map loads. allows centering the map without adding any pins.

---
 extensions/blocks/map/component.js | 33 ++++++++++++++++++++++--------
 extensions/blocks/map/edit.js      |  1 +
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/extensions/blocks/map/component.js b/extensions/blocks/map/component.js
index 27b40efbddc52..755a080c446d7 100644
--- a/extensions/blocks/map/component.js
+++ b/extensions/blocks/map/component.js
@@ -181,11 +181,17 @@ export class Map extends Component {
 		this.setBoundsByMarkers();
 	};
 	setBoundsByMarkers = () => {
-		const { zoom, points, onSetZoom } = this.props;
+		const { admin, onSetMapCenter, onSetZoom, points, zoom } = this.props;
 		const { map, activeMarker, mapboxgl, zoomControl, boundsSetProgrammatically } = this.state;
 		if ( ! map ) {
 			return;
 		}
+		// Do not allow map dragging in the editor if there are markers, because the positioning will be programmatically overridden.
+		if ( points.length && admin ) {
+			map.dragPan.disable();
+		} else {
+			map.dragPan.enable();
+		}
 		// If there are no points at all, there is no data to set bounds to. Abort the function.
 		if ( ! points.length ) {
 			return;
@@ -198,6 +204,7 @@ export class Map extends Component {
 		points.forEach( point => {
 			bounds.extend( [ point.coordinates.longitude, point.coordinates.latitude ] );
 		} );
+		onSetMapCenter( bounds.getCenter() );
 
 		// If there are multiple points, zoom is determined by the area they cover, and zoom control is removed.
 		if ( points.length > 1 ) {
@@ -296,7 +303,13 @@ export class Map extends Component {
 		map.on( 'zoomend', () => {
 			this.props.onSetZoom( map.getZoom() );
 		} );
-
+		map.on( 'moveend', () => {
+			const { onSetMapCenter, points } = this.props;
+			// If there are no markers, user repositioning controls map center. If there are markers, set programmatically.
+			if ( points.length < 1 ) {
+				onSetMapCenter( map.getCenter() );
+			}
+		} );
 		/* Listen for clicks on the Map background, which hides the current popup. */
 		map.getCanvas().addEventListener( 'click', this.onMapClick );
 		this.setState( { map, zoomControl }, () => {
@@ -312,13 +325,14 @@ export class Map extends Component {
 			window.addEventListener( 'resize', this.debouncedSizeMap );
 		} );
 	}
-	googlePoint2Mapbox( google_point ) {
-		const mapCenter = [
-			google_point.longitude ? google_point.longitude : 0,
-			google_point.latitude ? google_point.latitude : 0,
-		];
-		return mapCenter;
-	}
+	googlePoint2Mapbox = google_point =>
+		google_point.hasOwnProperty( 'lat' ) && google_point.hasOwnProperty( 'lng' )
+			? google_point // Already a valid Mapbox point.
+			: {
+					// Legacy point, supported here to avoid block deprecation.
+					lng: google_point.longitude ? google_point.longitude : 0,
+					lat: google_point.latitude ? google_point.latitude : 0,
+			  };
 }
 
 Map.defaultProps = {
@@ -326,6 +340,7 @@ Map.defaultProps = {
 	mapStyle: 'default',
 	zoom: 13,
 	onSetZoom: () => {},
+	onSetMapCenter: () => {},
 	onMapLoaded: () => {},
 	onMarkerClick: () => {},
 	onError: () => {},
diff --git a/extensions/blocks/map/edit.js b/extensions/blocks/map/edit.js
index 497eaa70933fe..4a14817ba0306 100644
--- a/extensions/blocks/map/edit.js
+++ b/extensions/blocks/map/edit.js
@@ -262,6 +262,7 @@ class MapEdit extends Component {
 						admin={ true }
 						apiKey={ apiKey }
 						onSetPoints={ value => setAttributes( { points: value } ) }
+						onSetMapCenter={ value => setAttributes( { mapCenter: value } ) }
 						onMapLoaded={ () => this.setState( { addPointVisibility: true } ) }
 						onMarkerClick={ () => this.setState( { addPointVisibility: false } ) }
 						onError={ this.onError }

From 736ea751f3bafb76e07c33fb9854eda623b45b5f Mon Sep 17 00:00:00 2001
From: Jefferson Rabb <jeff@atavist.net>
Date: Tue, 21 Jan 2020 13:18:45 -0500
Subject: [PATCH 2/2] style: cleaner handling of legacy map point conversion.

---
 extensions/blocks/map/component.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/extensions/blocks/map/component.js b/extensions/blocks/map/component.js
index 755a080c446d7..221c62f8bb1d9 100644
--- a/extensions/blocks/map/component.js
+++ b/extensions/blocks/map/component.js
@@ -330,8 +330,8 @@ export class Map extends Component {
 			? google_point // Already a valid Mapbox point.
 			: {
 					// Legacy point, supported here to avoid block deprecation.
-					lng: google_point.longitude ? google_point.longitude : 0,
-					lat: google_point.latitude ? google_point.latitude : 0,
+					lat: google_point.latitude || 0,
+					lng: google_point.longitude || 0,
 			  };
 }