set correct map view if opened stylefile provides a map view and the current map is empty (#1552)

## Launch Checklist

closes https://github.com/maplibre/maputnik/issues/1546

 - [x] Link to related issues.
 https://github.com/maplibre/maputnik/issues/1546
 - [x] Write tests for all new functionality.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Harel M <harel.mazor@gmail.com>

src/components/App.tsx

@@ -99,6 +99,7 @@ type AppState = {
       lng: number,
       lat: number,
     },
+    _from: "map" | "app"
   },
   maplibreGlDebugOptions: Partial<MapOptions> & {
     showTileBoundaries: boolean,
@@ -148,6 +149,7 @@ export default class App extends React.Component<any, AppState> {
           lng: 0,
           lat: 0,
         },
+        _from: "app"
       },
       isOpen: {
         settings: false,
@@ -335,6 +337,13 @@ export default class App extends React.Component<any, AppState> {
       ...opts,
     };
 
+
+    // Detect empty style
+    const oldStyle = this.state.mapStyle;
+    const isEmptySources = !oldStyle.sources || Object.keys(oldStyle.sources).length === 0;
+    const isEmptyLayers = !oldStyle.layers || oldStyle.layers.length === 0;
+    const isEmptyStyle = isEmptySources && isEmptyLayers;
+
     // For the style object, find the urls that has "{key}" and insert the correct API keys
     // Without this, going from e.g. MapTiler to OpenLayers and back will lose the maptlier key.
 
@@ -466,15 +475,25 @@ export default class App extends React.Component<any, AppState> {
       this.saveStyle(newStyle);
     }
 
+    const zoom = newStyle?.zoom;
+    const center = newStyle?.center;
+
     this.setState({
       mapStyle: newStyle,
       dirtyMapStyle: dirtyMapStyle,
+      mapView: isEmptyStyle && zoom && center ? {
+        zoom: zoom,
+        center: {
+          lng: center[0],
+          lat: center[1],
+        },
+        _from: "app"
+      } : this.state.mapView,
       errors: mappedErrors,
     }, () => {
       this.fetchSources();
       this.setStateInUrl();
     });
-
   };
 
   onUndo = () => {
@@ -665,6 +684,7 @@ export default class App extends React.Component<any, AppState> {
       lng: number,
       lat: number,
     },
+    _from: "map" | "app"
   }) => {
     this.setState({
       mapView,
@@ -676,6 +696,7 @@ export default class App extends React.Component<any, AppState> {
 
     const mapProps = {
       mapStyle: (dirtyMapStyle || mapStyle),
+      mapView: this.state.mapView,
       replaceAccessTokens: (mapStyle: StyleSpecification) => {
         return style.replaceAccessTokens(mapStyle, {
           allowFallback: true

src/components/MapMaplibreGl.tsx

@@ -52,6 +52,14 @@ type MapMaplibreGlInternalProps = {
   onDataChange?(event: {map: Map | null}): unknown
   onLayerSelect(index: number): void
   mapStyle: StyleSpecification
+  mapView: {
+    zoom: number,
+    center: {
+      lng: number,
+      lat: number,
+    },
+    _from: "map" | "app"
+  };
   inspectModeEnabled: boolean
   highlightedLayer?: HighlightedLayer
   options?: Partial<MapOptions> & {
@@ -60,7 +68,7 @@ type MapMaplibreGlInternalProps = {
     showOverdrawInspector?: boolean
   }
   replaceAccessTokens(mapStyle: StyleSpecification): StyleSpecification
-  onChange(value: {center: LngLat, zoom: number}): unknown
+  onChange(value: {center: LngLat, zoom: number, _from: "map" | "app"}): unknown
 } & WithTranslation;
 
 type MapMaplibreGlState = {
@@ -117,6 +125,11 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       map.showTileBoundaries = this.props.options?.showTileBoundaries!;
       map.showCollisionBoxes = this.props.options?.showCollisionBoxes!;
       map.showOverdrawInspector = this.props.options?.showOverdrawInspector!;
+
+      // set the map view when the prop was updated from outside
+      if (this.props.mapView._from === "app") {
+        map.jumpTo(this.props.mapView);
+      }
     }
 
     if(this.state.inspect && this.props.inspectModeEnabled !== this.state.inspect._showInspectMap) {
@@ -160,7 +173,7 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
     const mapViewChange = () => {
       const center = map.getCenter();
       const zoom = map.getZoom();
-      this.props.onChange({center, zoom});
+      this.props.onChange({center, zoom, _from: "map"});
     };
     mapViewChange();