diff --git a/src/KartaPage.tsx b/src/KartaPage.tsx index 51b1c58..7188bde 100644 --- a/src/KartaPage.tsx +++ b/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() { { // console.log(e.features); - e.features[0] - ? (setSelected(e.features[0].properties.id), + if (e.features[0]) { + 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 && ( + setPopupInfo(null)} + > + подробнее + + )} @@ -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", + }, + }} > Музеи