MapLibre GL JS와 Geoapify Marker API를 활용한 커스텀 마커 및 데이터 레이어 구현 가이드

핵심 기술

본 콘텐츠는 오픈소스 JavaScript 라이브러리인 MapLibre GL JS와 Geoapify Marker API를 결합하여, 웹 지도에 동적이고 시각적으로 풍부한 커스텀 마커를 구현하는 방법을 상세히 안내합니다. 이를 통해 기존 Mapbox GL JS의 대안으로 MapLibre GL JS를 활용하고, Geoapify의 API를 통해 이미지 없이도 다양한 스타일의 마커를 효율적으로 생성 및 적용하는 실질적인 방법을 배울 수 있습니다.

기술적 세부사항

• MapLibre GL JS 기초 설정: CDN을 통해 MapLibre GL JS 라이브러리를 포함하고, Geoapify 벡터 타일을 사용하는 기본적인 지도 인스턴스를 생성합니다.
• HTML 기반 커스텀 마커:
  • <div> 요소를 생성하고 CSS 배경 이미지로 Geoapify Marker API를 통해 동적으로 생성된 아이콘을 설정합니다.
  • 아이콘의 타입 (awesome), 색상 (color), 심볼 (icon), 크기 (contentSize, scaleFactor) 등을 URL 파라미터로 제어합니다.
  • MapLibre GL's Marker 클래스를 사용하여 생성된 DOM 요소를 지도에 배치하고, anchor와 offset을 통해 정확한 위치 및 그림자 고려한 정렬을 수행합니다.
  • 클릭 시 표시될 팝업을 MapLibre GL's Popup 클래스를 사용하여 설정합니다.
• GeoJSON 데이터 레이어로 여러 마커 추가:
  • Geoapify Places API를 사용하여 특정 지역(예: 파리) 내의 장소(예: 카페) 데이터를 GeoJSON 형식으로 가져옵니다.
  • Geoapify Marker API를 통해 재사용 가능한 커스텀 아이콘(예: rosa-pin)을 생성하고 MapLibre GL에 등록합니다 (map.addImage).
  • 가져온 GeoJSON 데이터를 geojson 타입의 source로 MapLibre GL에 추가합니다.
  • symbol 타입의 layer를 생성하여 등록된 커스텀 아이콘(icon-image)으로 데이터를 시각화합니다.
  • icon-anchor, icon-offset, icon-allow-overlap 등의 레이아웃 옵션을 설정하여 마커의 표시 방식을 제어합니다.
  • 특정 레이어에 대한 클릭 이벤트를 등록하여 마커 클릭 시 장소 이름이 포함된 팝업을 표시하고, 마우스 오버 시 커서 모양을 변경하는 등 인터랙션을 구현합니다.

개발 임팩트

• 고해상도 (Retina-ready) 마커: 이미지 파일을 직접 디자인하거나 호스팅할 필요 없이, API 호출로 실시간 생성되는 고품질 마커를 사용할 수 있어 개발 및 유지보수 효율성을 높입니다.
• 유연한 스타일링: 아이콘의 모양, 색상, 크기 등을 URL 파라미터로 쉽게 제어할 수 있어 다양한 디자인 요구사항을 만족시킬 수 있습니다.
• 성능 최적화: 대규모 데이터셋의 경우, symbol 레이어를 활용하여 효율적인 렌더링이 가능하며, 이는 MapLibre GL JS의 강력한 WebGL 기반 렌더링 성능과 시너지를 냅니다.
• 오픈소스 활용: MapLibre GL JS는 오픈소스 프로젝트로, 상용 라이선스 제약 없이 자유롭게 사용할 수 있어 비용 절감 및 커스터마이징 유연성을 제공합니다.

커뮤니티 반응

콘텐츠 내에서는 JSFiddle 라이브 데모 링크를 제공하여 사용자가 직접 코드를 확인하고 실험해볼 수 있도록 유도하고 있습니다. 추가적인 질문이나 기능 확장(클러스터링, 필터링 등)에 대한 논의를 장려하고 있어, 개발자 커뮤니티와의 상호작용을 촉진합니다.