diff --git a/e2e/test/scenarios/visualizations/reproductions/30058-map-crash.cy.spec.js b/e2e/test/scenarios/visualizations/reproductions/30058-map-crash.cy.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..362ed9cf3be66fc182bbc6c49a1074e93230e601
--- /dev/null
+++ b/e2e/test/scenarios/visualizations/reproductions/30058-map-crash.cy.spec.js
@@ -0,0 +1,61 @@
+import { popover, restore, visitQuestionAdhoc } from "e2e/support/helpers";
+
+import { SAMPLE_DB_ID } from "e2e/support/cypress_data";
+import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
+
+const { PEOPLE, PEOPLE_ID } = SAMPLE_DATABASE;
+
+const testQuery = {
+  type: "query",
+  query: {
+    "source-query": {
+      "source-table": PEOPLE_ID,
+      aggregation: [["count"]],
+      breakout: [
+        [
+          "field",
+          PEOPLE.LATITUDE,
+          { "base-type": "type/Float", binning: { strategy: "default" } },
+        ],
+        [
+          "field",
+          PEOPLE.LONGITUDE,
+          { "base-type": "type/Float", binning: { strategy: "default" } },
+        ],
+      ],
+    },
+  },
+  database: SAMPLE_DB_ID,
+};
+
+describe("issue 30058", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsNormalUser();
+  });
+
+  it("visualization does not crash after adding a filter (metabase#30058)", () => {
+    visitQuestionAdhoc({
+      dataset_query: testQuery,
+      display: "map",
+      displayIsLocked: true,
+    });
+
+    cy.icon("notebook").click();
+    cy.button("Filter").click();
+    popover().within(() => {
+      cy.findByText("Count").click();
+      cy.icon("chevrondown").click();
+    });
+    cy.findByTestId("operator-select-list").findByText("Greater than").click();
+    popover().within(() => {
+      cy.findByPlaceholderText("Enter a number").type("2");
+      cy.findByText("Add filter").click();
+    });
+
+    cy.button("Visualize").click();
+    cy.wait("@dataset");
+
+    cy.get(".Icon-warning").should("not.exist");
+  });
+});
diff --git a/frontend/src/metabase-types/api/mocks/settings.ts b/frontend/src/metabase-types/api/mocks/settings.ts
index f4964cb4783523db2ef278cea6084c2941f867af..06a249433cd7dca7849f77cbc71934779f785f68 100644
--- a/frontend/src/metabase-types/api/mocks/settings.ts
+++ b/frontend/src/metabase-types/api/mocks/settings.ts
@@ -163,6 +163,7 @@ export const createMockSettings = (opts?: Partial<Settings>): Settings => ({
   "ldap-configured?": false,
   "ldap-enabled": false,
   "loading-message": "doing-science",
+  "map-tile-server-url": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
   "openai-api-key": null,
   "openai-organization": null,
   "openai-model": null,
diff --git a/frontend/src/metabase-types/api/settings.ts b/frontend/src/metabase-types/api/settings.ts
index 6915955c22aa123444c10235a9ec5b1208daec66..4fc600c088490961a7b4cca004dadbdfa9425303 100644
--- a/frontend/src/metabase-types/api/settings.ts
+++ b/frontend/src/metabase-types/api/settings.ts
@@ -205,6 +205,7 @@ export interface Settings {
   "ldap-configured?": boolean;
   "ldap-enabled": boolean;
   "loading-message": LoadingMessage;
+  "map-tile-server-url": string;
   "openai-api-key": string | null;
   "openai-organization": string | null;
   "openai-model": string | null;
diff --git a/frontend/src/metabase/visualizations/components/LeafletGridHeatMap.jsx b/frontend/src/metabase/visualizations/components/LeafletGridHeatMap.jsx
index e2d57be15b1a74adc2bc95606880d15055f1383d..ccbc0eb679a3501d4cf70b229a928726b6a0596f 100644
--- a/frontend/src/metabase/visualizations/components/LeafletGridHeatMap.jsx
+++ b/frontend/src/metabase/visualizations/components/LeafletGridHeatMap.jsx
@@ -66,8 +66,6 @@ export default class LeafletGridHeatMap extends LeafletMap {
       const longitureValues = points.map(row => row[longitudeIndex]);
 
       for (let i = 0; i < totalSquares; i++) {
-        const [latitude, longiture, metric] = points[i];
-
         if (i >= points.length) {
           gridLayer.removeLayer(gridSquares[i]);
         }
@@ -78,6 +76,8 @@ export default class LeafletGridHeatMap extends LeafletMap {
         }
 
         if (i < points.length) {
+          const [latitude, longiture, metric] = points[i];
+
           gridSquares[i].setStyle({ color: colorScale(metric) });
 
           const [latMin, latMax] = getValueRange(