change circle to icon on zoom 9

src/KartaPage.tsx

@@ -6,6 +6,7 @@ import Fuse from 'fuse.js'
 
 // import mapstyle from './assets/basemap.json';
 import mapstyle from './assets/basemap-mapbox.json';
+import pin from './assets/pin.png'
 
 export function KartaPage() {
   const mapRef = useRef(null);
@@ -15,9 +16,27 @@ export function KartaPage() {
   const [selected, setSelected] = useState(-1);
   const [cursor, setCursor] = useState('grab');
 
-  const host = "https://strapi.iamonlyherefortheicecream.gq"
+  const host = "http://strapi.litmusmap.ru"
+
+  const handleMapLoad = (e) => {
+    if (mapRef.current) {
+      const pinImage = new Image();
+      pinImage.onload = () => {
+        if (!mapRef.current.hasImage('pin')) {
+          mapRef.current.addImage('pin-marker', pinImage);
+        }
+      }
+      pinImage.src = pin; // pin is your svg import
+    }
+  }
 
   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())
@@ -65,6 +84,7 @@ export function KartaPage() {
         onClick={e => {e.features[0] ? setSelected(e.features[0].properties.id) : setSelected(-1); console.log(e.features)}}
         onMouseEnter={() => setCursor('pointer')}
         onMouseLeave={() => setCursor('grab')}
+        onLoad={handleMapLoad}
         >
           <Source
             id='points'
@@ -82,6 +102,18 @@ export function KartaPage() {
                 "circle-radius": 8,
                 "circle-opacity": 0.7,
               }}
+              maxzoom={9}
+            />
+            <Layer
+              id='points2-layer'
+              type='symbol'
+              source-layer='layer'
+              filter={articles === null || articles.length == 0 ? false : ['in', 'id', ...articles.map(a => a.id)]}
+              layout={{
+                'icon-image': 'pin-marker',
+                'icon-size': 1
+              }}
+              minzoom={9}
             />
           </Source>