커스텀 마커 추가하기: MapLibre GL과 Geoapify Marker API 사용 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

MapLibre GL을 사용하는 웹 개발자, 지도 기능을 구현하는 개발자

난이도: 중급 (JavaScript 및 API 사용 기초 지식 필요)

핵심 요약

• HTML 기반 마커와 GeoJSON 레이어 두 가지 방식으로 MapLibre GL에 커스텀 마커 추가 가능
• Geoapify Marker API를 사용하면 이미지 호스팅 없이 레티나 대응 마커 생성 가능
• maplibregl.Marker 클래스와 map.addImage() 메서드를 통해 마커 동적 생성 및 스타일링

섹션별 세부 요약

1. 지도 초기화

• Geoapify 벡터 타일 사용한 MapLibre GL 지도 생성
• CDN을 통해 maplibregl.Map 객체 생성 및 API 키 설정
• 예시 코드:

```javascript

const map = new maplibregl.Map({

container: 'map',

style: https://tiles.geoapify.com/v1/geoapify/terrain?apiKey=YOUR_API_KEY,

center: [-74.0445481714432, 40.6892534],

zoom: 11

});

```

2. 단일 마커 추가

• HTML 요소 기반 마커 생성
• markerIconSize 객체로 마커 크기 및 그림자 설정
• Geoapify Marker API URL 파라미터로 아이콘 스타일 지정 (예: type=awesome, color=%23c3e2ff)
• maplibregl.Marker 클래스를 사용하여 지도에 마커 추가 및 팝업 연결

3. GeoJSON 레이어로 여러 마커 추가

• Geoapify Places API로 파리의 카페 데이터 가져오기
• map.loadImage()로 Geoapify 생성된 아이콘 로드 및 등록 ("rosa-pin")
• GeoJSON 데이터를 map.addSource()로 추가 후 symbol 레이어 생성
• 클릭/호버 이벤트 처리로 인터랙티브 팝업 및 커서 변경 기능 추가

결론

• Geoapify Marker API를 통해 이미지 호스팅 없이 레티나 대응 마커 생성 가능
• maplibregl.Marker와 map.addImage()를 활용해 HTML 기반 마커 및 GeoJSON 레이어 방식으로 지도에 커스텀 마커 추가
• Symbol 레이어 사용 시 다수 마커의 렌더링 효율성 향상 및 확장성 확보
• 실무 적용 시: Geoapify Marker Icon Playground에서 아이콘 스타일 미리 확인 후 URL 파라미터 조정 권장