mobile

src/KartaPage.tsx

@@ -5,8 +5,9 @@ import Map, {
   Layer,
   ScaleControl,
   GeolocateControl,
+  Popup,
 } from "react-map-gl/maplibre";
-import 'maplibre-gl/dist/maplibre-gl.css';
+import "maplibre-gl/dist/maplibre-gl.css";
 import { useState, useEffect, useRef } from "react";
 import Fuse from "fuse.js";
 
@@ -27,6 +28,7 @@ export function KartaPage() {
   const [search, setSearch] = useState("");
   const [selected, setSelected] = useState(-1);
   const [cursor, setCursor] = useState("grab");
+  const [popupInfo, setPopupInfo] = useState(null);
 
   const host = "https://strapi.litmusmap.ru";
 
@@ -147,7 +149,7 @@ export function KartaPage() {
       <Map
         ref={mapRef}
         initialViewState={{
-          longitude: 30,
+          longitude: 35,
           latitude: 60,
           zoom: 4,
         }}
@@ -165,13 +167,23 @@ export function KartaPage() {
         interactiveLayerIds={["points-layer"]}
         onClick={(e) => {
           // console.log(e.features);
-          e.features[0]
+          if (e.features[0]) {
-            ? (setSelected(e.features[0].properties.id),
+            setSelected(e.features[0].properties.id);
+            if (mapRef.current.getZoom() < 14) {
               mapRef.current.flyTo({
                 center: e.features[0].geometry.coordinates,
                 zoom: mapRef.current.getZoom() + 6,
-              }))
+              });
-            : setSelected(-1);
+            } else {
+              setPopupInfo({
+                longitude: e.features[0].geometry.coordinates[0],
+                latitude: e.features[0].geometry.coordinates[1],
+                id: e.features[0].properties.id,
+              });
+            }
+          } else {
+            setSelected(-1);
+          }
         }}
         onMouseEnter={() => setCursor("pointer")}
         onMouseLeave={() => setCursor("grab")}
@@ -183,6 +195,18 @@ export function KartaPage() {
           tiles={[`${host}/tiles/{z}/{x}/{y}.pbf`]}
           maxzoom={10}
         >
+          {popupInfo && (
+            <Popup
+              key={popupInfo.id}
+              longitude={popupInfo.longitude}
+              latitude={popupInfo.latitude}
+              anchor="top"
+              closeButton={false}
+              onClose={() => setPopupInfo(null)}
+            >
+              <a href={`/article/${popupInfo.id}`}>подробнее</a>
+            </Popup>
+          )}
           <Layer
             id="points-layer"
             type="circle"
@@ -200,7 +224,7 @@ export function KartaPage() {
                 "#e66a5a",
                 "#F2994A",
               ],
-              "circle-radius": 8,
+              "circle-radius": ["step", ["zoom"], 8, 7, 20, 12, 40, 14, 60],
               "circle-opacity": ["step", ["zoom"], 0.8, 7, 0],
             }}
           />
@@ -215,7 +239,7 @@ export function KartaPage() {
             }
             layout={{
               "icon-image": "pin-marker",
-              "icon-size": ['interpolate', ['linear'], ['zoom'], 7, 0.5, 12, 1],
+              "icon-size": ["interpolate", ["linear"], ["zoom"], 7, 0.5, 12, 1],
             }}
             minzoom={7}
             maxzoom={12}
@@ -241,7 +265,15 @@ export function KartaPage() {
                 "prishvin-marker",
                 "pin-marker",
               ],
-              "icon-size": ['interpolate', ['linear'], ['zoom'], 12, 0.05, 14, 0.1],
+              "icon-size": [
+                "interpolate",
+                ["linear"],
+                ["zoom"],
+                12,
+                0.05,
+                14,
+                0.1,
+              ],
             }}
             minzoom={12}
           />
@@ -272,6 +304,11 @@ export function KartaPage() {
           opacity: "95%",
           padding: "1rem 0 1rem 1rem",
         }}
+        sx={{
+          "@media (max-width: 40em)": {
+            display: "none",
+          },
+        }}
       >
         <Title order={3} mb={10}>
           Музеи