From fbf47f1f4f81f0fcffdea28592d67808af19cc34 Mon Sep 17 00:00:00 2001
From: gman <gman>
Date: Wed, 25 Oct 2023 22:40:43 +0300
Subject: [PATCH] change circle to icon on zoom 9

---
 src/KartaPage.tsx  |  34 +++++++++++++++++++++++++++++++++-
 src/assets/pin.png | Bin 0 -> 561 bytes
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/pin.png

diff --git a/src/KartaPage.tsx b/src/KartaPage.tsx
index 2630a8a..2716583 100644
--- a/src/KartaPage.tsx
+++ b/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>
 
diff --git a/src/assets/pin.png b/src/assets/pin.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb96980bd17923025c8495a06462cf57bedde801
GIT binary patch
literal 561
zcmV-10?z%3P)<h;3K|Lk000e1NJLTq001HY001Hg1^@s6I!6n_00009a7bBm000*e
z000*e0m>%xKL7v$<4Ht8R9J=Wmw|1=AP`0Wb%A;WZ;*_@2pz#Acm$8&Zjcc?f=BQO
zWCM2sDxyz&p$>-Fky0s0C*kBcp6}p;#W{y(Xm3wJ@vlKdq!N)vL<SMDBI0PHi1Z>-
z-vd&#MnvQTzzM)RfHQy*fCW$iFaQp8{dCT?MI;_1#{e|mofDg-F#vov2Kr4NFgt!B
z#K^bz*77-6??EE}VK)#?I)^s|aO88yP5^PVmg71;H+zAEfQG4`X(sZk6;Q+9JgD6Z
z#Ajk+e;~wh#eY`ib1DB45XY=k?Ds4FCX|R}%qmZ=j#vf_SxN1}kzK!ICiYjgB^RX1
z^b75)&_5fbW>%mwv)HJtUhsV1&}T}GxwOK?YJ-v{{DYv?YO&UPEY?;9HYwFqTfL88
zVh@m-!B6g5HD{hX9nD7SYqY>^2I1r<onlThC^ZdPYSfq?J=qf^DC(H$-<D(}8zc(e
zt@s5I%YrTj;Ur^9Db)cv=j@a%AQfx>=lqENTfDENtn{jAl**30v0bi@%+`UbYSLlu
z5H$71CfX%V9f)?}_vGQYWwCZQKyKQjN;4NG`~0ZV=*75Z$;;E`UE_Ww{uYqsB|7`|
z9&FRMuR7+z!>zP@zp=J}?Acx);c<I`Tr~jSlKg@>m4J)000000NkvXXu0mjf5k35=

literal 0
HcmV?d00001