OPENSTREETMAP 출력하기

OpenStreetMap에서는 지도 출력을 위하여 osm 파일을 제공합니다. 하지만 제공된 파일을 직접 지도 이미지로 출력할 수는 없습니다. 외부 라이브러리의 도움을 받아야 합니다

여러 외부 라이브러리 중 이곳에서는 Leaflet을 사용하여 OpenStreetMap을 출력하는 방법에 대하여 설명합니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.min.js"></script>
<style>#mapid {height:500px;}</style>
 
<div id="mapid"></div>
<script>
var mymap = L.map('mapid').setView([37.511, 127.099], 16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: 'Map data © OpenStreetMap contributors'
}).addTo(mymap);
</script>

위 HTML을 작성한 파일을 웹 브라우저에서 열면 Leaflet 라이브러리를 사용한 OpenStreetMap이 표시됩니다.

HTML은 Leaflet 라이브러리를 가져와 mymap 변수에 L.map() 객체를 만들며 지도의 중앙을 위도 37.511, 경도 127.099로 설정합니다. 이후 L.tileLayer() 메서드를 사용하여 타일 이미지를 가져오는 것으로 지도가 출력됩니다. 지도에 사용되는 이미지 정보는 OpenStreetMap 서버에 존재합니다.