add: base map switcher logic

frontend/src/components/MapComponent.vue

@@ -26,12 +26,18 @@ export default {
         const map = shallowRef(null);
         let currentFadr = reactive({ "fadr": [] });
         const valuecb = ref(true);
-        const selectedOption = ref("topo");
+        const selectedOption = ref("mono");
         const viewOptions = ["topo", "satellite", "mono"];
         const viewLabels = ["Карта", "Спутник", "Монохром"];
 
         const apiKey = "pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A";
 
+        const basemapTiles = {
+            "topo": [`https://api.mapbox.com/styles/v1/ghermant/cl9vd1nji002n15s2xxj25f4m/tiles/256/{z}/{x}/{y}@2x?access_token=${apiKey}`],
+            "satellite": [`https://api.mapbox.com/styles/v1/ghermant/cl9olarp0002i14vq9a2d0e7g/tiles/256/{z}/{x}/{y}@2x?access_token=${apiKey}`],
+            "mono": [`https://api.mapbox.com/styles/v1/ghermant/cl9vd7xwi004u14nxu3j83scj/tiles/256/{z}/{x}/{y}@2x?access_token=${apiKey}`]
+
+        };
 
         watch(() => [...props.idlist], (_currentValue, _oldValue) => {
             updateSamplesLayer()
@@ -41,6 +47,10 @@ export default {
             updateFieldsLayer()
         });
 
+        watch(() => selectedOption.value, (_currentValue, _oldValue) => {
+            updateBaseLayer()
+        })
+
         const buildMap = () => {
             map.value = markRaw(new maplibregl.Map({
                 container: mapContainer.value, // container id
@@ -56,16 +66,16 @@ export default {
             }));
 
             map.value.on('load', () => {
-                map.value.addSource('basemap-source', {
+                map.value.addSource('basemap', {
                     'type': 'raster',
-                    'tiles': [`https://api.mapbox.com/styles/v1/ghermant/cl8vg2r97001m14o4c2qzw9t6/tiles/256/{z}/{x}/{y}@2x?access_token=${apiKey}`]
+                    'tiles': basemapTiles[selectedOption.value]
                 })
 
                 map.value.addLayer(
                     {
                         'id': 'basemap-layer',
                         'type': 'raster',
-                        'source': 'basemap-source',
+                        'source': 'basemap',
                         'paint': {}
                     }
                 );
@@ -244,6 +254,19 @@ export default {
             map.value.setLayoutProperty('fields-layer', 'visibility', visibility);
         };
 
+        const updateBaseLayer = () => {
+            const selectedBasemap = selectedOption.value;
+            // https://stackoverflow.com/questions/38631344/recommended-way-to-switch-tile-urls-in-mapbox-gl-js
+            // Set the tile url to a cache-busting url (to circumvent browser caching behaviour):
+            map.value.getSource('basemap').tiles = basemapTiles[selectedBasemap]
+            // Remove the tiles for a particular source
+            map.value.style.sourceCaches['basemap'].clearTiles()
+            // Load the new tiles for the current viewport (map.value.transform -> viewport)
+            map.value.style.sourceCaches['basemap'].update(map.value.transform)
+            // Force a repaint, so that the map will be repainted without you having to touch the map
+            map.value.triggerRepaint()
+        }
+
         onMounted(() => {
             buildMap()
         });