코로나 검사소 - 4. MapView

안녕하세요. Skillist입니다.

 

아마도 코로나 검사소 앱에 대한 마지막 포스팅입니다.

드디어, 마무리하고 RxSwift 새로운 프로젝트를 진행할 수 있습니다!! 무야호!

 

이번엔 MapKit을 사용해봤어요. 위치만 보여주면 되기에,

네이버맵이나 카카오맵은 오버스펙 같았습니다.

———————————————————————————————————————————————————

 

viewModel을 먼저 구현할게요.

 

16라인 : point에 대한 driver입니다.

 

17라인 : region에 대한 driver입니다.

 

19라인 : 이니셜라이저에서, center를 받아옵니다. 

 

21라인 : center를 통해 Observable<CLLocationCoordinate2D>을 생성합니다. share를 통해 하나의 시퀀스를 공유합니다.

 

30라인 : clLocation을 통해 driver를 생성합니다.

 

40라인 : clLocation을 통해 driver를 생성합니다.

 

———————————————————————————————————————————————————

 

이번에는 View를 볼까요???????? 

17라인 : 이번에 사용할 mapView입니다.

 

19라인 : 이니셜라이저입니다. 기본 함수를 호출합니다.

 

30라인 : viewModel 바인드입니다.

 

32, 39라인 : viewModel의 어노테이션을 받아와, mapView에 추가합니다.

 

47라인 : 뷰 설정이 따로 없어서, 구현 코드는 없습니다.

 

51라인 : snapKit을 통해 레이아웃을 구현합니다.

 

———————————————————————————————————————————————————

 

어때요??

 

러닝커브가 높다고 소문난 RxSwift.

이렇게 간단한 앱으로 시작하여, 차근차근 복잡한 앱을 만들어 나가면 익숙해지고, 눈감고도 코딩할 수 있지 않을까요????

 

생각해보니, 다음 포스팅이 한건 더 남아있습니다.

 

마무리까지 보고 가세요~

 

 

잘못되거나 부족한 내용 등, 피드백 감사합니다!

 

https://github.com/DeveloperSkillist/CoronaCenterRxSwift

 

 

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓  전체 코드  ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

import Foundation
import RxSwift
import RxCocoa
import MapKit

struct DetailMapViewModel {
    
    //viewModel -> view
    var mapAnnotation: Driver<MKPointAnnotation>
    var annotationRegion: Driver<MKCoordinateRegion>
    
    init(center: Center) {
        
        let clLocation = Observable.just(center)
            .map {
                return CLLocationCoordinate2D(
                    latitude: Double($0.lat) ?? .zero,
                    longitude: Double($0.lng) ?? .zero
                )
            }
            .share()
        
        mapAnnotation = clLocation
            .map {
                let annotation = MKPointAnnotation()
                annotation.coordinate = $0
                annotation.title = center.facilityName
                annotation.subtitle = center.phoneNumber
                return annotation
            }
            .asDriver(onErrorDriveWith: .empty())
        
        annotationRegion = clLocation
            .map {
                let span = MKCoordinateSpan(
                    latitudeDelta: 0.003,
                    longitudeDelta: 0.003
                )
                return MKCoordinateRegion(center: $0, span: span)
            }
            .asDriver(onErrorDriveWith: .empty())
    }
}

import UIKit
import RxSwift
import RxCocoa
import SnapKit
import MapKit

class DetailMapView: UIViewController {
    let disposeBag = DisposeBag()
    
    private let mapView = MKMapView()
    
    override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
        super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
        
        attribute()
        layout()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func bind(_ viewModel: DetailMapViewModel) {
        //annotation을 맵에 드라이브합니다.
        viewModel.mapAnnotation
            .drive(onNext: {
                self.mapView.addAnnotation($0)
            })
            .disposed(by: disposeBag)
        
        //annotation을 맵에 드라이브합니다.
        viewModel.annotationRegion
            .drive(onNext: {
                self.mapView.setRegion($0, animated: false)
            })
            .disposed(by: disposeBag)
    }
    
    
    private func attribute() {
        
    }
    
    private func layout() {
        [
            mapView
        ].forEach {
            view.addSubview($0)
        }
        
        mapView.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
    }
}