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>

cypress/e2e/map.cy.ts

@@ -22,6 +22,21 @@ describe("map", () => {
         "Zoom: " + (zoomLevel + 1)
       );
     });
+
+    it("via style file definition", () => {
+      when.setStyle("zoom_7_center_0_51");
+      then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
+      then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText(
+        "Zoom: " + (7)
+      );
+      then(get.locationHash().should("contain", "#7/51/0"));
+
+      // opening another stylefile does not update the map view again
+      // as discussed in https://github.com/maplibre/maputnik/issues/1546
+      when.openASecondStyleWithDifferentZoomAndCenter();
+      then(get.locationHash().should("contain", "#7/51/0"));
+
+    });
   });
 
   describe("search", () => {
@@ -33,6 +48,7 @@ describe("map", () => {
   describe("popup", () => {
     beforeEach(() => {
       when.setStyle("rectangles");
+      then(get.locationHash().should("exist"));
     });
     it("should open on feature click", () => {
       when.clickCenter("maplibre:map");

cypress/e2e/maputnik-cypress-helper.ts

@@ -10,6 +10,7 @@ export default class MaputnikCypressHelper {
   };
 
   public get = {
+    locationHash: (): Cypress.Chainable<string> => cy.location("hash"),
     ...this.helper.get,
   };
 

cypress/e2e/maputnik-driver.ts

@@ -92,6 +92,20 @@ export class MaputnikDriver {
           fixture: "example-style-with-fonts.json",
         },
       });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: baseUrl + "example-style-with-zoom-7-and-center-0-51.json",
+        response: {
+          fixture: "example-style-with-zoom-7-and-center-0-51.json",
+        },
+      });
+      this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: baseUrl + "example-style-with-zoom-5-and-center-50-50.json",
+        response: {
+          fixture: "example-style-with-zoom-5-and-center-50-50.json",
+        },
+      });
       this.helper.given.interceptAndMockResponse({
         method: "GET",
         url: "*example.local/*",
@@ -120,13 +134,20 @@ export class MaputnikDriver {
     waitForExampleFileResponse: () => {
       this.helper.when.waitForResponse("example-style.json");
     },
+    openASecondStyleWithDifferentZoomAndCenter: () => {
+      cy.contains("button", "Open").click();
+      cy.get('[data-wd-key="modal:open.url.input"]')
+        .should("be.enabled")
+        .clear()
+        .type("http://localhost:8888/example-style-with-zoom-5-and-center-50-50.json{enter}");
+    },
     chooseExampleFile: () => {
       this.helper.given.fixture("example-style.json", "example-style.json");
       this.helper.when.openFileByFixture("example-style.json", "modal:open.file.button", "modal:open.file.input");
       this.helper.when.wait(200);
     },
     setStyle: (
-      styleProperties: "geojson" | "raster" | "both" | "layer" | "rectangles" | "font" | "",
+      styleProperties: "geojson" | "raster" | "both" | "layer" | "rectangles" | "font" | "zoom_7_center_0_51" | "",
       zoom?: number
     ) => {
       const url = new URL(baseUrl);
@@ -149,6 +170,9 @@ export class MaputnikDriver {
         case "font":
           url.searchParams.set("style", baseUrl + "example-style-with-fonts.json");
           break;
+        case "zoom_7_center_0_51":
+          url.searchParams.set("style", baseUrl + "example-style-with-zoom-7-and-center-0-51.json");
+          break;
       }
 
       if (zoom) {

cypress/fixtures/example-style-with-zoom-5-and-center-50-50.json

@@ -0,0 +1,19 @@
+{
+    "id": "test-style",
+    "center": [50,50],
+    "zoom": 5,
+    "version": 8,
+    "name": "Test Style",
+    "sources": {
+        "rectangles": {
+        "type": "geojson",
+        "data": {
+            "type": "FeatureCollection",
+            "features": []
+        }
+      }
+    },
+    "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
+    "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
+    "layers": []
+}

cypress/fixtures/example-style-with-zoom-7-and-center-0-51.json

@@ -0,0 +1,17 @@
+{
+    "id": "test-style",
+    "center": [0,51],
+    "zoom": 7,
+    "version": 8,
+    "name": "Test Style",
+    "sources": {
+        "rectangles": {
+        "type": "geojson",
+        "data": {
+            "type": "FeatureCollection",
+            "features": []
+        }
+      }
+    },
+    "layers": []
+}