Skip to content

Commit

Permalink
Improve performance while rendering markers on a map
Browse files Browse the repository at this point in the history
  • Loading branch information
sSwiergosz committed Sep 24, 2024
1 parent a9b95f0 commit 552cd8b
Showing 1 changed file with 48 additions and 23 deletions.
71 changes: 48 additions & 23 deletions src/nursery-nav/src/components/MapComponent/MapComponent.tsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,53 @@
import { MapContainer, TileLayer } from 'react-leaflet';
import { Box, Button, Container } from '@mui/material';
import MapPin from '../MapPin/MapPin';
import { useContext, useEffect, useMemo, useState } from 'react';
import MarkerClusterGroup from 'react-leaflet-cluster'
import './MapComponent.css';
import { LocationResponse } from '../../shared/nursery.interface';
import { InstitutionContext } from '../Layout/Layout';
import { MapContainer, TileLayer } from 'react-leaflet';
import {
Link as RouterLink,
generatePath,
useParams,
} from 'react-router-dom';

import { Box, Button, Container, debounce } from '@mui/material';
import MarkerClusterGroup from 'react-leaflet-cluster'

import MapPin from '../MapPin/MapPin';
import { InstitutionContext } from '../Layout/Layout';
import PathConstants from '../../shared/pathConstants';

import { LocationResponse } from '../../shared/nursery.interface';

import './MapComponent.css';

interface MapComponentProps {
locations: LocationResponse[];
setIsMapLoaded: (isMapLoaded: boolean) => void;
}

export default function MapComponent({ locations, setIsMapLoaded }: MapComponentProps) {
const { institutionIds } = useContext(InstitutionContext);
const [locationsFiltered, setLocationsFiltered] = useState<LocationResponse[]>([]);
const attributionText = 'Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a> | <a href="https://openmaptiles.org/" target="_blank">© OpenMapTiles</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap</a> contributors';
const mapUrl = `https://maps.geoapify.com/v1/tile/positron/{z}/{x}/{y}.png?apiKey=${process.env.REACT_APP_GEOAPIFY_API_KEY}`;

const mapUrl = `https://maps.geoapify.com/v1/tile/positron/{z}/{x}/{y}.png?apiKey=${process.env.REACT_APP_GEOAPIFY_API_KEY}`;
const attributionText = 'Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a> | <a href="https://openmaptiles.org/" target="_blank">© OpenMapTiles</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap</a> contributors';
const isXs = window.innerWidth < 600;
const isSm = window.innerWidth < 900;
function useFilteredLocations(locations: LocationResponse[], institutionIds: number[]) {
return useMemo(() => {
if (institutionIds.length === 0) {
return locations;
}

return locations.filter((location) => institutionIds.includes(location.id));
}, [locations, institutionIds]);
}

export default function MapComponent({ locations, setIsMapLoaded }: MapComponentProps) {
const { institutionIds } = useContext(InstitutionContext);
const { id } = useParams();
const selectedLocation = id ? locations.find((location) => location.id === parseInt(id)) : undefined;
const [size, setSize] = useState({
isXs: window.innerWidth < 600,
isSm: window.innerWidth < 900,
});
const locationsFiltered = useFilteredLocations(locations, institutionIds);

const selectedLocation = useMemo(
() => id ? locations.find((location) => location.id === parseInt(id)) : undefined,
[id, locations]
);

const markers = useMemo(() => locationsFiltered.map((location) => (
<MapPin
Expand All @@ -43,13 +62,19 @@ export default function MapComponent({ locations, setIsMapLoaded }: MapComponent
)), [locationsFiltered, selectedLocation]);

useEffect(() => {
if (institutionIds.length === 0) {
setLocationsFiltered(locations);
}
else {
setLocationsFiltered(locations.filter((location) => institutionIds.includes(location.id)));
const handleResize = debounce(() => {
setSize({
isXs: window.innerWidth < 600,
isSm: window.innerWidth < 900,
});
}, 200);

window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
handleResize.clear();
}
}, [institutionIds, locations]);
}, []);

return (
<Box>
Expand All @@ -62,10 +87,10 @@ export default function MapComponent({ locations, setIsMapLoaded }: MapComponent
<MapContainer
preferCanvas={true}
center={[52.5, 19.14]}
zoom={isXs ? 6 : 7}
zoom={size.isXs ? 6 : 7}
scrollWheelZoom={true}
zoomControl={false}
style={{ position: 'fixed', top: 0, bottom: 0, width: isSm ? '100%' : '50%' }}
style={{ position: 'fixed', top: 0, bottom: 0, width: size.isSm ? '100%' : '50%' }}
>
<TileLayer
attribution={attributionText}
Expand Down

0 comments on commit 552cd8b

Please sign in to comment.