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} > + a.id)]} + layout={{ + 'icon-image': 'pin-marker', + 'icon-size': 1 + }} + minzoom={9} /> diff --git a/src/assets/pin.png b/src/assets/pin.png new file mode 100644 index 0000000..fb96980 Binary files /dev/null and b/src/assets/pin.png differ