JSON(JavaScript Object Notation)은 데이터를 표현하고 교환하기 위한 경량의 형식입니다. JSON 데이터를 사용하여 지도 정보를 처리하는 것은 웹 개발에서 일반적인 작업입니다. 이 글에서는 자바스크립트에서 JSON 데이터를 가져와 지도 정보를 처리하는 방법에 대해 알아보겠습니다.

1. JSON 데이터 가져오기

먼저, JSON 데이터를 가져와야 합니다. 자바스크립트에서는 XMLHttpRequest 객체나 fetch 함수를 사용하여 서버로부터 JSON 데이터를 가져올 수 있습니다. 예를 들어, 아래 코드는 fetch 함수를 사용하여 JSON 데이터를 가져오는 예시입니다.

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    // JSON 데이터를 가지고 처리하는 코드
  });

fetch 함수를 호출한 후에는 then 메소드를 사용하여 비동기적으로 JSON 데이터를 가져오고, 가져온 데이터를 JSON 형태로 변환합니다. 이후에는 필요한 로직을 추가하여 JSON 데이터를 처리할 수 있습니다.

2. JSON 데이터 처리하기

JSON 데이터를 가져온 후에는 해당 데이터를 처리해야 합니다. 지도 정보를 처리하는 방법은 다양할 수 있지만, 대표적으로는 지도 라이브러리와의 연동 혹은 자체적으로 구현하는 방법이 있습니다.

2.1. 지도 라이브러리와의 연동

많은 지도 API가 JSON 형식의 데이터를 받아서 지도에 표시할 수 있도록 지원하고 있습니다. 예를 들어, Leaflet이라는 인기 있는 지도 라이브러리는 GeoJSON(지리적인 정보를 담은 JSON 형식) 데이터를 지도로 표시할 수 있습니다.

// Leaflet 라이브러리를 이용하여 JSON 데이터 처리
const map = L.map('map').setView([37.5833, 127], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
}).addTo(map);

fetch('data.json')
  .then(response => response.json())
  .then(jsonData => {
    L.geoJSON(jsonData).addTo(map);
  });

위 예시에서는 Leaflet을 사용하여 JSON 데이터를 지도에 표시하는 방법을 보여줍니다. fetch 함수를 통해 JSON 데이터를 가져온 후, L.geoJSON을 사용하여 데이터를 지도에 추가합니다.

2.2. 자체 구현

지도 라이브러리를 사용하지 않고 자체적으로 지도를 구현하려는 경우에도 JSON 데이터를 처리할 수 있습니다. 예를 들어, JSON 데이터 안에 있는 위치 정보를 바탕으로 지도에 마커를 표시하는 방법이 있습니다.

// 자체적으로 구현한 지도 처리 코드 예시
fetch('data.json')
  .then(response => response.json())
  .then(jsonData => {
    jsonData.forEach(location => {
      const marker = new google.maps.Marker({
        position: { lat: location.lat, lng: location.lng },
        map: map,
        title: location.name,
      });
    });
  });

위 예시에서는 Google Maps API를 사용하여 JSON 데이터 안에 있는 위치 정보를 바탕으로 지도에 마커를 표시합니다. fetch 함수를 통해 JSON 데이터를 가져온 후, 데이터를 순회하며 위치 정보를 지도에 추가하는 코드를 작성합니다.

3. 마치며

이 글에서는 자바스크립트에서 JSON 데이터를 사용하여 지도 정보를 처리하는 방법에 대해 알아보았습니다. JSON 데이터를 가져오고 해당 데이터를 지도 라이브러리와의 연동이나 자체 구현을 통해 처리할 수 있습니다. 지도 정보를 처리하는 방법은 다양하므로, 상황에 맞게 적절한 방법을 선택하여 사용하면 됩니다.