[react] 지도에서 생태 정보 표시하기

22 Dec 2023

react

React를 사용하여 웹 애플리케이션에서 지도 위에 생태 정보를 표시하는 방법에 대해 알아보겠습니다.

1. Map 표시하기

먼저, React에서 지도를 표시하는 방법에 대해 알아보겠습니다. 지도를 표시하기 위해서는 react-leaflet 라이브러리를 사용할 수 있습니다. 이 라이브러리를 사용하면 Leaflet 지도를 React 애플리케이션에 쉽게 통합할 수 있습니다.

import React from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';

function MapComponent() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '400px', width: '100%' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
    </MapContainer>
  );
}

2. 생태 정보 표시하기

다음으로, 생태 정보를 표시하기 위해 지도 위에 마커를 추가하고 해당 마커를 클릭했을 때 생태 정보를 표시할 수 있습니다.

import React, { useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

function EcoMarker() {
  const [ecoData, setEcoData] = useState("Ecological Information");

  function handleMarkerClick() {
    // 마커를 클릭했을 때 생태 정보를 가져오는 로직 작성
    setEcoData("Detailed ecological information");
  }

  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '400px', width: '100%' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <Marker position={[51.505, -0.09]} onClick={handleMarkerClick}>
        <Popup>{ecoData}</Popup>
      </Marker>
    </MapContainer>
  );
}

3. Conclusion

React를 사용하여 지도에서 생태 정보를 표시하는 방법에 대해 알아보았습니다. react-leaflet 라이브러리를 사용하여 지도를 표시하고 마커를 통해 생태 정보를 표시하는 방법을 배웠습니다. 생태 정보를 가져오는 부분은 API 호출 또는 데이터베이스 연동으로 구현할 수 있습니다.

더 많은 세부적인 설정이나 추가적인 기능을 구현하려면 leaflet 및 react-leaflet 공식 문서를 참고하시기를 권장합니다.

참고 자료

React-Leaflet 공식 문서