add zoom control with custom icons

src/KartaPage.tsx

@@ -7,6 +7,8 @@ import Fuse from 'fuse.js'
 // import mapstyle from './assets/basemap.json';
 import mapstyle from './assets/basemap-mapbox.json';
 import pin from './assets/pin.png'
+import plus from './assets/plus.png'
+import minus from './assets/minus.png'
 
 export function KartaPage() {
   const mapRef = useRef(null);
@@ -18,6 +20,7 @@ export function KartaPage() {
 
   const host = "http://strapi.litmusmap.ru"
 
+  // Load icons
   const handleMapLoad = (e) => {
     if (mapRef.current) {
       const pinImage = new Image();
@@ -26,18 +29,12 @@ export function KartaPage() {
           mapRef.current.addImage('pin-marker', pinImage);
         }
       }
-      pinImage.src = pin; // pin is your svg import
+      pinImage.src = pin;
     }
   }
 
+  // Load articles
   useEffect(() => {
-    mapRef.current?.loadImage(pin, (error, image) => {
-      if (error) throw error
-      mapRef.current?.addImage('pin-marker', image as HTMLImageElement)
-    })
-
-
-    // let initialArticles
     fetch(`${host}/api/articles?populate=*`)
       .then(r => r.json())
       .then(d => {
@@ -46,13 +43,13 @@ export function KartaPage() {
       })
   }, [])
 
-  const fuseOptions = {
+
+  // Search
+  const fuse = initial !== null && new Fuse(initial, {
     keys: [
       "attributes.tags.value"
     ]
-  };
+  });
-
-  const fuse = initial !== null && new Fuse(initial, fuseOptions);
 
   useEffect(() => {
     const foundArticles = fuse && fuse.search(search).map(e => e.item)
@@ -60,12 +57,35 @@ export function KartaPage() {
     setArticles(updatedArticles)
   }, [search])
 
+
+  // List-map interaction
   const handleAddressClick = (id) => {
     setSelected(id)
     const { longitude, latitude } = articles.find(e => e.id == id).attributes
     id > 0 && articles && mapRef.current?.flyTo({ center: [longitude, latitude] })
   }
 
+  // Zoom
+  const ZoomControl = () => {
+    const zoomIn = () => {
+      mapRef.current.zoomTo(mapRef.current.getZoom() + 1)
+    }
+    const zoomOut = () => {
+      mapRef.current.zoomTo(mapRef.current.getZoom() - 1)
+    }
+    return (
+      <Flex style={{
+        position: 'absolute',
+        top: '1rem',
+        left: '1rem',
+      }}>
+        <Paper onClick={zoomIn} bg={'none'} sx={{"&:hover": {backgroundColor: "white", cursor: 'pointer'}}} maw={48} mah={48}><img src={plus} style={{width: '48px', height: '48px'}}></img></Paper>
+        <Paper onClick={zoomOut} bg={'none'} sx={{"&:hover": {backgroundColor: "white", cursor: 'pointer'}}} maw={48} mah={48}><img src={minus} style={{width: '48px', height: '48px'}}></img></Paper>
+      </Flex>
+      
+    )
+  }
+
   return (
     <div style={{ position: 'relative' }}>
       <Map
@@ -76,7 +96,7 @@ export function KartaPage() {
           zoom: 4
         }}
         style={{
-          height: '90vh'
+          height: '90vh',
         }}
         cursor={cursor}
         mapStyle={mapstyle}
@@ -117,7 +137,9 @@ export function KartaPage() {
           />
         </Source>
         <ScaleControl />
+        <ZoomControl />
       </Map>
+      
       <Paper shadow={'md'} withBorder style={{
         position: 'absolute',
         top: '1rem',