use maptiler satellite

website/src/lib/assets/custom/satellite.json

@@ -5,21 +5,18 @@
       "type": "vector",
       "url": "https://gpxstudio.xyz/openmaptiles.json"
     },
-    "esri": {
-      "type": "raster",
-      "tiles": ["https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS/tile/1.0.0/World_Imagery/default/default028mm/{z}/{y}/{x}.jpg"],
-      "tileSize": 256,
-      "maxzoom": 19,
-      "attribution": "© <a href=\"https://www.esri.com/\" target=\"_blank\">Esri</a>, Vantor, Earthstar Geographics, and the GIS User Community"
+    "maptiler": {
+      "url":"https://api.maptiler.com/tiles/satellite-v2/tiles.json?key=MAPTILER_KEY",
+      "type":"raster"
     }
   },
   "sprite": "https://tiles.openfreemap.org/sprites/ofm_f384/ofm",
   "glyphs": "https://tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf",
   "layers": [
     {
-      "id": "esri",
+      "id": "maptiler",
       "type": "raster",
-      "source": "esri"
+      "source": "maptiler"
     },
 
     {

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

@@ -199,6 +199,18 @@ 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;
         }
     }