HeritageMap.js

heritage-map.jsx

import React, { useState, useMemo } from "react";
import { Marker } from "react-leaflet";
import { latLngBounds } from "leaflet";
import MyMap from "./components/my-map";
import HeritageLegend from "./components/heritage-legend";

const HeritageMap = ({ sites }) => {
  const [selectedSite, setSelectedSite] = useState(null);

  const allSiteBounds = useMemo(() => {
    const bounds = latLngBounds();
    sites.forEach((site) => bounds.extend(site.position));
    return bounds.pad(0.1);
  }, [sites]);

  const handleSiteClick = (site) => () => setSelectedSite(site);

  return (
    <MyMap
      bounds={!selectedSite && allSiteBounds}
      center={selectedSite && selectedSite.position}
      zoom={14}
    >
      {sites.map((site) => (
        <Marker
          key={site.position}
          position={site.position}
          onClick={handleSiteClick(site)}
        />
      ))}
      <HeritageLegend
        title={selectedSite && selectedSite.name}
        description={selectedSite && selectedSite.description}
      />
    </MyMap>
  );
};

HeritageMap.propTypes = {
  sites: PropTypes.arrayOf(
    PropTypes.shape({
      position: PropTypes.arrayOf(PropTypes.number),
      name: PropTypes.string.isRequired,
      description: PropTypes.string,
    })
  ).isRequired,
};

export default HeritageMap;