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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user