✨ add more basemaps

+ CZ ortofoto
+ OSM  bright
+ CZ 1:500k

closes #9

src/app.config.ts

@@ -1,10 +1,12 @@
+//import WMTSTileGrid from 'ol/tilegrid/WMTS';
 import proj4 from 'proj4';
 import {Fill, Stroke, Style} from 'ol/style';
-import {OSM, Vector as VectorSource} from 'ol/source';
+import {OSM, TileWMS, Vector as VectorSource, XYZ, WMTS} from 'ol/source';
 import {Tile, Vector as VectorLayer} from 'ol/layer';
 import {TopoJSON} from 'ol/format';
 import {View} from 'ol';
 import {get as getProjection, transform} from 'ol/proj';
+//import {getTopLeft, getWidth} from 'ol/extent';
 import {register} from 'ol/proj/proj4';
 
 import env from './env.config.json';
@@ -29,14 +31,99 @@ function getHostname() {
   return urlArr[0] + '//' + domain;
 }
 
+export const cartodbLayer = new Tile({
+  source: new XYZ({
+    url:
+      'https://cartodb-basemaps-{a-d}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
+    attributions: [
+      'CartoDB Positron, © <a href="https://carto.com/attributions" target="_blank">CARTO</a>',
+      '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors',
+    ],
+  }),
+  title: 'OpenStreetMap světlá',
+  visible: true,
+  base: true,
+  editor: {editable: false},
+  removable: false,
+});
+
 export const osmLayer = new Tile({
   source: new OSM(),
-  title: 'OpenStreetMap',
+  title: 'OpenStreetMap barevná',
   base: true,
   editor: {editable: false},
   removable: false,
 });
 
+export const zm100Layer = new Tile({
+  source: new TileWMS({
+    url: 'https://geoportal.cuzk.cz/WMS_ZM100_PUB/WMService.aspx',
+    params: {
+      LAYERS: 'GR_ZM100',
+    },
+    attributions: ['© <a href="geoportal.cuzk.cz" target="_blank">ČÚZK</a>'],
+  }),
+  /*source: new TileWMS({
+    url:
+      'https://ags.cuzk.cz/arcgis/services/VektorovaMapa/MapServer/WmsServer?',
+    params: {
+      //https://ags.cuzk.cz/arcgis/services/VektorovaMapa/MapServer/WmsServer?request=GetCapabilities&service=WMS
+      LAYERS: `1,2,3,4,5,6,7,8,9,10,11,12,13,14,193,194,195,196,
+17,18,15,16,82,83,84,85,86,87,88,89,90,91,182,183,184,185,186,187,188,189,190,191,192,
+19,20,78,79,80,81,23,24,21,22,197,198,199,200,201,202,203,204,205,
+52,53,54,
+26,27,92,94,93,95,96,
+29,30,31,32,76,97,98,99,100,101,102,103,104,108,109,105,106,107,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155`,
+    },
+  }),*/
+  /*source: new WMTS({
+    url: 'https://geoportal.cuzk.cz/WMTS_ZM/WMTService.aspx',
+    format: 'image/png',
+    layer: 'zm',
+    matrixSet: 'jtsk:epsg:5514',
+    tileGrid: new WMTSTileGrid({
+      origin: [51.874963785131, 11.082166373399],
+      resolutions: [
+        3,2,1
+      ],
+      matrixIds: [1, 2, 3],
+    }),
+  }),*/
+  title: 'Mapa ČR 1:100 000',
+  base: true,
+  visible: false,
+  removable: false,
+});
+
+export const mcr500Layer = new Tile({
+  source: new TileWMS({
+    url: 'https://geoportal.cuzk.cz/WMS_MCR500/WMService.aspx',
+    params: {
+      LAYERS: 'GR_MCR500',
+    },
+    attributions: ['© <a href="geoportal.cuzk.cz" target="_blank">ČÚZK</a>'],
+  }),
+  title: 'Mapa ČR 1:500 000',
+  base: true,
+  visible: false,
+  removable: false,
+});
+
+export const ortofotoLayer = new Tile({
+  source: new TileWMS({
+    url: 'https://geoportal.cuzk.cz/WMS_ORTOFOTO_PUB/WMService.aspx',
+    params: {
+      LAYERS: 'GR_ORTFOTORGB',
+    },
+    attributions: ['© <a href="geoportal.cuzk.cz" target="_blank">ČÚZK</a>'],
+  }),
+  title: 'Ortofoto ČÚZK',
+  base: true,
+  visible: false,
+  removable: false,
+  thumbnail: 'https://www.agrihub.sk/hsl-ng/img/orto.jpg',
+});
+
 export const perc2color = (perc: number): string => {
   perc = perc * 100;
   let r;
@@ -90,6 +177,7 @@ export const obce = new VectorSource({
   format: new TopoJSON({dataProjection: 'EPSG:5514'}),
   url: require('./data/obce_cr_20210310_5p_5514.topojson').default,
   overlaps: false,
+  attributions: ['CC-BY ČÚZK, 2021'],
 });
 
 export const obceIndexLayer = new VectorLayer({
@@ -98,7 +186,6 @@ export const obceIndexLayer = new VectorLayer({
   visible: true,
   style: indexStyle,
   title: 'Obce ČR: Rural attractiveness index',
-  attributions: ['CC-BY ČÚZK, 2021'],
 });
 obceIndexLayer.set('popUp', {
   attributes: [
@@ -209,7 +296,7 @@ export const krajeLayer = new VectorLayer({
 export const AppConfig = {
   //proxyPrefix: '../8085/',
   geonamesUser: env.geonamesUser,
-  default_layers: [osmLayer],
+  default_layers: [cartodbLayer, osmLayer, mcr500Layer, ortofotoLayer],
   popUpDisplay: 'hover',
   project_name: 'erra/map',
   default_view: new View({