src/sections/map/index.tsx

import { useState, useEffect } from "react";
import { Poi } from "../../redux/types/Poi";
import { convertModeObjectToArray } from "../../utils/convertModeObjectToArray";
import { FaWalking } from "react-icons/fa";
import { AiFillCar } from "react-icons/ai";
import { Map, Marker } from "react-map-gl";
import ControlPanel from "./control-panel";
import pin from "../../assets/images/pin.png";

type DemographicsSectionProps = {
  selectedPoi: Poi;
};
const MapSection: React.FC<DemographicsSectionProps> = ({ selectedPoi }) => {
  const [mapStyle, setMapStyle] = useState<any>(null);

  return (
    <div
      style={{
        width: "100%",
        height: "100%",
      }}
    >
      <Map
        initialViewState={{
          latitude: selectedPoi.lat,
          longitude: selectedPoi.lng,
          zoom: 15.5,
        }}
        mapStyle={mapStyle && mapStyle.toJS()}
        styleDiffing
        mapboxAccessToken={
          "pk.eyJ1Ijoibm9lbm9sdWFsIiwiYSI6ImNsbXUwbGNvODA5a3Iya3Fmc202OHU2MW8ifQ.6h8Y00MzBQFDlYPtxw-_Bg"
        }
      >
        <Marker latitude={selectedPoi.lat} longitude={selectedPoi.lng}>
          {/* You can customize the pin marker here */}
          <img
            src={pin}
            alt="Custom Marker"
            width={40} // Adjust the width and height as needed
            height={40}
          />
        </Marker>
      </Map>
      <div
        style={{
          width: "12%",
          position: "absolute",
          top: "5%",
          left: "85%",
          padding: "1%",
          borderRadius: "10px",
          backgroundColor: "white",
          fontFamily: "airbnb_regular",
          border: "1px solid #3C3C3C",
        }}
      >
        <ControlPanel onChange={setMapStyle} />
      </div>
    </div>
  );
};

export default MapSection;