Leaflet 화면 잘림 현상 해결

화면에서 Grid를 7:5 구조로 나누고 각 컴포넌트를 배치했다.

Grid 7 영역에서는 API로 불러온 데이터가 수집됨과 동시에 Chart를 시각화하고,

Grid 5 영역에서는 Grid 7 영역과 높이를 맞춰주기 위해 반응형으로 height 값을 가지는 Map이 출력되도록 설정했다.

 

Grid 7 영역에 해당하는 <Chart> 컴포넌트는 API 요청이 시작되기 전 기본 세팅 형태로, Box Form만 존재하고,

API 요청으로 데이터가 호출되면 차트가 그려지는 형식의 구조이기 때문에

기본 형태의 높이와 API가 호출되어 차트가 그려진 후의 높이가 다르다.

(그렇다고 해서 Chart Data API를 호출해서 가져오는 시간이 오래 걸리지는 않는다.)

 

 

여기서 페이지가 렌더링되면서 자동으로 <Map> 컴포넌트는 <Chart> 컴포넌트 높이에 맞춰지기 때문에 영역은 height: '100%'로 설정이 되지만,

<Chart> 영역에 데이터가 입혀지기까지 시간 동안은 Box Form만 가지고 있기 때문에

세 개의 시각화가 없는 세 개의 폼 형태를 합친 height 값으로 설정된다.

 

따라서 Map의 높이는 100%로 설정되지만, 초기 <Chart> Form 높이값으로 자동 설정되어,

Leaflet의 캔버스가 잘려보이는 현상이 생긴다고 판단했다.

 

코드 구조는 이러하다.

<Grid item xs={7}>
    <Box sx={{height:'100%'}}>
    	<Chart />
    </Box>
</Grid>
<Grid item xs={5}>
    <Box sx={{height: '100%', display: 'flex', flexDirection: 'column'}}>
        <Typography variant="h5">Map</Typography>
        <Typography variant="subtitle1" gutterBottom sx={{color: 'gray'}}>Device location information</Typography>
        <hr/><br/>
        <Box sx={{flex: 1, height: '100%'}}>
        	<Map />
        </Box>
    </Box>
</Grid>

 

 

여기서 leaflet의 지도 상태 수정 방법 중 하나인, invalidateSize을 사용하려고 했다.

invalidateSize는 지도 컨테이너 크기가 변경되었는지 확인하고, 바뀌었다면 지도를 다시 업데이트 한다.

 

하지만, 애초에 Map의 높이는 100%로 설정되어 있고, 보이는 canvas만 영역을 따로 지정할 수 없기 때문에 해당 적용되지 않았다.

따라서 가장 간편한 방법이라고 할 수 있는 setTimeout() 을 사용했다.

 

setTimeout() 함수는 설정한 타이머가 만료되면 함수나 지정된 코드를 실행시키는 기능이다.

<Chart>에 해당하는 API를 호출되고 난 후 1~3초 뒤에 Map을 초기화시키도록 코드를 설계해서 문제를 해결할 수 있었다.