728x90
안녕하세요,
오늘은 Leaflet를 활용하여 OpenStreetMap 지도 출력해보도록 하겠습니다.
OpenStreetMap은 전 세계의 지리 정보를 누구나 자유롭게 편집하고 사용할 수 있는 오픈소스 지도 서비스 입니다.
OSM 데이터는 지도 앱, 연구 프로젝트, 게임, 물류 시스템 등 여러 방면에서 사용되며, Leaflet, Mapbox, QGIS 같은 다양한 지리 정보 시스템(GIS)에서 쉽게 불러와 사용할 수 있습니다.
Leaflet는 웹 애플리케이션에 지도를 추가하고 상호작용을 가능하게 해주는 오픈소스 JavaScript 라이브러리입니다. Leaflet는 가볍고 빠르며 직관적인 API를 제공하여, 복잡한 설정 없이도 지도를 쉽게 웹 페이지에 구현할 수 있습니다.
Leaflet를 활용하여 지도를 출력하는 예제 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet OpenStreetMap 예제</title>
<style>
#map { height: 500px; width: 100%; }
</style>
</head>
<body>
<div id="map"></div> <!-- 지도가 표시될 요소 -->
<script>
// Leaflet를 사용한 지도 설정
const map = L.map('map').setView([37.5665, 126.9780], 13); // 서울 위치 및 줌 설정
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
}).addTo(map);
</script>
</body>
</html>
실행 화면입니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] OpenStreetMap 지도 출력하여 특정 위치에 마커 찍기 (2) | 2024.11.03 |
|---|---|
| [JavaScript] 로컬스토리지 사용해 즐겨찾는 링크 저장하기 (0) | 2024.10.31 |
| [JavaScript] 스네이크 게임 완성도 올리기 (0) | 2024.10.25 |
| [JavaScript] 스네이크 게임 만들기 (4) | 2024.10.19 |
| [JavaScript] 비행기 슈팅 게임 만들기 - (5) 점수, 목숨, 다시 시작 구현 (2) | 2024.10.10 |