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.
This commit is contained in:
2026-04-17 18:40:52 +03:00
parent 6a7bbe2ce6
commit b54746c74c
@@ -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">