커스텀 마커 및 정보창 만들기, 마커를 커스텀 이미지로 변경하기

리액트 애플리케이션에서 맵을 사용할 때, 기본 제공되는 마커를 사용하는 것에는 한계가 있습니다.
이 때문에 많은 개발자들이 커스텀 마커와 정보창을 만들어 사용합니다. 본 포스트에서는 커스텀 마커 및
정보창을 만들고, 마커를 커스텀 이미지로 변경하는 방법에 대해 자세히 설명하겠습니다.

1. 커스텀 마커와 정보창 개요

커스텀 마커란 지도 위에 표시되는 맞춤형 아이콘입니다. 일반적으로 장소를 직관적으로 표시하기 위해 사용되며,
정보를 담고 있는 정보창과 함께 사용되는 경우가 많습니다. 또한, 커스텀 이미지 마커를 사용하면
브랜드 아이덴티티를 표현하는 데 유리합니다.

1.1. 필요한 라이브러리

현재 커스텀 마커 및 정보창을 구현하기 위해서는 react-leaflet 또는 google-maps-react와 같은
라이브러리를 사용할 수 있습니다. 아래 예제에서는 react-leaflet 라이브러리를 사용할 것입니다.

2. 프로젝트 세팅하기

새로운 리액트 프로젝트를 시작하기 위해 create-react-app을 사용할 수 있습니다.
다음 명령어로 새 프로젝트를 시작하세요:

npx create-react-app custom-marker-example

프로젝트가 생성되면 react-leaflet 라이브러리를 설치합니다:

npm install leaflet react-leaflet

3. 커스텀 마커와 정보창 구현하기

3.1. 기본 맵 설정하기

첫 번째 단계는 기본 맵을 설정하는 것입니다. 아래의 코드를 src/App.js 파일에 작성합니다:

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

const App = () => {
    return (
        
            
        
    );
};

export default App;
    

위 코드는 서울을 중심으로 하는 기본 맵을 설정합니다. TileLayer를 사용하여 OpenStreetMap의 타일을
로드합니다.

3.2. 커스텀 마커 및 정보창 추가하기

기본 맵 위에 커스텀 마커와 팝업을 추가합니다. 아래와 같이 코드를 수정합니다:

import React from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import L from 'leaflet';
import customMarkerIcon from './path/to/custom-marker.png'; // 커스텀 마커 이미지 경로

const App = () => {
    const customIcon = new L.Icon({
        iconUrl: customMarkerIcon,
        iconSize: [25, 41], // 아이콘 크기
        iconAnchor: [12, 41], // 아이콘 기준점
        popupAnchor: [1, -34], // 팝업 기준점
    });

    return (
        
            
            
                
                    안녕하세요! 서울입니다.
                
            
        
    );
};

export default App;
    

이 코드에서는 커스텀 이미지 마커를 사용하여 서울의 위치에 커스텀 마커를 추가했습니다.
L.Icon을 사용하여 커스텀 아이콘의 속성을 설정합니다.

3.3. CSS 스타일링

약간의 CSS 스타일링을 추가하여 사용자 친화적인 맵을 만듭니다.
다음과 같은 스타일을 src/App.css에 추가하세요:

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

h1 {
    margin-top: 20px;
}

.map {
    height: 100vh;
    width: 100%;
}
    

4. 마무리

이제 리액트 애플리케이션에서 커스텀 마커와 정보창을 성공적으로 만들었습니다.
커스텀 마커와 정보창은 사용자가 지도를 더욱 직관적으로 이해하는 데 큰 도움을 줄 수 있습니다.
이 자료를 바탕으로 여러분의 리액트 프로젝트에 다양한 기능을 추가하여 더욱 풍부한 사용자 경험을 제공할 수 있습니다.

5. 다음 단계: 사용자 입력으로 마커 추가하기

이번 예제에서 커스텀 마커와 정보창을 만들었지만, 사용자 입력에 따라 마커를 추가하는 방법에도 도전해보세요.
이를 통해 지도 상에 여러 위치에 마커를 추가할 수 있는 인터페이스를 구현할 수 있습니다.

배운 내용을 활용하여 여러분의 프로젝트에 적용해보고, 다양한 커스텀 마커를 만들어보세요!