new host, new basemap

src/KartaPage.tsx

@@ -2,10 +2,12 @@ import { Paper, Flex, ScrollArea, Autocomplete } from '@mantine/core';
 import { ArticleCardVertical } from './ArticleCard';
 import articleCard from './assets/card.json';
 import Map, {Source, Layer} from 'react-map-gl/maplibre';
-import mapstyle from './assets/basemap.json';
 import { useState, useEffect, useRef } from 'react';
 import Fuse from 'fuse.js'
 
+// import mapstyle from './assets/basemap.json';
+import mapstyle from './assets/basemap-mapbox.json';
+
 export function KartaPage() {
   const mapRef = useRef(null);
   const [initial, setInitial] = useState(null);
@@ -14,9 +16,11 @@ export function KartaPage() {
   const [selected, setSelected] = useState(-1);
   const [cursor, setCursor] = useState('grab');
 
+  const host = "https://strapi.iamonlyherefortheicecream.gq"
+
   useEffect(() => {
     // let initialArticles
-    fetch("http://strapi.wg.gateway.ts/api/articles?populate=*")
+    fetch(`${host}/api/articles?populate=*`)
       .then(r => r.json())
       .then(d => {
         setInitial(d.data)
@@ -71,14 +75,14 @@ export function KartaPage() {
         cursor={cursor}
         mapStyle={mapstyle}
         interactiveLayerIds={['points-layer']}
-        onClick={e => e.features[0] ? setSelected(e.features[0].properties.id) : setSelected(-1)}
+        onClick={e => {e.features[0] ? setSelected(e.features[0].properties.id) : setSelected(-1); console.log(e.features)}}
         onMouseEnter={() => setCursor('pointer')}
         onMouseLeave={() => setCursor('grab')}
         >
           <Source
             id='points'
             type='vector'
-            tiles={['http://strapi.wg.gateway.ts/tiles/{z}/{x}/{y}.pbf']}
+            tiles={[`${host}/tiles/{z}/{x}/{y}.pbf`]}
             maxzoom={10}
           >
             <Layer
@@ -126,7 +130,7 @@ export function KartaPage() {
             {articles !== null && articles.length > 0 && articles.map(article => {
               const articleInfo = {
                 "id": article.id,
-                "image": article.attributes.cover.data !== null ? "http://strapi.wg.gateway.ts" + article.attributes.cover.data.attributes.url : "",
+                "image": article.attributes.cover.data !== null ? host + article.attributes.cover.data.attributes.url : "",
                 "category": "Памятные места",
                 "title": article.attributes.title,
                 "address": article.attributes.address,

src/assets/basemap-mapbox.json

@@ -0,0 +1,19 @@
+{
+    "version": 8,
+    "name": "Mapbox litmap",
+    "metadata": {},
+    "sources": {
+      "mapbox": {
+        "type": "raster",
+        "tiles": ["https://api.mapbox.com/styles/v1/ghermant/clo49ljc700b901pghvgk0o7u/tiles/512/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A"]
+      }
+    },
+    "layers": [
+        {
+          "id": "basemap",
+          "type": "raster",
+          "source": "mapbox",
+          "paint": {}
+        }
+    ]
+}