From b54746c74cde0c1610a4fb6d3a2f60e6542359ee Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Fri, 17 Apr 2026 18:40:52 +0300
Subject: [PATCH] Fix flights-map tile URL to Angular parity
 /map/api/tile/{z}/{x}/{y}.jpeg

The tile URL was built as `${env.API_BASE_URL}/tiles/{z}/{x}/{y}.png`,
which has three problems on a real deployment:

1. Wrong path segment: the backend serves tiles under /map/api/tile/
   (singular), not /tiles/.
2. Wrong extension: the backend emits .jpeg, not .png.
3. Wrong base: API_BASE_URL may be empty or point at the JSON API host.
   Tiles are served by a dedicated upstream behind the same reverse
   proxy that fronts the React SSR, so they must be same-origin and
   relative (matches Angular environment.mapApiUrl).

With this fix, the map renders its base tiles on the deployed site
instead of issuing doomed requests and showing a blank canvas behind
the markers. The Leaflet marker layer was already rendering; only the
tile layer was missing.
---
 .../flights-map/components/FlightsMapStartPage.tsx       | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/features/flights-map/components/FlightsMapStartPage.tsx b/src/features/flights-map/components/FlightsMapStartPage.tsx
index 7aeed86f..cb32012c 100644
--- a/src/features/flights-map/components/FlightsMapStartPage.tsx
+++ b/src/features/flights-map/components/FlightsMapStartPage.tsx
@@ -23,7 +23,6 @@ import { routesToPolylines, intermediateCityIds } from "../routesToPolylines.js"
 import { filterRoutes } from "../filterRoutes.js";
 import { buildBuyTicketUrl, escapeHtml } from "../buyTicketUrl.js";
 import { useDictionaries, getCityCodeByAirportCode } from "@/shared/dictionaries/index.js";
-import { getEnv } from "@/env/index.js";
 import { getCityZoomLevel } from "../cityCategory.js";
 import type {
   IFlightsMapFilterState,
@@ -68,7 +67,6 @@ function addMonthsYyyymmdd(base: string, months: number): string {
 // ---------------------------------------------------------------------------
 
 export const FlightsMapStartPage: FC = () => {
-  const env = getEnv();
   const { t } = useTranslation();
   const routeParams = useParams<{ lang: string }>();
   const lang = routeParams.lang ?? "ru";
@@ -268,8 +266,11 @@ export const FlightsMapStartPage: FC = () => {
     t,
   ]);
 
-  // Tile URL from env or default
-  const tileUrl = `${env.API_BASE_URL}/tiles/{z}/{x}/{y}.png`;
+  // Tile URL — same-origin path served by the reverse proxy upstream of the
+  // SSR app. Matches Angular's environment.mapApiUrl. Must NOT be prefixed
+  // with API_BASE_URL because tiles come from a different backend route
+  // than the JSON API, and the path is absolute at the origin.
+  const tileUrl = "/map/api/tile/{z}/{x}/{y}.jpeg";
 
   return (
     <div className="flights-map-start-page" data-testid="flights-map-start">