All files / app/components StaticMap.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import "maplibre-gl/dist/maplibre-gl.css";
 
import { styled, useMediaQuery } from "@mui/material";
import {
  clusterCountLayer,
  clusterLayer,
  unclusteredPointLayer,
  USERS_SOURCE_ID,
} from "features/search/utils/mapLayers";
import { loadMapUserPins } from "features/search/utils/mapUtils";
import React, { useRef } from "react";
import {
  Layer,
  Map as MaplibreMap,
  MapRef,
  NavigationControl,
  Source,
} from "react-map-gl/maplibre";
import { theme } from "theme";
 
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL;
 
const MapWrapper = styled("div")(({ theme }) => ({
  height: 500,
  width: "100%",
  position: "relative",
  borderRadius: "10px",
  overflow: "hidden",
}));
 
const StaticMap = () => {
  const mapRef = useRef<MapRef | null>(null);
 
  const onLoad = () => {
    Iif (mapRef.current) {
      loadMapUserPins(mapRef);
    }
  };
 
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
  const initialViewState = isMobile
    ? { zoom: 0, latitude: 10, longitude: 48 }
    : { zoom: 0.75, latitude: 0, longitude: 0 };
 
  return (
    <MapWrapper>
      <MaplibreMap
        id="map"
        initialViewState={initialViewState}
        minZoom={0}
        maxZoom={7}
        style={{
          height: "100%",
          width: "100%",
        }}
        mapStyle="https://cdn.couchers.org/maps/couchers-basemap-style-v1.json"
        interactiveLayerIds={clusterLayer.id ? [clusterLayer.id] : []}
        hash={false}
        ref={mapRef}
        onLoad={onLoad}
        scrollZoom={false}
      >
        <Source
          id={USERS_SOURCE_ID}
          cluster={true}
          clusterRadius={50}
          data={API_BASE_URL + "/geojson/public-users"}
          promoteId="id"
          type={"geojson"}
        >
          <Layer {...clusterLayer} />
          <Layer {...clusterCountLayer} />
          <Layer {...unclusteredPointLayer} />
        </Source>
        <NavigationControl position="top-right" showCompass={false} />
      </MaplibreMap>
    </MapWrapper>
  );
};
 
export default StaticMap;