diff --git a/src/components/LayerSwitcher/osmappLayers.tsx b/src/components/LayerSwitcher/osmappLayers.tsx index 2a50ba32a..1d7f71548 100644 --- a/src/components/LayerSwitcher/osmappLayers.tsx +++ b/src/components/LayerSwitcher/osmappLayers.tsx @@ -42,6 +42,13 @@ export const osmappLayers: Layers = { Icon: SatelliteIcon, attribution: ['maptiler'], }, + bingSat: { + name: t('layers.bingSat'), + type: 'basemap', + url: 'https://ecn.{bingSubdomains}.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=13657', + Icon: SatelliteIcon, + attribution: ['bing'], + }, // mtb: { // name: t('layers.mtb'), // type: 'basemap', diff --git a/src/components/Map/styles/rasterStyle.ts b/src/components/Map/styles/rasterStyle.ts index e0e999e5a..13ceef1bc 100644 --- a/src/components/Map/styles/rasterStyle.ts +++ b/src/components/Map/styles/rasterStyle.ts @@ -1,14 +1,28 @@ import maplibregl from 'maplibre-gl'; import { GLYPHS, OSMAPP_SOURCES, OSMAPP_SPRITE } from '../consts'; +const getSource = (url) => { + if (url.match('{bingSubdomains}')) { + return { + tiles: ['t0', 't1', 't2', 't3'].map((c) => + url?.replace('{bingSubdomains}', c), + ), + }; + } + + if (url.match('{x}')) { + return { + tiles: ['a', 'b', 'c'].map((c) => url?.replace('{s}', c)), + }; + } + + return { + url, // url as a tileset.json + }; +}; + export const rasterStyle = (id, url): maplibregl.Style => { - const source = url.match('{x}') - ? { - tiles: ['a', 'b', 'c'].map((c) => url?.replace('{s}', c)), - } - : { - url, // tileset.json - }; + const source = getSource(url); return { version: 8, sprite: OSMAPP_SPRITE,