scale control and minor changes

src/KartaPage.tsx

@@ -1,6 +1,6 @@
 import { Paper, Flex, ScrollArea, Autocomplete } from '@mantine/core';
 import { ArticleCardVertical } from './ArticleCard';
-import Map, {Source, Layer} from 'react-map-gl/maplibre';
+import Map, { Source, Layer, ScaleControl } from 'react-map-gl/maplibre';
 import { useState, useEffect, useRef } from 'react';
 import Fuse from 'fuse.js'
 
@@ -81,7 +81,7 @@ export function KartaPage() {
         cursor={cursor}
         mapStyle={mapstyle}
         interactiveLayerIds={['points-layer']}
-        onClick={e => {e.features[0] ? setSelected(e.features[0].properties.id) : setSelected(-1); console.log(e.features)}}
+        onClick={e => { e.features[0] ? setSelected(e.features[0].properties.id) : setSelected(-1) }}
         onMouseEnter={() => setCursor('pointer')}
         onMouseLeave={() => setCursor('grab')}
         onLoad={handleMapLoad}
@@ -102,7 +102,7 @@ export function KartaPage() {
               "circle-radius": 8,
               "circle-opacity": 0.7,
             }}
-              maxzoom={9}
+            maxzoom={7}
           />
           <Layer
             id='points2-layer'
@@ -113,10 +113,10 @@ export function KartaPage() {
               'icon-image': 'pin-marker',
               'icon-size': 1
             }}
-              minzoom={9}
+            minzoom={7}
           />
         </Source>
-
+        <ScaleControl/>
       </Map>
       <Paper shadow={'md'} withBorder style={{
         position: 'absolute',
@@ -160,9 +160,6 @@ export function KartaPage() {
 
               return <ArticleCardVertical key={article.id} {...articleInfo} />
             }
-
-
-
             )}
           </Flex>
         </ScrollArea>