add layer, sync it with search

src/KartaPage.tsx

@@ -1,7 +1,7 @@
 import { Paper, Flex, ScrollArea, Autocomplete } from '@mantine/core';
 import { ArticleCardVertical } from './ArticleCard';
 import articleCard from './assets/card.json';
-import Map from 'react-map-gl/maplibre';
+import Map, {Source, Layer} from 'react-map-gl/maplibre';
 import mapstyle from './assets/basemap.json';
 import { useState, useEffect } from 'react';
 import Fuse from 'fuse.js'
@@ -37,7 +37,7 @@ export function KartaPage() {
     // ignoreFieldNorm: false,
     // fieldNormWeight: 1,
     keys: [
-      "attributes.title"
+      "attributes.tags.value"
     ]
   };
 
@@ -61,7 +61,22 @@ export function KartaPage() {
           height: '90vh'
         }}
         mapStyle={mapstyle}
-      />
+        >
+          <Source
+            id='points'
+            type='vector'
+            tiles={['http://localhost:5500/tiles/{z}/{x}/{y}.pbf']}
+            maxzoom={10}
+          >
+            <Layer
+              id='points-layer'
+              type='circle'
+              source-layer='layer'
+              filter={articles === null || articles.length == 0 ? false : ['in', 'id', ...articles.map(a => a.id)]}
+            />
+          </Source>
+
+      </Map>
       <Paper shadow={'md'} withBorder style={{
         position: 'absolute',
         top: '1rem',
@@ -92,7 +107,7 @@ export function KartaPage() {
           >
             {articles !== null && articles.length > 0 && articles.map(article => {
               const articleInfo = {
-                "image": article.attributes.cover.data !== null ? "http://strapi.wg.gateway.ts" + article.attributes.cover.data.attributes.url : "https://images.unsplash.com/photo-1628890923662-2cb23c2e0cfe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80",
+                // "image": article.attributes.cover.data !== null ? "http://strapi.wg.gateway.ts" + article.attributes.cover.data.attributes.url : "https://images.unsplash.com/photo-1628890923662-2cb23c2e0cfe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80",
                 "category": "technology",
                 "title": article.attributes.title,
                 "date": new Date(article.attributes.publishedAt).toLocaleDateString("ru-RU"),
@@ -108,13 +123,6 @@ export function KartaPage() {
 
 
             )}
-            {/* <ArticleCardVertical {...articleCard} />
-            <ArticleCardVertical {...articleCard} />
-            <ArticleCardVertical {...articleCard} />
-            <ArticleCardVertical {...articleCard} />
-            <ArticleCardVertical {...articleCard} />
-            <ArticleCardVertical {...articleCard} />
-            <ArticleCardVertical {...articleCard} /> */}
           </Flex>
         </ScrollArea>
       </Paper>