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