Vanilla Typescript 환경에서 `Leaflet`을 이용해 지도를 불러와봅시다.
Leaflet
`leaflet`은 지도 타일(이미지)와 GeoJSON을 비롯한 다양한 형태의 지리 정보를 웹에 표현하는 JS 라이브러리 입니다. 지도 라이브러리에는 leaflet 외에도 `OpenLayers`라는 라이브러리로도 있습니다. OpenLayers는 Leaflat 보다 더 많은 기능을 기본적으로 제공합니다. 단순히 웹에서 지도를 보여주고 지도에 데이터를 표시하는 프로젝트를 진행할 것이기에 Leaflet을 선택했습니다.
초기 세팅
먼저 `vite`을 이용해 vanilla Ts 환경을 세팅합니다.
npm create vite@latest ./vanillaTs-leaflet
npm i설치가 완료됐으면 `leaflet`을 설치해 줍니다.
npm i leaflet
npm i -D @types/leafletindex.html에 지도가 들어갈 `div#map`을 만들어 줍니다.
<style>
* { margin: 0; padding: 0; }
#map { height: 100vh; width: 100vw; }
</style>
<body>
<div id="map"></div>
<script type="module" src="/src/main.ts"></script>
</body>
Leaflet 라이브러리
이제 Leaflet 라이브러리를 이용해 지도를 `#map`에 그립니다.
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import './style.css';
import { MAP_INIT_POSITION } from './configs/constants';
import { TILE_SERVER_URL } from './configs/settings';
// Map 객체 생성 및 DOM에 추가
const map = L.map('map');
// settings
map.setView(MAP_INIT_POSITION, 13);
// controls
map.addControl(L.control.scale({ imperial: true, metric: true }));
// layers
map.addLayer(L.tileLayer(TILE_SERVER_URL.OSM_GLOBAL, { maxZoom: 19 }));
map.addLayer(L.marker(MAP_INIT_POSITION));중요한 부분은 `Map`객체를 생성하는 부분과 `tileLayer`를 추가하는 부분입니다.
`L.map`으로 Map객체를 생성하고 DOM에 추가합니다. 인자로 HTMLElement의 ID값 혹은 HTMLElement를 넣어 어디에 그릴건지 특정해 줍니다. 위에 만든 div#map에 그립니다.
`tileLayer`부분이 타일서버에서 이미지 타일을 받아와 그리는 부분입니다. OSM기반의 많은 타일 서버가 있습니다.
위와 같이 leaflet을 이용하면 쉽게 웹에 지도를 표시할 수 있습니다.
