Update layers

VATSIM-Radar · Jan 17, 2025 · 423b344 · 423b344
1 parent d730c2f
commit 423b344
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 8 deletions.
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -151,6 +151,33 @@ export default defineNuxtConfig({
             '/layers/esri/**': {
                 proxy: 'https://ibasemaps-api.arcgis.com/**',
             },
+            '/layers/carto/basemaps/**': {
+                proxy: {
+                    to: 'https://a.basemaps.cartocdn.com/**',
+                    headers: {
+                        Referer: 'https://do.vatsim-radar.com/',
+                        Origin: 'https://do.vatsim-radar.com',
+                    },
+                },
+            },
+            '/layers/carto/tiles/**': {
+                proxy: {
+                    to: 'https://tiles.basemaps.cartocdn.com/**',
+                    headers: {
+                        Referer: 'https://do.vatsim-radar.com/',
+                        Origin: 'https://do.vatsim-radar.com',
+                    },
+                },
+            },
+            '/layers/carto/vector/**': {
+                proxy: {
+                    to: 'https://tiles-a.basemaps.cartocdn.com/**',
+                    headers: {
+                        Referer: 'https://do.vatsim-radar.com/',
+                        Origin: 'https://do.vatsim-radar.com',
+                    },
+                },
+            },
         },
     },
     devServer: {

diff --git a/src/components/map/MapLayer.vue b/src/components/map/MapLayer.vue
@@ -18,6 +18,7 @@ import VectorSource from 'ol/source/Vector';
 import { Fill, Style } from 'ol/style';
 import VectorImageLayer from 'ol/layer/VectorImage';
 import { isVatGlassesActive } from '~/utils/data/vatglasses';
+import { isProductionMode } from '~/utils/shared';
 
 defineSlots<{ default: () => any }>();
 
@@ -68,6 +69,17 @@ const layer = computed<Layer | IVectorLayer>(() => {
 
     if (layer === 'OSM' && store.theme !== 'light') layer = 'carto';
 
+    if (layer === 'Satellite' && isProductionMode()) {
+        layer = 'carto';
+        setUserLocalSettings({
+            filters: {
+                layers: {
+                    layer: 'carto',
+                },
+            },
+        });
+    }
+
     if (layer === 'basic') {
         return {
             url: 'basic',
@@ -84,8 +96,8 @@ const layer = computed<Layer | IVectorLayer>(() => {
                     title: 'CartoDB',
                     url: 'https://cartodb.com/attribution',
                 },
-                url: `https://a.basemaps.cartocdn.com/${ isLabels ? 'dark_all' : 'dark_nolabels' }/{z}/{x}/{y}.png`,
-                lightThemeUrl: `https://a.basemaps.cartocdn.com/${ isLabels ? 'light_all' : 'light_nolabels' }/{z}/{x}/{y}.png`,
+                url: `/layers/carto/basemaps/${ isLabels ? 'dark_all' : 'dark_nolabels' }/{z}/{x}/{y}.png`,
+                lightThemeUrl: `/layers/carto/basemaps/${ isLabels ? 'light_all' : 'light_nolabels' }/{z}/{x}/{y}.png`,
             };
         }
         else {
@@ -94,8 +106,8 @@ const layer = computed<Layer | IVectorLayer>(() => {
                     title: 'CartoDB',
                     url: 'https://cartodb.com/attribution',
                 },
-                url: `https://basemaps.cartocdn.com/gl/dark-matter${ isLabels ? '' : '-nolabels' }-gl-style/style.json`,
-                lightThemeUrl: `https://basemaps.cartocdn.com/gl/positron${ isLabels ? '' : '-nolabels' }-gl-style/style.json`,
+                url: `/api/data/carto/dark-matter${ isLabels ? '' : '-nolabels' }-gl-style`,
+                lightThemeUrl: `/api/data/carto/positron${ isLabels ? '' : '-nolabels' }-gl-style`,
                 vector: true,
             };
         }

diff --git a/src/components/map/filters/MapFilters.vue b/src/components/map/filters/MapFilters.vue
@@ -277,7 +277,7 @@ import CommonBlockTitle from '~/components/common/blocks/CommonBlockTitle.vue';
 import CommonToggle from '~/components/common/basic/CommonToggle.vue';
 import MapSettings from '~/components/map/filters/settings/MapSettings.vue';
 import type { IUserMapSettings, UserMapSettings } from '~/utils/backend/handlers/map-settings';
-import { MAX_FILTERS, MAX_MAP_PRESETS } from '~/utils/shared';
+import { isProductionMode, MAX_FILTERS, MAX_MAP_PRESETS } from '~/utils/shared';
 import CommonTooltip from '~/components/common/basic/CommonTooltip.vue';
 import MapFiltersTraffic from '~/components/map/filters/MapFiltersTraffic.vue';
 import { saveMapSettings } from '~/composables/settings';
@@ -307,7 +307,7 @@ const importedPreset = shallowRef<UserMapSettings | false | null>(null);
 const importedPresetName = ref('');
 const isMobile = useIsMobile();
 
-const mapLayers: RadioItemGroup<MapLayoutLayerExternalOptions>[] = [
+let mapLayers: RadioItemGroup<MapLayoutLayerExternalOptions>[] = [
     {
         value: 'carto',
         text: 'CartoDB',
@@ -328,6 +328,8 @@ const mapLayers: RadioItemGroup<MapLayoutLayerExternalOptions>[] = [
     },
 ];
 
+if (isProductionMode()) mapLayers = mapLayers.filter(x => x.value !== 'Satellite');
+
 const radarIsCarto = computed(() => !mapLayers.some(x => x.value === store.localSettings.filters?.layers?.layer) ||
     store.localSettings.filters?.layers?.layer?.startsWith('carto') ||
     (store.localSettings.filters?.layers?.layer === 'OSM' && store.theme !== 'light'));
@@ -430,12 +432,12 @@ const weatherLayers: RadioItemGroup<MapWeatherLayer | 'false'>[] = [
 
     &__warning {
         padding: 10px;
-        border-radius: 8px;
 
         font-size: 11px;
         color: $lightgray150;
 
         background: $darkgray850;
+        border-radius: 8px;
     }
 
     &_toggle {
@@ -508,7 +510,6 @@ const weatherLayers: RadioItemGroup<MapWeatherLayer | 'false'>[] = [
 
         margin-bottom: 8px;
         padding: 8px 4px;
-        border-radius: 4px;
 
         font-family: $openSansFont;
         font-size: 14px;
@@ -518,6 +519,7 @@ const weatherLayers: RadioItemGroup<MapWeatherLayer | 'false'>[] = [
         text-decoration: none;
 
         background: #48484a;
+        border-radius: 4px;
 
         &_image {
             max-width: 40%;

diff --git a/src/server/api/data/carto/[...style].ts b/src/server/api/data/carto/[...style].ts
@@ -0,0 +1,29 @@
+import { getRedisSync, setRedisSync } from '~/utils/backend/redis';
+import { handleH3Error } from '~/utils/backend/h3';
+
+export default defineEventHandler(async event => {
+    const style = getRouterParam(event, 'style');
+
+    if (!style) {
+        return handleH3Error({
+            event,
+            statusCode: 400,
+        });
+    }
+
+    const data = await getRedisSync(`carto-${ style }`);
+
+    if (data) {
+        setResponseHeader(event, 'Content-Type', 'application/json');
+        return data;
+    }
+
+    const result = await $fetch<Record<string, any>>(`https://basemaps.cartocdn.com/gl/${ style }/style.json`);
+    result.sources.carto.url = '/api/data/carto/tiles';
+    result.sprite = result.sprite.replace('https://tiles.basemaps.cartocdn.com/', '/layers/carto/tiles/');
+    result.glyphs = result.glyphs.replace('https://tiles.basemaps.cartocdn.com/', '/layers/carto/tiles/');
+
+    await setRedisSync(`carto-${ style }`, JSON.stringify(result), 1000 * 60 * 60 * 24 * 7);
+
+    return result;
+});
diff --git a/src/server/api/data/carto/tiles.ts b/src/server/api/data/carto/tiles.ts
@@ -0,0 +1,17 @@
+import { getRedisSync, setRedisSync } from '~/utils/backend/redis';
+
+export default defineEventHandler(async event => {
+    const data = await getRedisSync(`carto-tiles`);
+
+    if (data) {
+        setResponseHeader(event, 'Content-Type', 'application/json');
+        return data;
+    }
+
+    const result = await $fetch<Record<string, any>>(`https://tiles.basemaps.cartocdn.com/vector/carto.streets/v1/tiles.json`);
+    result.tiles = ['/layers/carto/vector/vectortiles/carto.streets/v1/{z}/{x}/{y}.mvt'];
+
+    await setRedisSync(`carto-tiles`, JSON.stringify(result), 1000 * 60 * 60 * 24 * 7);
+
+    return result;
+});
diff --git a/src/utils/backend/redis.ts b/src/utils/backend/redis.ts
@@ -11,3 +11,19 @@ export function getRedis() {
         autoResubscribe: true,
     });
 }
+
+export const defaultRedis = getRedis();
+
+export function getRedisSync(key: string) {
+    return new Promise<string | null | undefined>((resolve, reject) => defaultRedis.get(key, (err, result) => {
+        if (err) return reject(err);
+        resolve(result);
+    }));
+}
+
+export function setRedisSync(key: string, data: string, expiration: number) {
+    return new Promise<void>((resolve, reject) => defaultRedis.set(key, data, 'PX', expiration, (err, result) => {
+        if (err) return reject(err);
+        resolve();
+    }));
+}
diff --git a/src/utils/shared/index.ts b/src/utils/shared/index.ts
@@ -23,6 +23,10 @@ export function isFetchError<T>(error: unknown): error is FetchError<T> {
     return !!error && typeof error === 'object' && 'request' in error && 'response' in error;
 }
 
+export function isProductionMode() {
+    return typeof process !== 'undefined' ? process.env.DOMAIN === 'https://vatsim-radar.com' : useRuntimeConfig().public.DOMAIN === 'https://vatsim-radar.com';
+}
+
 export function isRunwayEast(runway: string | number) {
     if (typeof runway === 'string') runway = parseInt(runway, 10);