fix: resolve MapLibre worker rendering regression by configuring custom worker and updating geometry type filters

This commit is contained in:
Hamza-Ayed
2026-09-24 18:49:40 +03:00
parent 043cd052b6
commit cb91e5f0de
6 changed files with 497 additions and 274 deletions
+1 -1
View File
@@ -11,7 +11,7 @@ export class AdminGuard implements CanActivate {
throw new UnauthorizedException('Tenant not found in request');
}
if (tenant.plan !== TenantPlan.ENTERPRISE && tenant.role !== TenantRole.ADMIN) {
if (tenant.plan !== TenantPlan.ENTERPRISE && tenant.role !== 'ADMIN') {
throw new ForbiddenException('Admin access required. Your tenant must have an ENTERPRISE plan or ADMIN clearance.');
}
+3 -3
View File
@@ -198,7 +198,7 @@ const MapComponent: React.FC<MapProps> = ({
id: 'los-line',
type: 'line',
source: 'los-source',
filter: ['==', '$type', 'LineString'],
filter: ['==', ['geometry-type'], 'LineString'],
layout: { 'line-cap': 'round', 'line-join': 'round' },
paint: {
'line-color': '#f59e0b',
@@ -211,7 +211,7 @@ const MapComponent: React.FC<MapProps> = ({
id: 'los-points',
type: 'circle',
source: 'los-source',
filter: ['==', '$type', 'Point'],
filter: ['==', ['geometry-type'], 'Point'],
paint: {
'circle-radius': 8,
'circle-color': [
@@ -230,7 +230,7 @@ const MapComponent: React.FC<MapProps> = ({
id: 'los-labels',
type: 'symbol',
source: 'los-source',
filter: ['==', '$type', 'Point'],
filter: ['==', ['geometry-type'], 'Point'],
layout: {
'text-field': ['get', 'label'],
'text-size': 12,
+1 -1
View File
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom/client'
import maplibregl from 'maplibre-gl'
import maplibregl from './utils/maplibreWorker'
import App from './App.tsx'
import CompareView from './pages/CompareView'
import IntelligenceDashboard from './pages/IntelligenceDashboard'
File diff suppressed because it is too large Load Diff
+10
View File
@@ -0,0 +1,10 @@
import maplibregl from 'maplibre-gl';
import workerUrl from 'maplibre-gl/dist/maplibre-gl-csp-worker.js?url';
// MapLibre 5 serializes its embedded worker from functions. Vite's class-field
// transform injects __publicField outside those functions, leaving GeoJSON
// workers with an undefined helper. Serve the matching standalone worker as an
// untransformed asset in both development and production, before any map exists.
maplibregl.setWorkerUrl(workerUrl);
export default maplibregl;
+48
View File
@@ -0,0 +1,48 @@
# GeoJSON overlay rendering regression
The tactical calculations return geometry, but MapLibre's GeoJSON worker fails
with `__publicField is not defined`. HTML markers and vector basemap tiles still
render, so the UI appears functional while all GeoJSON overlays remain invisible.
## Cause
Commit `0bf1382` changed Vite 8.0.1 to 6.4.3 (and the React plugin to 4.7.0).
The current optimized MapLibre 5.20.2 bundle imports `__publicField` outside the
functions that MapLibre serializes into its embedded worker. The GeoJSON indexing
code references that helper inside the worker, where it does not exist.
Changing geometry filters, opacity, layer order, or camera bounds cannot repair
this worker failure.
## Fix
`src/utils/maplibreWorker.ts` loads the installed MapLibre 5 standalone CSP worker
using Vite's asset URL import and calls `setWorkerUrl` before React creates maps.
`src/main.tsx` imports this configured MapLibre instance. Other components share
the same underlying MapLibre module. No API or geometry calculation change is
required.
The `?url` import is intentional for this self-contained MapLibre 5 worker: it
preserves the vendor file without transpilation. Revisit the worker entry point
if upgrading MapLibre to a new major version.
## Verification (2026-09-24)
- Reproduced the missing overlays on the official tactical site, and confirmed
its Isochrone API returned three valid Polygon features.
- A minimal map with an empty base style and a fixed line/polygon reproduced the
same failure: zero source/rendered features and `__publicField is not defined`.
- With the standalone worker, that same map visibly drew both geometries, with
eight tile-level source/rendered feature entries and no worker error.
- Tested the modified tactical UI locally, proxying API requests to the official
service: terrain overlays, the 10.9 km² / 14% viewshed, and colored Isochrone
regions rendered. Temporary diagnostic geometry was removed afterward.
- `npm run build` succeeds. The emitted standalone worker is byte-identical to
the installed vendor worker.
## Deployment
Deploy `apps/web/src/main.tsx` and `apps/web/src/utils/maplibreWorker.ts` together.
The observed official site serves Vite development modules; restart its web
service and reload the browser after deploying. For a production build, deploy
the complete `dist` output, including the emitted worker asset. The live site
has not been changed by this local fix.