🗺MapView에 📌annotation 표시하고 실시간 업데이트하기

목표

mapView에 유저를 표시하고, 표시 이미지를 변경하며 실시간으로 업데이트를 해본다.

Annotation 모델 만들기

Annotation 모델을 생성한다. 이 모델은 uid와 coordinate를 가지고 있다. 위치값은 계속 변경이 되므로 dynamic을 붙인다. dynamic키워드는 모델 변수에 대한 변경 사항을 Realm에 알리고, 결과적으로 이를 데이트 베이스에 반영할 수 있도록 한다.

import MapKit

class Annotation: NSObject, MKAnnotation {
    var uid: String
    dynamic var coordinate: CLLocationCoordinate2D
    
    init(uid: String, coordinate: CLLocationCoordinate2D) {
        self.uid = uid
        self.coordinate = coordinate
    }
    
    func updateAnnotationPosition(withCoordinate coordinate: CLLocationCoordinate2D) {
        UIView.animate(withDuration: 0.2) {
            self.coordinate = coordinate
        }
    }
    
}

annotation 띄우기

Service 내부의 fetchDrivers 함수이다. 이 함수는 유저의 위치를 받아 근처의 운전자들을 fetch하는 함수이다. 파이어베이스에서 유저의 위치에서 반경 50이내의 운전자의 위치값들을 관찰한다. 운전자의 위치가 변경되면, 변경된 위치의 운전자를 반환한다.

*운전자가 반경을 벗어났을 때 마크를 지우는 기능을 따로 추가해야 할 것 같다.

import Firebase
import CoreLocation
import GeoFire

struct Service {
    
    static let shared = Service()
    
    // location -> nearby drivers
    func fetchDrivers(location: CLLocation, completion: @escaping(User) -> Void) {
        let geoFire = GeoFire(firebaseRef: REF_DRIVER_LOCATIONS)
        
        REF_DRIVER_LOCATIONS.observe(.value) { snapshot in
            geoFire.query(at: location, withRadius: 50).observe(.keyEntered, with: { (uid, location) in
                self.fetchUserData(uid: uid) { user in
                    var driver = user
                    driver.location = location
                    completion(driver)
                }
            })
        }
    }
}

드라이버 실시간 업데이트

뷰가 로드되면 fetchDrivers 함수를 실행한다. 유저의 위치값을 위에서 만든 fetchDrivers함수에 주고 근처 운전자들을 받는다. 각각 운전자의 위치값을 통해 annotation(표시)를 만든다. driverIsVisible이 false일 때만 표시한다. driverIsVisible은 Bool값으로

맵뷰에 있는 표시들중에 해당 운전자 uid와 같은 표시들만 업데이트를 하고, 맵뷰에 해당 운전자의 표시가 없다면 표시를 추가한다.

override func viewDidLoad() {
    super.viewDidLoad()
    ...
    fetchDrivers()
}

// location -> drivers -> add annotations
private func fetchDrivers() {
    guard let location = sharedLocationManager?.location else { return }
    Service.shared.fetchDrivers(location: location) { driver in
        guard let coordinate = driver.location?.coordinate else { return }
        let annotation = DriverAnnotation(uid: driver.uid, coordinate: coordinate)
        
        // Update driver annotation
        var driverIsVisible: Bool {
            return self.mapView.annotations.contains { annotation -> Bool in
                guard let driverAnno = annotation as? DriverAnnotation else { return false }
                if driverAnno.uid == driver.uid {
                    driverAnno.updateAnnotationPosition(withCoordinate: coordinate)
                    return true
                }
                return false
            }
        }
        
        if !driverIsVisible {
            self.mapView.addAnnotation(annotation)
        }
    }
}

annotation 이미지 변경하기

annotation의 기본 이미지(빨간 원에 있는 흰색 핀)말고 방향 이미지로 변경하였다.

extension HomeController: MKMapViewDelegate {
    
    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
        if let annotation = annotation as? DriverAnnotation {
            let view = MKAnnotationView(annotation: annotation, reuseIdentifier: DRIVER_ANNOTATION)
            view.image = UIImage(systemName: "location.circle.fill")
            return view
        }
        return nil
    }
    
}

아마 이후에 흰 테두리를 추가한 후 그림자를 넣고, 매칭된 운전자의 표시는 색상을 변경하고 유저와의 거리가 멀면 alpha값을 줄이던가 할 것 같다. 운전자가 가는 방향에 따라(이전 위치값과 현재 위치값의 차이를 통해 방향을 얻음) 저 표시의 방향을 변경하는 것도 예정이다. 이런 디테일들은 프로젝트가 거의 끝나면 추가하고, 따로 벨로그에 정리하겠다.