From f24031dd5c4d6c5a9aea7fff472fc915e1e479c9 Mon Sep 17 00:00:00 2001
From: Lukas Weber <32765578+lukasalexanderweber@users.noreply.github.com>
Date: Tue, 20 Jan 2026 06:45:21 +0100
Subject: [PATCH] fix root relative paths (#1643)

## Launch Checklist

this is a follow up to https://github.com/maplibre/maputnik/pull/1549

when testing this, I only used raster tiles. However root relative
vector tiles are not loaded correctly by maplibre gl js:
https://github.com/maplibre/maplibre-gl-js/issues/6818

The current state is problematic as with
https://github.com/maplibre/maputnik/pull/1549 we don't have the visuals
that the url is wrong.

Till [the maplibre
issue](https://github.com/maplibre/maplibre-gl-js/issues/6818) is fixed
(if it even need to be fixed), we can make use of
[transformRequest](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/#transformrequest)
where we convert root relative requests to "real" requests

 - [x] Briefly describe the changes in this PR.
 - [x] Link to related issues.
- [x] Include before/after visuals or gifs if this PR includes visual
changes -> in maplibre ticket
---
 src/components/MapMaplibreGl.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/MapMaplibreGl.tsx b/src/components/MapMaplibreGl.tsx
index 1ef080b8..4b3f0c2d 100644
--- a/src/components/MapMaplibreGl.tsx
+++ b/src/components/MapMaplibreGl.tsx
@@ -139,6 +139,15 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
       style: this.props.mapStyle,
       hash: true,
       maxZoom: 24,
+      // make root relative urls in stylefiles work as maplibre gl js does
+      // not support this for everything:
+      // https://github.com/maplibre/maplibre-gl-js/issues/6818
+      transformRequest: (url) => {
+        if (url.startsWith("/")) {
+          url = `${window.location.origin}${url}`;
+        }
+        return { url };
+      },
       // setting to always load glyphs of CJK fonts from server
       // https://maplibre.org/maplibre-gl-js/docs/examples/local-ideographs/
       localIdeographFontFamily: false