layers: Add bing satellite (#155)

* layers: Add bing satellite

* maxzoom

* locales

src/components/LayerSwitcher/osmappLayers.tsx

@@ -36,12 +36,20 @@ export const osmappLayers: Layers = {
     attribution: ['osm'],
   },
   sat: {
-    name: t('layers.sat'),
+    name: t('layers.maptilerSat'),
     type: 'basemap',
     url: 'https://api.maptiler.com/tiles/satellite-v2/tiles.json?key=7dlhLl3hiXQ1gsth0kGu',
     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: ['&copy; <a href="https://www.bing.com/maps">Microsoft</a>'],
+    maxzoom: 19,
+  },
   // mtb: {
   //   name: t('layers.mtb'),
   //   type: 'basemap',

src/components/Map/behaviour/useUpdateStyle.tsx

@@ -12,6 +12,7 @@ export const getRasterLayer = (key) => {
 
 export const useUpdateStyle = useMapEffect((map, activeLayers) => {
   const key = activeLayers[0] ?? DEFAULT_MAP;
+  map.setMaxZoom(osmappLayers[key]?.maxzoom ?? 24); // TODO find a way how to zoom bing further (now it stops at 19)
   map.setStyle(
     key === 'basic'
       ? basicStyle

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,

src/components/utils/MapStateContext.tsx

@@ -9,6 +9,7 @@ export interface Layer {
   key?: string;
   Icon?: React.FC<any>;
   attribution?: string[]; // missing in spacer TODO refactor ugly
+  maxzoom?: number;
 }
 
 // // [b.getWest(), b.getNorth(), b.getEast(), b.getSouth()]

src/locales/am.js

@@ -143,6 +143,7 @@ export default {
   'layers.mtb': 'MTB',
   'layers.snow': 'በረዶ',
   'layers.mapnik': 'OSM Mapnik',
-  'layers.sat': 'ሳተላይት (z<14)',
+  'layers.maptilerSat': 'Maptiler ሳተላይት (z<14)',
+  'layers.bingSat': 'Bing ሳተላይት',
   'layers.bike': 'ሳይክል',
 };

src/locales/cs.js

@@ -148,6 +148,7 @@ export default {
   'layers.mtb': 'MTB',
   'layers.snow': 'Zimní',
   'layers.mapnik': 'OSM Mapnik',
-  'layers.sat': 'Satelitní',
+  'layers.maptilerSat': 'Letecká Maptiler ',
+  'layers.bingSat': 'Letecká Bing',
   'layers.bike': 'Cyklo',
 };

src/locales/de.js

@@ -151,6 +151,7 @@ export default {
   'layers.mtb': 'MTB',
   'layers.snow': 'Schnee',
   'layers.mapnik': 'OSM Mapnik',
-  'layers.sat': 'Satellit (z<14)',
+  'layers.maptilerSat': 'Maptiler Satellit (z<14)',
+  'layers.bingSat': 'Bing Satellit',
   'layers.bike': 'Fahrrad',
 };

src/locales/es.js

@@ -24,7 +24,7 @@ export default {
   'homepage.examples.eg': 'ej.',
   'homepage.examples.charles_bridge_statues': 'Estatuas del puente Charles',
   'homepage.screenshot_alt': 'Pantallazo de OsmAPP',
-  'homepage.about_osm': `Todos los datos del mapa son de 
+  'homepage.about_osm': `Todos los datos del mapa son de
       <a href="https://osm.org">OpenStreetMap</a>, un mapa creado por
       millones de contribuidores — similar a Wikipedia. Puedes encontrar el
       botón <em>Editar</em> en cada elemento del mapa.`,
@@ -106,9 +106,9 @@ export default {
   'editdialog.comment': 'Commentar (opcional)',
   'editdialog.comment_placeholder': 'enlace a la fuente de la información etc.',
   'editdialog.info_edit': `Tu edición será guardada inmediatamente en OpenStreetMap. Por favor,
-         introduce únicamente información que tú poseas o que venga de fuentes verificadas. Está prohibido 
+         introduce únicamente información que tú poseas o que venga de fuentes verificadas. Está prohibido
          copiar información con derechos de autor (por ej. Google Maps). <a href="https://wiki.openstreetmap.org/wiki/ES:C%C3%B3mo_mapeamos">Más información</a>`,
-  'editdialog.info_note': `Tu sugerencia será procesada por voluntarios de OpenStreetMap volunteers. Aquí 
+  'editdialog.info_note': `Tu sugerencia será procesada por voluntarios de OpenStreetMap volunteers. Aquí
          puedes añadir una nota adicional o describir un ajuste de la posición, etc
         También es apropiado apoyar tu contribución con un enlace a la fuente de la información (web,
          foto, etc.).`,
@@ -117,7 +117,7 @@ export default {
   'editdialog.other_tags.add': 'Añadir otra etiqueta',
   'editdialog.other_tags.will_be_deleted': 'será borrado',
   'editdialog.other_tags.info': `Las Etiquetas describen las propiedades
-        de cada elemento del mapa en un formato acordado. Aquí puedes encontrar una 
+        de cada elemento del mapa en un formato acordado. Aquí puedes encontrar una
         <a href="https://wiki.openstreetmap.org/wiki/ES:Objetos_del_mapa">descripción general de todas las etiquetas en OpenStreetMap</a>.`,
 
   'editsuccess.close_button': 'Cerrar',
@@ -151,6 +151,7 @@ export default {
   'layers.mtb': 'BTT',
   'layers.snow': 'Nieve',
   'layers.mapnik': 'OSM Mapnik',
-  'layers.sat': 'Satélite (z<14)',
+  'layers.maptilerSat': 'Maptiler Satélite (z<14)',
+  'layers.bingSat': 'Bing Satélite',
   'layers.bike': 'Bici',
 };

src/locales/fr.js

@@ -154,6 +154,7 @@ export default {
   'layers.mtb': 'VTT',
   'layers.snow': 'Neige',
   'layers.mapnik': 'OSM Mapnik',
-  'layers.sat': 'Satellite (zoom < 14)',
+  'layers.maptilerSat': 'Maptiler Satellite (zoom < 14)',
+  'layers.bingSat': 'Bing Satellite',
   'layers.bike': 'Vélo',
 };

src/locales/it.js

@@ -110,7 +110,7 @@ export default {
          È proibita la copia di dati protetti da copyright (ad es. Google Maps). <a href="https://wiki.openstreetmap.org/wiki/IT:How_We_Map">Ulteriori informazioni</a>`,
   'editdialog.info_note': `Il tuo suggerimento verrà valutato dai volontari di OpenStreetMap. Qua
          puoi aggiungere un’ulteriore nota oppure descrivere la posizione precisa, etc.
-         Sarebbe anche appropriato supportare il tuo contributo con un link ad una fonte (sito web, 
+         Sarebbe anche appropriato supportare il tuo contributo con un link ad una fonte (sito web,
          foto, etc.).`,
   'editdialog.other_tags': 'Altre proprietà (etichette)',
   'editdialog.other_tags.new_key': 'nuova chiave',
@@ -151,6 +151,7 @@ export default {
   'layers.mtb': 'MTB',
   'layers.snow': 'Neve',
   'layers.mapnik': 'OSM Mapnik',
-  'layers.sat': 'Satellite (z<14)',
+  'layers.maptilerSat': 'Maptiler Satellite (z<14)',
+  'layers.bingSat': 'Bing Satellite',
   'layers.bike': 'Bici',
 };

src/locales/pl.js

@@ -150,6 +150,7 @@ export default {
   'layers.mtb': 'MTB',
   'layers.snow': 'Śnieg',
   'layers.mapnik': 'OSM Mapnik',
-  'layers.sat': 'Satelita (p<14)',
+  'layers.maptilerSat': 'Maptiler Satelita (p<14)',
+  'layers.bingSat': 'Bing Satelita',
   'layers.bike': 'Rower',
 };

src/locales/vocabulary.js

@@ -154,7 +154,7 @@ export default {
   'layers.mtb': 'MTB',
   'layers.snow': 'Snow',
   'layers.mapnik': 'OSM Mapnik',
-  'layers.sat': 'Satellite (z<14)',
-  'layers.bingSat': 'Bing satellite',
+  'layers.maptilerSat': 'Maptiler Satellite (z<14)',
+  'layers.bingSat': 'Bing Satellite',
   'layers.bike': 'Bike',
 };