LayerSwitcher: add ČÚZK + filter by bbox (#245)

src/components/LayerSwitcher/LayerSwitcherContent.tsx

@@ -15,9 +15,15 @@ import {
 import { osmappLayers } from './osmappLayers';
 import { Layer, useMapStateContext, View } from '../utils/MapStateContext';
 import { usePersistedState } from '../utils/usePersistedState';
-import { isViewInsideAfrica } from '../Map/styles/makinaAfricaStyle';
 import { Overlays } from './Overlays';
 
+export const isViewInsideBbox = ([, lat, lon]: View, bbox?: number[]) =>
+  !bbox ||
+  (parseFloat(lat) > bbox[1] &&
+    parseFloat(lat) < bbox[3] &&
+    parseFloat(lon) > bbox[0] &&
+    parseFloat(lon) < bbox[2]);
+
 type AllLayers = {
   basemapLayers: Layer[];
   overlayLayers: Layer[];
@@ -26,17 +32,14 @@ type AllLayers = {
 const getAllLayers = (userLayers: Layer[], view: View): AllLayers => {
   const spacer: Layer = { type: 'spacer' as const, key: 'userSpacer' };
   const toLayer = ([key, layer]) => ({ ...layer, key });
+  const filterByBBox = ([, layer]) => isViewInsideBbox(view, layer.bbox); // needs suppressHydrationWarning
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const filterMakina = ([key, _]) =>
-    key === 'makinaAfrica' ? isViewInsideAfrica(view) : true; // needs suppressHydrationWarning
-
-  const entries = Object.entries(osmappLayers);
+  const entries = Object.entries(osmappLayers).filter(filterByBBox);
   const basemaps = entries.filter(([, v]) => v.type === 'basemap');
   const overlays = entries.filter(([, v]) => v.type.startsWith('overlay'));
 
   const basemapLayers = [
-    ...basemaps.filter(filterMakina).map(toLayer),
+    ...basemaps.map(toLayer),
     ...(userLayers.length ? [spacer] : []),
     ...userLayers.map((layer) => ({
       ...layer,

src/components/LayerSwitcher/osmappLayers.tsx

@@ -21,6 +21,20 @@ const ClimbingIcon = () => (
   <Maki ico="climbing" size={16} style={{ opacity: 0.3, marginLeft: '3px' }} />
 );
 
+const africaBbox = [
+  -20, // west
+  -35, // south
+  55, // east
+  40, // north
+];
+
+const czBbox = [
+  12.09, // west
+  48.55, // south
+  18.87, // east
+  51.06, // north
+];
+
 export const osmappLayers: Layers = {
   basic: {
     name: t('layers.basic'),
@@ -36,6 +50,7 @@ export const osmappLayers: Layers = {
       '<a href="https://openplaceguide.org/">OPG</a> © <a href="https://openmaptiles.org/">OpenMapTiles</a>',
       'osm',
     ],
+    bbox: africaBbox,
   },
   outdoor: {
     name: t('layers.outdoor'),
@@ -66,6 +81,14 @@ export const osmappLayers: Layers = {
     attribution: ['&copy; <a href="https://www.bing.com/maps">Microsoft</a>'],
     maxzoom: 19,
   },
+  cuzkSat: {
+    name: 'ČÚZK ortofoto (CZ)',
+    type: 'basemap',
+    url: 'https://geoportal.cuzk.cz/WMS_ORTOFOTO_PUB/service.svc/get?FORMAT=image/png&TRANSPARENT=TRUE&VERSION=1.3.0&SERVICE=WMS&REQUEST=GetMap&LAYERS=GR_ORTFOTORGB&STYLES=&CRS=EPSG:3857&WIDTH=256&HEIGHT=256&BBOX={bbox-epsg-3857}',
+    Icon: SatelliteIcon,
+    attribution: ['&copy; <a href="https://geoportal.cuzk.cz">ČÚZK</a>'],
+    bbox: czBbox,
+  },
   // mtb: {
   //   name: t('layers.mtb'),
   //   type: 'basemap',
@@ -96,5 +119,6 @@ export const osmappLayers: Layers = {
     type: 'overlayClimbing',
     Icon: ClimbingIcon,
     attribution: ['osm'],
+    bbox: czBbox,
   },
 };

src/components/Map/styles/makinaAfricaStyle.ts

@@ -1,23 +1,9 @@
 import { OSMAPP_SOURCES } from '../consts';
 import { basicStyle } from './basicStyle';
-import { View } from '../../utils/MapStateContext';
 
 const sources = JSON.parse(JSON.stringify(OSMAPP_SOURCES));
 
 sources.maptiler_planet.url =
   'https://africa.tiles.openplaceguide.org/data/v3.json';
 
 export const makinaAfricaStyle = { ...basicStyle, sources };
-
-const africaBbox = [
-  -20, // west
-  -35, // south
-  55, // east
-  40, // north
-];
-
-export const isViewInsideAfrica = ([, lat, lon]: View) =>
-  parseFloat(lat) > africaBbox[1] &&
-  parseFloat(lat) < africaBbox[3] &&
-  parseFloat(lon) > africaBbox[0] &&
-  parseFloat(lon) < africaBbox[2];

src/components/Map/styles/rasterStyle.ts

@@ -11,7 +11,7 @@ const getSource = (url) => {
     };
   }
 
-  if (url.match('{x}')) {
+  if (url.match('{x}') || url.match('{bbox')) {
     return {
       tiles: ['a', 'b', 'c'].map((c) => url?.replace('{s}', c)),
     };

src/components/utils/MapStateContext.tsx

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