Mapkitをカスタマイズしたい

Question

実現したいこと

MapKitの地図にダークモードを適用させたいです。
MapKit を使って一定の縮尺に達するとMapTypeを切り替えたいです。

Google Mapでは似たようなことが出来るのでAppleのMapKitで実現出来ないか知りたいです。
https://note.com/runomimi/n/n3dc7cdcb6a62

前提

・AppleのMapKitを使用しています。
・ダークモード表示は成功しました。
・デフォルトは .hybridFlyover を使用しています。
・ある一定のレベル
（例：日本地図の拡大図→東京をタップ→東京の縮尺が表示）
されると地図を .standard にして ダークモード に切り替えたいです。
（UI/UXの都合上です。）

ダークモード表示に成功したので、今度はカスタマイズに挑戦したところ何故か ダークモード が解除されてしまいました。

発生している問題・エラーメッセージ

ダークモードに切り替わらない

該当のソースコード

// ダークモード成功
// 参考：https://stackoverflow.com/questions/58565004/how-can-i-turn-the-mkmapview-for-dark-mode

override func viewDidLoad() {
        super.viewDidLoad()

mapView.mapType = .standard
// ダークモード
if #available(iOS 13.0, *) {
    self.overrideUserInterfaceStyle = .dark
}
}

// ダークモード失敗
// カスタマイズ時

import UIKit
import MapKit
import CoreLocation

class TestMapKitViewController: UIViewController, MKMapViewDelegate, CLLocationManagerDelegate {
    
    // 接続
    @IBOutlet weak var mapView: MKMapView!
    
    // 変数
    // 地図に立てるピン
    var locationManager: CLLocationManager!
    
    override func viewDidLoad() {
        super.viewDidLoad()

       // 非同期開始
        DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 1) {
            self.focusOnPointAndShowGlobe()
        }
        
        // 縮尺を設定
        var region:MKCoordinateRegion = mapView.region
        region.span.latitudeDelta = 0.02
        region.span.longitudeDelta = 0.02
        // セット
        mapView.setRegion(region,animated:true)
        
        // デリゲート
        mapView.delegate = self
        
        // 表示タイプ
        self.mapView.mapType = .hybridFlyover
        
        // ダークモード
        if #available(iOS 13.0, *) {
            self.overrideUserInterfaceStyle = .dark
        }

        // 今回は現在地とする
        let coordinate = mapView.userLocation.coordinate
        // ピンを生成
        let pin = MKPointAnnotation()
        // ピンのタイトル・サブタイトルをセット
        pin.title = "タイトル" // 緯度・経度を入れる
        pin.subtitle = "サブタイトル"
        // ピンに一番上で作った位置情報をセット
        pin.coordinate = coordinate
        // mapにピンを表示する
        mapView.addAnnotation(pin)
        
        // ロングタップを検知
        let longPress = UILongPressGestureRecognizer(target: self, action: #selector(recognizeLongPress(sender:)))
        //MapViewにリスナーを登録
        self.mapView.addGestureRecognizer(longPress)
    }
    
    func focusOnPointAndShowGlobe() {
        let mapHeight = mapView.bounds.height // the constraint of visible Map area will base on HEIGHT of mapview
        
        let standardMapHeight: CGFloat = 450
        let standardCameraDistance: CGFloat = 24 * 1000 * 1000 // 24,000 km
        
        let targetDistance = (mapHeight / standardMapHeight) * standardCameraDistance
        let center = CLLocationCoordinate2D(latitude: 緯度, longitude: 経度)
        let camera = MKMapCamera(lookingAtCenter: center, fromDistance: targetDistance, pitch: 0, heading: 0)
        self.mapView.setCamera(camera, animated: true)
    }
    
    func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
        // タップされたピンの位置情報
        print(view.annotation?.coordinate as Any)
        // タップされたピンのタイトルとサブタイトル
        print(view.annotation?.title!! ?? "title")
        print(view.annotation?.subtitle)
    }
    
    //ロングタップした時に呼ばれる関数
    @objc func recognizeLongPress(sender: UILongPressGestureRecognizer) {
        //長押し感知は最初の1回のみ
        if sender.state != UIGestureRecognizer.State.began {
            return
        }
        
        // 位置情報を取得
        let location = sender.location(in: self.mapView)
        let coordinate = self.mapView.convert(location, toCoordinateFrom: self.mapView)
        
       // 緯度取得
        self.longitude = String(coordinate.latitude)
        // 出力
        print(coordinate.latitude)
       
        // 経度取得
        self.latitude = String(coordinate.longitude)
        // 出力
        print(coordinate.longitude)
        
        // タップした位置に照準を合わせる処理
        let span = MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        self.mapView.region = region
        
        // ピンを生成
        let pin = MKPointAnnotation()
        
        pin.subtitle = "緯度：" + self.longitude + "経度：" + self.latitude
        // タップした位置情報に位置にピンを追加
        pin.coordinate = coordinate
        self.mapView.addAnnotation(pin)
    }
    
    //アノテーションビューを返すメソッド
    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
        // MapViewのdelegateメソッド、viewFor annotationを定義している場合、
        // 地図上に青点のannotationを表示する処理がオーバライドされてしまう。
        // 青点のannotation(現在地表示しているピン)のみ、処理しないという記述を行うことで正しい動きになる。
        if annotation.title == "My Location"{
            return nil
        }
        
        //アノテーションビューの作成
        let pinView = MKMarkerAnnotationView(annotation: annotation, reuseIdentifier: nil)
        
        //吹き出しを表示可能にする
        pinView.canShowCallout = true
        
        // 例で削除ボタンの作成
        let button = UIButton()
        button.frame = CGRect(x:0,y:0,width:40,height:40)
        button.setImage(UIImage(systemName: "trash"), for: .normal)
        button.tintColor = UIColor.red
        
        //右側に削除ボタンを追加
        pinView.rightCalloutAccessoryView = button
        
        return pinView
    }
    
    func mapView(_ mapView: MKMapView, annotationView view: MKAnnotationView, calloutAccessoryControlTapped control: UIControl) {
        guard let annotation = view.annotation else {
            return
        }
        //右のボタンが押された場合はピンを消す。
        self.mapView.removeAnnotation(annotation)
    }
}

