Refactor the MapTiler configuration into a single place. (#3944)

* Refactor the MapTiler configuration into a single place.

* Merge the MapAssets catalog into the normal one.

Author: pixlwave

ElementX.xcodeproj/project.pbxproj

@@ -97,7 +97,8 @@ final class AppSettings {
                   copyrightURL: URL,
                   acceptableUseURL: URL,
                   privacyURL: URL,
-                  supportEmailAddress: String) {
+                  supportEmailAddress: String,
+                  mapTilerConfiguration: MapTilerConfiguration) {
         self.defaultHomeserverAddress = defaultHomeserverAddress
         self.oidcRedirectURL = oidcRedirectURL
         self.websiteURL = websiteURL
@@ -106,6 +107,7 @@ final class AppSettings {
         self.acceptableUseURL = acceptableUseURL
         self.privacyURL = privacyURL
         self.supportEmailAddress = supportEmailAddress
+        self.mapTilerConfiguration = mapTilerConfiguration
     }
 
     // MARK: - Application
@@ -290,10 +292,10 @@ final class AppSettings {
     // MARK: - Maps
 
     // maptiler base url
-    let mapTilerBaseURL: URL = "https://api.maptiler.com/maps"
-
-    // maptiler api key
-    let mapTilerApiKey = Secrets.mapLibreAPIKey
+    private(set) var mapTilerConfiguration = MapTilerConfiguration(baseURL: "https://api.maptiler.com/maps",
+                                                                   apiKey: Secrets.mapLibreAPIKey,
+                                                                   lightStyleID: "9bc819c8-e627-474a-a348-ec144fe3d810",
+                                                                   darkStyleID: "dea61faf-292b-4774-9660-58fcef89a7f3")
 
     // MARK: - Presence
 

ElementX/Sources/Other/MapLibre/MapAssets.xcassets/mapBlurred.imageset/Contents.json renamed to ElementX/Resources/Assets.xcassets/images/location/mapBlurred.imageset/Contents.json

@@ -21,6 +21,7 @@ class PinnedEventsTimelineFlowCoordinator: FlowCoordinatorProtocol {
     private let timelineControllerFactory: TimelineControllerFactoryProtocol
     private let roomProxy: JoinedRoomProxyProtocol
     private let userIndicatorController: UserIndicatorControllerProtocol
+    private let appSettings: AppSettings
     private let appMediator: AppMediatorProtocol
     private let emojiProvider: EmojiProviderProtocol
 
@@ -36,13 +37,15 @@ class PinnedEventsTimelineFlowCoordinator: FlowCoordinatorProtocol {
          timelineControllerFactory: TimelineControllerFactoryProtocol,
          roomProxy: JoinedRoomProxyProtocol,
          userIndicatorController: UserIndicatorControllerProtocol,
+         appSettings: AppSettings,
          appMediator: AppMediatorProtocol,
          emojiProvider: EmojiProviderProtocol) {
         self.navigationStackCoordinator = navigationStackCoordinator
         self.userSession = userSession
         self.timelineControllerFactory = timelineControllerFactory
         self.roomProxy = roomProxy
         self.userIndicatorController = userIndicatorController
+        self.appSettings = appSettings
         self.appMediator = appMediator
         self.emojiProvider = emojiProvider
     }
@@ -106,7 +109,9 @@ class PinnedEventsTimelineFlowCoordinator: FlowCoordinatorProtocol {
     private func presentMapNavigator(geoURI: GeoURI, description: String?) {
         let stackCoordinator = NavigationStackCoordinator()
 
-        let params = StaticLocationScreenCoordinatorParameters(interactionMode: .viewOnly(geoURI: geoURI, description: description), appMediator: appMediator)
+        let params = StaticLocationScreenCoordinatorParameters(interactionMode: .viewOnly(geoURI: geoURI, description: description),
+                                                               mapURLBuilder: appSettings.mapTilerConfiguration,
+                                                               appMediator: appMediator)
         let coordinator = StaticLocationScreenCoordinator(parameters: params)
 
         coordinator.actions.sink { [weak self] action in

ElementX/Sources/Other/MapLibre/MapAssets.xcassets/mapBlurred.imageset/DarkMapBlurred.pdf renamed to ElementX/Resources/Assets.xcassets/images/location/mapBlurred.imageset/DarkMapBlurred.pdf

@@ -1076,7 +1076,9 @@ class RoomFlowCoordinator: FlowCoordinatorProtocol {
     private func presentMapNavigator(interactionMode: StaticLocationInteractionMode) {
         let stackCoordinator = NavigationStackCoordinator()
 
-        let params = StaticLocationScreenCoordinatorParameters(interactionMode: interactionMode, appMediator: appMediator)
+        let params = StaticLocationScreenCoordinatorParameters(interactionMode: interactionMode,
+                                                               mapURLBuilder: appSettings.mapTilerConfiguration,
+                                                               appMediator: appMediator)
         let coordinator = StaticLocationScreenCoordinator(parameters: params)
 
         coordinator.actions.sink { [weak self] action in
@@ -1563,6 +1565,7 @@ class RoomFlowCoordinator: FlowCoordinatorProtocol {
                                                                   timelineControllerFactory: timelineControllerFactory,
                                                                   roomProxy: roomProxy,
                                                                   userIndicatorController: userIndicatorController,
+                                                                  appSettings: appSettings,
                                                                   appMediator: appMediator,
                                                                   emojiProvider: emojiProvider)
 

ElementX/Sources/Other/MapLibre/MapAssets.xcassets/mapBlurred.imageset/lightMapBlurred.pdf renamed to ElementX/Resources/Assets.xcassets/images/location/mapBlurred.imageset/lightMapBlurred.pdf

@@ -37,6 +37,7 @@ internal enum Asset {
     internal static let stopRecording = ImageAsset(name: "images/stop-recording")
     internal static let launchBackground = ImageAsset(name: "images/launch-background")
     internal static let locationMarkerShape = ImageAsset(name: "images/location-marker-shape")
+    internal static let mapBlurred = ImageAsset(name: "images/mapBlurred")
     internal static let mediaPause = ImageAsset(name: "images/media-pause")
     internal static let mediaPlay = ImageAsset(name: "images/media-play")
     internal static let notificationsPromptGraphic = ImageAsset(name: "images/notifications-prompt-graphic")

ElementX/Sources/Application/AppSettings.swift

@@ -34,7 +34,7 @@ struct MapLibreMapView: UIViewRepresentable {
 
     @Environment(\.colorScheme) private var colorScheme
 
-    let builder: MapTilerStyleBuilderProtocol
+    let mapURLBuilder: MapTilerURLBuilderProtocol
 
     let options: Options
 
@@ -64,7 +64,7 @@ struct MapLibreMapView: UIViewRepresentable {
         // Don't set the same value twice. Otherwise, if there is an error loading the map, a loop
         // is caused as the `error` binding being set, which triggers this update, which sets a
         // new URL, which causes another error, and so it goes on round and round in a circle.
-        let dynamicMapURL = builder.dynamicMapURL(for: .init(colorScheme))
+        let dynamicMapURL = mapURLBuilder.dynamicMapURL(for: .init(colorScheme))
         if mapView.styleURL != dynamicMapURL {
             mapView.styleURL = dynamicMapURL
         }
@@ -85,7 +85,7 @@ struct MapLibreMapView: UIViewRepresentable {
     }
 
     private func makeMapView() -> MGLMapView {
-        let mapView = MGLMapView(frame: .zero, styleURL: colorScheme == .dark ? builder.dynamicMapURL(for: .dark) : builder.dynamicMapURL(for: .light))
+        let mapView = MGLMapView(frame: .zero, styleURL: mapURLBuilder.dynamicMapURL(for: colorScheme == .dark ? .dark : .light))
         mapView.logoViewPosition = .topLeft
         mapView.attributionButtonPosition = .topLeft
         mapView.attributionButtonMargins = .init(x: mapView.logoView.frame.maxX + 8, y: mapView.logoView.center.y / 2)

ElementX/Sources/FlowCoordinators/PinnedEventsTimelineFlowCoordinator.swift

@@ -24,6 +24,14 @@ enum MapLibreError: Error {
     case failedLocatingUser
 }
 
+/// The style to show a map in.
+///
+/// There can be any number of styles, we have defined one for light and another for dark.
+enum MapTilerStyle {
+    case light
+    case dark
+}
+
 enum MapTilerAttributionPlacement: String {
     case bottomRight = "bottomright"
     case bottomLeft = "bottomleft"

ElementX/Sources/FlowCoordinators/RoomFlowCoordinator.swift

@@ -11,7 +11,7 @@ import SwiftUI
 struct MapLibreStaticMapView<PinAnnotation: View>: View {
     private let coordinates: CLLocationCoordinate2D
     private let zoomLevel: Double
-    private let mapTilerStatic: MapTilerStaticMapProtocol
+    private let mapURLBuilder: MapTilerURLBuilderProtocol
     private let mapTilerAttributionPlacement: MapTilerAttributionPlacement
     private let mapSize: CGSize
     private let pinAnnotationView: PinAnnotation
@@ -22,24 +22,24 @@ struct MapLibreStaticMapView<PinAnnotation: View>: View {
     init(coordinates: CLLocationCoordinate2D,
          zoomLevel: Double,
          attributionPlacement: MapTilerAttributionPlacement,
-         mapTilerStatic: MapTilerStaticMapProtocol,
+         mapURLBuilder: MapTilerURLBuilderProtocol,
          mapSize: CGSize,
          @ViewBuilder pinAnnotationView: () -> PinAnnotation) {
         self.coordinates = coordinates
         self.zoomLevel = zoomLevel
-        self.mapTilerStatic = mapTilerStatic
+        self.mapURLBuilder = mapURLBuilder
         mapTilerAttributionPlacement = attributionPlacement
         self.mapSize = mapSize
         self.pinAnnotationView = pinAnnotationView()
     }
 
     var body: some View {
         GeometryReader { geometry in
-            if let url = mapTilerStatic.staticMapURL(for: colorScheme.mapStyle,
-                                                     coordinates: coordinates,
-                                                     zoomLevel: zoomLevel,
-                                                     size: mapSize, // temporary using a fixed size since the refresh doesn't work properly on the UITableView based timeline
-                                                     attribution: mapTilerAttributionPlacement) {
+            if let url = mapURLBuilder.staticMapURL(for: colorScheme.mapStyle,
+                                                    coordinates: coordinates,
+                                                    zoomLevel: zoomLevel,
+                                                    size: mapSize, // temporary using a fixed size since the refresh doesn't work properly on the UITableView based timeline
+                                                    attribution: mapTilerAttributionPlacement) {
                 AsyncImage(url: url) { phase in
                     switch phase {
                     case .empty:
@@ -66,7 +66,7 @@ struct MapLibreStaticMapView<PinAnnotation: View>: View {
     }
 
     private var placeholderImage: some View {
-        Image("mapBlurred")
+        Image(asset: Asset.Images.mapBlurred)
             .resizable()
             .scaledToFill()
     }
@@ -104,15 +104,22 @@ struct MapLibreStaticMapView_Previews: PreviewProvider, TestablePreview {
         MapLibreStaticMapView(coordinates: CLLocationCoordinate2D(),
                               zoomLevel: 15,
                               attributionPlacement: .bottomLeft,
-                              mapTilerStatic: MapTilerStaticMapMock(), mapSize: .init(width: 300, height: 200)) {
+                              mapURLBuilder: MapTilerURLBuilderMock(),
+                              mapSize: .init(width: 300, height: 200)) {
             Image(systemName: "mappin.circle.fill")
                 .padding(.bottom, 35)
         }
     }
 }
 
-private struct MapTilerStaticMapMock: MapTilerStaticMapProtocol {
-    func staticMapURL(for style: MapTilerStyle, coordinates: CLLocationCoordinate2D, zoomLevel: Double, size: CGSize, attribution: MapTilerAttributionPlacement) -> URL? {
+private struct MapTilerURLBuilderMock: MapTilerURLBuilderProtocol {
+    func dynamicMapURL(for style: MapTilerStyle) -> URL? { nil }
+    
+    func staticMapURL(for style: MapTilerStyle,
+                      coordinates: CLLocationCoordinate2D,
+                      zoomLevel: Double,
+                      size: CGSize,
+                      attribution: MapTilerAttributionPlacement) -> URL? {
         switch style {
         case .light:
             return URL(string: "https://www.maptiler.com/img/cloud/home/map5.webp")

ElementX/Sources/Generated/Assets.swift

@@ -0,0 +1,62 @@
+//
+// Copyright 2023, 2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+// Please see LICENSE files in the repository root for full details.
+//
+
+import CoreLocation
+
+/// All of the configuration necessary to use MapTiler maps.
+///
+/// The style IDs need to be generated with the account that the API key belongs to. For more information read
+/// [FORKING.md](https://github.com/element-hq/element-x-ios/blob/develop/docs/FORKING.md#setup-the-location-sharing)
+struct MapTilerConfiguration {
+    let baseURL: URL
+    let apiKey: String
+    /// A MapLibre style ID for a light-mode map.
+    let lightStyleID: String
+    /// A MapLibre style ID for a dark-mode map.
+    let darkStyleID: String
+}
+
+extension MapTilerConfiguration: MapTilerURLBuilderProtocol {
+    func dynamicMapURL(for style: MapTilerStyle) -> URL? {
+        var url = makeNewURL(for: style)
+        url.appendPathComponent("style.json", conformingTo: .json)
+        return url
+    }
+    
+    func staticMapURL(for style: MapTilerStyle,
+                      coordinates: CLLocationCoordinate2D,
+                      zoomLevel: Double,
+                      size: CGSize,
+                      attribution: MapTilerAttributionPlacement) -> URL? {
+        var url = makeNewURL(for: style)
+        url.appendPathComponent(String(format: "static/%f,%f,%f/%dx%d@2x.png",
+                                       coordinates.longitude,
+                                       coordinates.latitude,
+                                       zoomLevel,
+                                       Int(size.width),
+                                       Int(size.height)),
+                                conformingTo: .png)
+        url.append(queryItems: [.init(name: "attribution", value: attribution.rawValue)])
+        return url
+    }
+    
+    // MARK: Private
+    
+    private func makeNewURL(for style: MapTilerStyle) -> URL {
+        var url: URL = baseURL
+        url.appendPathComponent(styleID(for: style), conformingTo: .item)
+        url.append(queryItems: [URLQueryItem(name: "key", value: apiKey)])
+        return url
+    }
+    
+    private func styleID(for style: MapTilerStyle) -> String {
+        switch style {
+        case .light: lightStyleID
+        case .dark: darkStyleID
+        }
+    }
+}