오늘은 react로 화면에 지도를 그려보자.
나중에 마커도 찍고 도형도 그리고 쌩쑈좀 해볼꺼임.
설치할 라이브러리는 react-leaflet 이라는 라이브러리 이다.
npm i react-leaflet
으로 설치해주자.
설치하고 걍 사용하려고 하면
지도가 막 뒤죽박죽 떠서 으아니 하고 멘붕올 수 있으니 설치후
public/index.html
로 들어가서 내용을 좀 수정해야함.
<link rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>이 내용을 그대로 복사해서
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta 뭐라뭐라 여러개있음 />
<Link 뭐라뭐라 여러개있음/>
------이쯤에 붙여넣어주자------
<title>React App</title>
</head>
<body>
뭐라뭐라
</body>
</html>붙여넣기 ㄱㄱ
이후 App.js(테스트라서 걍 여기코딩함 ㅅㄱ)
import {MapContainer,TileLayer} from "react-leaflet";해주자. 옛날 버전은 Map 이었다더라...
요즘은 MapContainer로 바뀜.
TileLayer이게 지도 불러오는 코드인데 타일형식으로 지도 가져와서 뿌려주는거임.
렌더링될때보면 네모조각조각 렌더링된다.
그리고
JSX부분
<>
<MapContainer
className={"map"}
center={[33.4624,126.54039]}
zoom={10}
/>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</>이렇게 하면 됨...
className : css서타일 가져옴.
center : 위,경도 적어주면 그부분 보여줌.
zoom : 화상통화아님...숫자 클수록 확대 크게해서 보여줌.
Tilelayer부분은 그냥 복붙 ㄱㄱ. url부분이 지도 주소임. 다른지도 넣고싶으면 찾아서url에 바꿔 넣자.
CSS부분
.map{
height: 100vh;
}
그럼 화면에 지도가 잘 나옴.
다음에는 여기에 마커를 찍어보자.
제주도 프론트앤드 개발자의 개발 일기