調べていること

・表示領域の変化イベントを取得する方法
https://teratail.com/questions/138369

・地図上の縮小・拡大に関するコード
https://qiita.com/shinobee/items/4406c4fdf2fbdcc40533

試したこと

・表示領域の変化を取得→一定の縮尺に達するとMapTypeを切り替える流れで実装できるのか知りたいです。
（同じような処理をしている例があまり見当たらなかったです。

調べているのですが地図のカスタマイズに疎く初心者でよくわかりません。
お手柔らかにお願いします。

Comments

[hoshi-takanori]

mapType を .hybridFlyover にしてるからでは…。

[退会済みユーザー]

どちらも mapView.mapType = .hybridFlyover で実装しています。
前者はそれでもダークモードになり、後者は何故かダークモードが適用されないです

[hoshi-takanori]

mapType が .hybridFlyover だと、地図自体は light でも dark でも同じように見えるんですけど…。
ダークモードが適用されないというのは、具体的にどんな感じなんでしょうか？

[退会済みユーザー]

すいません。
何か機能実装出来ていたのですがどこかコードが消えてしまったのか前者で再現できなくなっていました。。
ちょっと自分でも調べてみます。。

[退会済みユーザー]

mapView.mapType = .standard でした。
（これだとダークモードになります。）

[退会済みユーザー]

（質問内容変更します。）

[hoshi-takanori]

試しにボタンを配置して、押したら overrideUserInterfaceStyle や mapType を切り替えるようにしてみましたが、ちゃんと切り替わりましたけど…。

[退会済みユーザー]

質問内容を修正しました。
縮尺が一定の値以下になるとダークモードに変更。一定の値以上になると.hybridFlyoverに戻す処理を目指しています。

アドバイスいただけると幸いです。
よろしくお願いします。

[hoshi-takanori]

縮尺の変化を検知する方法を知りたいってこと？ 質問が変わりすぎ…。

[退会済みユーザー]

自己解決しました。。

[退会済みユーザー]

色々と回答ありがとうございます。

Answer 1

最初の質問：地図にダークモードを適用したい
変更後の質問：（ある条件下で）地図にダークモードを適用したい
（質問内容が一部変更になってしまい申し訳ありませんでした。）

１：regionDidChangeAnimatedで表示変化のイベントを取得
２：緯度と経度の値で縮尺に似たものを生成
３：1以下で MapType を切り替える

func mapView(_ mapView: MKMapView, regionDidChangeAnimated animated: Bool) {
       let span = mapView.region.span
        if span.latitudeDelta <= 1 || span.longitudeDelta <= 1 {
           print("============================")
           print("span.latitudeDeltaは")
           print(span.latitudeDelta)
           print("============================")
           print("span.longitudeDeltaは")
           print(span.longitudeDelta)
               print("============================")
               print("MapTypeをダークモードに切り替えてください。")
               print("============================")
                  DispatchQueue.main.async { 
                    // MapTypeを切り替える予定
                    // ダークモードにする
                    // 不要な情報も非表示にする
           }
           
       }else{
           // 特に何もしない
           print("特に何もしない")
       }
    }