get styles from github

website/src/lib/assets/layers.ts

@@ -27,14 +27,12 @@ import ignFrTopo from './custom/ign-fr-topo.json';
 import ignFrPlan from './custom/ign-fr-plan.json';
 import ignFrSatellite from './custom/ign-fr-satellite.json';
 import bikerouterGravel from './custom/bikerouter-gravel.json';
-import topo from './custom/topo.json';
-import satellite from './custom/satellite.json';
 
 export const maptilerKeyPlaceHolder = 'MAPTILER_KEY';
 
 export const basemaps: { [key: string]: string | StyleSpecification } = {
-    topo: topo as StyleSpecification,
-    satellite: satellite as StyleSpecification,
+    topo: 'https://raw.githubusercontent.com/gpxstudio/styles/refs/heads/main/topo.json',
+    satellite: 'https://raw.githubusercontent.com/gpxstudio/styles/refs/heads/main/satellite.json',
     esriSatellite: {
         version: 8,
         sources: {

website/src/lib/components/map/style.ts

@@ -91,6 +91,18 @@ export class StyleManager {
         let basemapStyle = basemaps.openStreetMap as maplibregl.StyleSpecification;
         try {
             basemapStyle = await this.get(basemapInfo);
+            for (const source in basemapStyle.sources) {
+                const src = basemapStyle.sources[source];
+                if (
+                    src &&
+                    typeof src === 'object' &&
+                    'url' in src &&
+                    typeof src.url === 'string' &&
+                    src.url.includes(maptilerKeyPlaceHolder)
+                ) {
+                    src.url = src.url.replace(maptilerKeyPlaceHolder, this._maptilerKey);
+                }
+            }
         } catch (e) {
             console.error(e.message);
         }
@@ -199,18 +211,6 @@ export class StyleManager {
             const style = await response.json();
             return style;
         } else {
-            for (const source in styleInfo.sources) {
-                const src = styleInfo.sources[source];
-                if (
-                    src &&
-                    typeof src === 'object' &&
-                    'url' in src &&
-                    typeof src.url === 'string' &&
-                    src.url.includes(maptilerKeyPlaceHolder)
-                ) {
-                    src.url = src.url.replace(maptilerKeyPlaceHolder, this._maptilerKey);
-                }
-            }
             return styleInfo;
         }
     }