지도 서비스를 개발할 때 가장 중요한 요소 중 하나는 사용자 정의 컨트롤을 추가하는 것입니다. 이를 통해 사용자는 지도 환경을 원하는 대로 사용할 수 있습니다. Mapbox는 많은 내장된 컨트롤을 제공하지만, 때로는 사용자 정의 컨트롤을 추가해야 할 때가 있습니다. 이번 블로그 포스트에서는 Mapbox지도에 커스텀 컨트롤을 추가하는 방법을 살펴보겠습니다.
커스텀 컨트롤 생성하기
먼저, 커스텀 컨트롤을 생성하는 방법부터 알아보겠습니다. Mapbox GL JS에서는 mapboxgl.Control 클래스를 사용하여 컨트롤을 정의할 수 있습니다.
class CustomControl {
onAdd(map) {
this.map = map;
this.container = document.createElement('div');
this.container.className = 'mapboxgl-control-custom';
// 커스텀 컨트롤의 내용을 추가하는 코드를 작성할 수 있습니다.
// 예를 들어, 버튼을 생성하거나 추가 기능을 구현할 수 있습니다.
return this.container;
}
onRemove() {
this.container.parentNode.removeChild(this.container);
this.map = undefined;
}
}
위의 코드에서는 onAdd 메서드를 통해 커스텀 컨트롤을 지도에 추가하고, onRemove 메서드를 통해 커스텀 컨트롤을 지도에서 제거합니다. 또한, this.container 변수를 통해 커스텀 컨트롤의 HTML 요소를 생성하여 반환합니다.
커스텀 컨트롤 추가하기
커스텀 컨트롤을 생성했다면, 이제 이를 Mapbox지도에 추가해보겠습니다. Mapbox GL JS에서는 addControl 메서드를 사용하여 컨트롤을 추가할 수 있습니다.
const map = new mapboxgl.Map({
container: 'map-container',
style: 'mapbox://styles/mapbox/streets-v11',
center: [lng, lat],
zoom: 12
});
const customControl = new CustomControl();
map.addControl(customControl, 'top-right');
위의 코드에서는 new mapboxgl.Map을 사용하여 지도를 생성하고, addControl 메서드를 사용하여 커스텀 컨트롤을 지도에 추가합니다. 이때, addControl 메서드의 두 번째 인자로 컨트롤을 위치시킬 위치를 지정할 수 있습니다. 위의 코드에서는 컨트롤을 지도의 오른쪽 상단에 위치시키기 위해 'top-right'를 사용하였습니다.
커스텀 컨트롤 스타일링하기
커스텀 컨트롤을 추가한 후, 해당 컨트롤의 스타일링을 할 수 있습니다. 커스텀 컨트롤의 CSS 클래스를 지정하여 스타일을 적용할 수 있습니다.
.mapboxgl-control-custom {
background-color: #ffffff;
color: #000000;
padding: 10px;
border-radius: 4px;
}
.mapboxgl-control-custom:hover {
background-color: #f2f2f2;
}
위의 CSS 코드에서는 mapboxgl-control-custom 클래스를 가진 요소에 대한 스타일을 정의하였습니다. background-color, color, padding, border-radius 등을 사용하여 원하는 스타일을 적용할 수 있습니다. 또한, :hover 가상 클래스를 사용하여 마우스 오버 효과를 추가할 수도 있습니다.
이제, Mapbox지도에 커스텀 컨트롤을 추가하고 스타일링해보세요!