import { FC } from 'react';
import { Modal, ModalBody } from 'reactstrap';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import { prop } from 'ramda';
import { CityStats } from '../types';
import './MapModal.scss';
interface MapModalProps {
toggle: () => void;
isOpen: boolean;
title: string;
locations?: CityStats[];
}
const OpenStreetMapTile: FC = () => (
);
const calculateMapProps = (locations: CityStats[]): any => {
if (locations.length === 0) {
return {};
}
if (locations.length > 1) {
return { bounds: locations.map(prop('latLong')) };
}
// When there's only one location, an error is thrown if trying to calculate the bounds.
// When that happens, we use zoom and center as a workaround
const [{ latLong: center }] = locations;
return { zoom: 10, center };
};
const MapModal = ({ toggle, isOpen, title, locations = [] }: MapModalProps) => (
{title}
);
export default MapModal;