JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/rbush.min.js"></script>
<div id="map"></div>

CSS

#map {
    height: 500px;
    width: 80%;
}

JavaScript

// Leaflet과 RBush를 이용한 간단한 지도 애플리케이션
const map = L.map('map').setView([37.5665, 126.9780], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// 데이터 (위도, 경도, 너비, 높이)
const data = [
    [37.56, 126.97, 0.01, 0.01],
    [37.57, 126.98, 0.02, 0.02],
    // ...
];

// RBush 초기화
const tree = new RBush();
tree.load(data);

// 지도 클릭 이벤트 처리
map.on('click', (event) => {
  console.log(event);
    const bounds = [[event.latlng.lat - 0.01, event.latlng.lng - 0.01],
                    [event.latlng.lat + 0.01, event.latlng.lng + 0.01]];
    const searchResult = tree.search(bounds);
  console.log(searchResult);
    // 검색 결과를 지도에 표시 (예: 마커)
    searchResult.forEach((item) => {
        L.marker([item[0], item[1]]).addTo(map);
    });
});