Mapbox는 강력한 맵 플랫폼으로서, 사용자가 지도 내의 피처와 상호작용할 수 있게 해줍니다. 이 기능을 사용하면 지도에 표시된 피처에 대한 클릭 및 호버 이벤트를 처리하고 추가 정보를 표시할 수 있습니다. 이번 블로그 포스트에서는 Mapbox의 지도 내 피처 상호작용 기능에 대해 알아보겠습니다.

지도 내 피처에 클릭 이벤트 추가하기

지도 내의 특정 피처에 대한 클릭 이벤트를 처리하는 것은 매우 간단합니다. 먼저, map.on('click', callback) 메소드를 사용하여 클릭 이벤트 리스너를 등록합니다. 그리고 콜백 함수 내에서 클릭된 피처에 대한 추가 작업을 수행할 수 있습니다.

map.on('click', function(e) {
  var features = map.queryRenderedFeatures(e.point);
  if (features.length > 0) {
    // 클릭된 피처에 대한 작업 수행
    console.log(features);
  }
});

map.queryRenderedFeatures(point) 함수를 사용하면 클릭된 포인트에 해당하는 피처를 가져올 수 있습니다. 이를 통해 클릭된 피처에 접근하고 필요한 작업을 수행할 수 있습니다.

지도 내 피처에 호버 이벤트 추가하기

지도 내의 피처에 호버 이벤트를 추가하는 것도 매우 간단합니다. mouseenter 및 mouseleave 이벤트 리스너를 사용하여 호버 이벤트를 처리할 수 있습니다.

map.on('mouseenter', 'layer-name', function(e) {
  // 호버된 피처에 대한 작업 수행
});

map.on('mouseleave', 'layer-name', function() {
  // 호버 해제된 피처에 대한 작업 수행
});

mouseenter 이벤트에서는 호버된 피처에 대한 추가 작업을 수행할 수 있습니다. 반대로 mouseleave 이벤트에서는 호버가 해제된 피처에 대한 작업을 수행할 수 있습니다. 'layer-name'은 호버 이벤트를 추가하려는 피처 레이어의 이름입니다.

추가 정보 표시하기

클릭 또는 호버 이벤트가 발생할 때, 해당 피처에 대한 추가 정보를 표시할 수 있습니다. 예를 들어, 정보 창이나 팝업을 사용하여 피처에 대한 세부 정보를 표시할 수 있습니다.

map.on('click', function(e) {
  var features = map.queryRenderedFeatures(e.point);
  if (features.length > 0) {
    var feature = features[0]; // 여기서는 첫 번째 피처만 사용
    var popup = new mapboxgl.Popup()
      .setLngLat(feature.geometry.coordinates)
      .setHTML('<h3>' + feature.properties.title + '</h3><p>' + feature.properties.description + '</p>')
      .addTo(map);
  }
});

위 예제에서는 클릭된 피처의 좌표와 속성을 사용하여 팝업을 생성하고 지도에 추가하고 있습니다. 이렇게 함으로써 사용자는 클릭한 피처에 대한 세부 정보를 쉽게 볼 수 있습니다.

이상으로 Mapbox지도에서 지도 내 피처 상호작용을 위한 간단한 예제를 살펴보았습니다. Mapbox의 풍부한 API를 사용하면 클릭, 호버 이벤트 처리 및 추가 정보 표시와 같은 기능을 더욱 향상시킬 수 있습니다.

참고 문서: https://docs.mapbox.com/mapbox-gl-js/api/