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,42 +81,42 @@ 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}
+      >
+        <Source
+          id='points'
+          type='vector'
+          tiles={[`${host}/tiles/{z}/{x}/{y}.pbf`]}
+          maxzoom={10}
         >
-          <Source
+          <Layer
-            id='points'
+            id='points-layer'
-            type='vector'
+            type='circle'
-            tiles={[`${host}/tiles/{z}/{x}/{y}.pbf`]}
+            source-layer='layer'
-            maxzoom={10}
+            filter={articles === null || articles.length == 0 ? false : ['in', 'id', ...articles.map(a => a.id)]}
-          >
+            paint={{
-            <Layer
+              "circle-color": ['match', ['get', 'id'], selected, '#FF0000', '#1c9099'],
-              id='points-layer'
+              "circle-radius": 8,
-              type='circle'
+              "circle-opacity": 0.7,
-              source-layer='layer'
+            }}
-              filter={articles === null || articles.length == 0 ? false : ['in', 'id', ...articles.map(a => a.id)]}
+            maxzoom={7}
-              paint={{
+          />
-                "circle-color": ['match', ['get', 'id'], selected, '#FF0000', '#1c9099'],
+          <Layer
-                "circle-radius": 8,
+            id='points2-layer'
-                "circle-opacity": 0.7,
+            type='symbol'
-              }}
+            source-layer='layer'
-              maxzoom={9}
+            filter={articles === null || articles.length == 0 ? false : ['in', 'id', ...articles.map(a => a.id)]}
-            />
+            layout={{
-            <Layer
+              'icon-image': 'pin-marker',
-              id='points2-layer'
+              'icon-size': 1
-              type='symbol'
+            }}
-              source-layer='layer'
+            minzoom={7}
-              filter={articles === null || articles.length == 0 ? false : ['in', 'id', ...articles.map(a => a.id)]}
+          />
-              layout={{
+        </Source>
-                'icon-image': 'pin-marker',
+        <ScaleControl/>
-                'icon-size': 1
-              }}
-              minzoom={9}
-            />
-          </Source>
-
       </Map>
       <Paper shadow={'md'} withBorder style={{
         position: 'absolute',
@@ -160,9 +160,6 @@ export function KartaPage() {
 
               return <ArticleCardVertical key={article.id} {...articleInfo} />
             }
-
-
-
             )}
           </Flex>
         </ScrollArea>