MapLayers reactive controls; MapSource: add customMapSource for tiles;

client/src/components/map/MapLayers/MapLayers.tsx

@@ -1,6 +1,7 @@
-import { Checkbox, Flex, NavLink, Stack } from '@mantine/core'
+import { Checkbox, Flex, NavLink, Slider, Stack } from '@mantine/core'
+import BaseLayer from 'ol/layer/Base'
 import Map from 'ol/Map'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
 interface MapLayersProps {
     map: React.MutableRefObject<Map | null>
@@ -12,16 +13,49 @@ const MapLayers = ({
     return (
         <Stack gap='0'>
             {map.current?.getLayers().getArray() && map.current?.getLayers().getArray().map((layer, index) => (
-                <Flex key={`layer-${index}`} gap='xs' align='center'>
+                <LayerSetting key={index} index={index} layer={layer} />
-                    <Checkbox.Indicator
-                        checked={layer.getLayerState().visible}
-                        onClick={() => layer.getLayerState().visible ? layer.setVisible(false) : layer.setVisible(true)}
-                    />
-                    <NavLink p={0} label={layer.get('name')} onClick={() => { console.log(layer.getLayerState()) }} />
-                </Flex>
             ))}
         </Stack>
     )
 }
 
+interface LayerSettingProps {
+    index: number;
+    layer: BaseLayer;
+}
+
+const LayerSetting = ({
+    index,
+    layer
+}: LayerSettingProps) => {
+    const [opacity, setOpacity] = useState(layer.getOpacity())
+    const [visible, setVisible] = useState(layer.getLayerState().visible)
+
+    useEffect(() => {
+        layer.setVisible(visible)
+    }, [visible, layer])
+
+    useEffect(() => {
+        layer.setOpacity(opacity)
+    }, [opacity, layer])
+
+    return (
+        <Flex key={`layer-${index}`} gap='xs' align='center'>
+            <Checkbox
+                checked={visible}
+                onChange={(e) => setVisible(e.currentTarget.checked)}
+            />
+            <Slider
+                w='100%'
+                min={0}
+                max={1}
+                step={0.001}
+                value={opacity}
+                onChange={(value) => setOpacity(value)}
+            />
+            <NavLink p={0} label={layer.get('name')} onClick={() => { console.log(layer.getLayerState()) }} />
+        </Flex>
+    )
+}
+
 export default MapLayers

client/src/components/map/MapSources.ts

@@ -20,6 +20,11 @@ const yandexMapsSatelliteSource = new XYZ({
     projection: yandexProjection,
 })
 
+const customMapSource = new XYZ({
+    url: `${import.meta.env.VITE_API_EMS_URL}/tiles/tile/custom/{z}/{x}/{y}`,
+    attributions: 'Custom map data'
+})
+
 const regionsLayerSource = new VectorSource({
     url: 'sakha_republic.geojson',
     format: new GeoJSON(),
@@ -28,5 +33,6 @@ const regionsLayerSource = new VectorSource({
 export {
     googleMapsSatelliteSource,
     yandexMapsSatelliteSource,
-    regionsLayerSource
+    regionsLayerSource,
+    customMapSource
 }