Static map component (#1115)

* init of static map views

* add placeholder and reload images

ElementX/Sources/Other/MapLibre/MapAssets.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ElementX/Sources/Other/MapLibre/MapAssets.xcassets/mapBlurred.imageset/Contents.json

@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "filename" : "lightMapBlurred.pdf",
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "DarkMapBlurred.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ElementX/Sources/Other/MapLibre/MapLibreStaticMapView.swift

@@ -0,0 +1,115 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import CoreLocation
+import SwiftUI
+
+struct MapLibreStaticMapView<PinAnnotation: View>: View {
+    private let coordinates: CLLocationCoordinate2D
+    private let zoomLevel: Double
+    private let mapTilerStatic: MapTilerStaticMapProtocol
+    private let pinAnnotationView: PinAnnotation
+    @Environment(\.colorScheme) private var colorScheme
+    @ScaledMetric private var height: CGFloat
+    @ScaledMetric private var width: CGFloat
+    @State private var attempt = 0
+    
+    init(coordinates: CLLocationCoordinate2D, zoomLevel: Double, mapTilerStatic: MapTilerStaticMapProtocol, height: CGFloat, width: CGFloat, @ViewBuilder pinAnnotationView: () -> PinAnnotation) {
+        self.coordinates = coordinates
+        self.zoomLevel = zoomLevel
+        self.mapTilerStatic = mapTilerStatic
+        _height = .init(wrappedValue: height)
+        _width = .init(wrappedValue: width)
+        self.pinAnnotationView = pinAnnotationView()
+    }
+    
+    var body: some View {
+        if let url = mapTilerStatic.staticMapURL(for: colorScheme.mapStyle, coordinates: coordinates, zoomLevel: zoomLevel, size: .init(width: width, height: height)) {
+            AsyncImage(url: url) { phase in
+                switch phase {
+                case .empty:
+                    Image("mapBlurred")
+                case .success(let image):
+                    ZStack {
+                        image
+                            .resizable()
+                            .aspectRatio(contentMode: .fill)
+                        pinAnnotationView
+                    }
+                case .failure:
+                    errorView
+                @unknown default:
+                    EmptyView()
+                }
+            }
+            .id(attempt)
+            .frame(width: width, height: height)
+            .clipped()
+        } else {
+            Image("mapBlurred")
+        }
+    }
+    
+    var errorView: some View {
+        Button {
+            attempt += 1
+        } label: {
+            ZStack {
+                Image("mapBlurred")
+                VStack {
+                    Image(systemName: "arrow.clockwise")
+                    Text(L10n.actionStaticMapLoad)
+                }
+            }
+        }
+    }
+}
+
+private extension ColorScheme {
+    var mapStyle: MapTilerStyle {
+        switch self {
+        case .light:
+            return .light
+        case .dark:
+            return .dark
+        @unknown default:
+            return .light
+        }
+    }
+}
+
+struct MapLibreStaticMapView_Previews: PreviewProvider {
+    static var previews: some View {
+        MapLibreStaticMapView(coordinates: CLLocationCoordinate2D(),
+                              zoomLevel: 15,
+                              mapTilerStatic: MapTilerStaticMapMock(),
+                              height: 150, width: 300) {
+            Image(systemName: "mappin.circle.fill")
+                .padding(.bottom, 35)
+        }
+    }
+}
+
+private struct MapTilerStaticMapMock: MapTilerStaticMapProtocol {
+    func staticMapURL(for style: MapTilerStyle, coordinates: CLLocationCoordinate2D, zoomLevel: Double, size: CGSize) -> URL? {
+        switch style {
+        case .light:
+            return URL(string: "https://www.maptiler.com/img/cloud/home/map5.webp")
+        case .dark:
+            return URL(string: "https://www.maptiler.com/img/cloud/home/map6.webp")
+        }
+    }
+}

ElementX/Sources/Other/MapLibre/MapTilerStaticMap.swift

@@ -0,0 +1,45 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import CoreLocation
+
+struct MapTilerStaticMap: MapTilerStaticMapProtocol {
+    private let lightURL: String
+    private let darkURL: String
+    private let key: String
+
+    init(key: String, lightURL: String, darkURL: String) {
+        self.lightURL = lightURL
+        self.darkURL = darkURL
+        self.key = key
+    }
+    
+    func staticMapURL(for style: MapTilerStyle, coordinates: CLLocationCoordinate2D, zoomLevel: Double, size: CGSize) -> URL? {
+        var path: String
+        switch style {
+        case .light:
+            path = lightURL
+        case .dark:
+            path = darkURL
+        }
+        
+        path.append(String(format: "/static/%f,%f,%f/%dx%d@2x.png", coordinates.longitude, coordinates.latitude, zoomLevel, Int(size.width), Int(size.height)))
+        
+        guard let url = URL(string: path) else { return nil }
+        let authorization = MapTilerAuthorization(key: key)
+        return authorization.authorizeURL(url)
+    }
+}

ElementX/Sources/Other/MapLibre/MapTilerStaticMapProtocol.swift

@@ -0,0 +1,21 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import CoreLocation
+
+protocol MapTilerStaticMapProtocol {
+    func staticMapURL(for style: MapTilerStyle, coordinates: CLLocationCoordinate2D, zoomLevel: Double, size: CGSize) -> URL?
+}

ElementX/Sources/Other/MapLibre/MapTilerStyleBuilder.swift

@@ -17,12 +17,18 @@
 import Foundation
 
 struct MapTilerStyleBuilder: MapTilerStyleBuilderProtocol {
-    let lightURL: String
-    let darkURL: String
-    let key: String
+    private let lightURL: String
+    private let darkURL: String
+    private let key: String
+    
+    init(lightURL: String, darkURL: String, key: String) {
+        self.lightURL = lightURL
+        self.darkURL = darkURL
+        self.key = key
+    }
     
     func dynamicMapURL(for style: MapTilerStyle) -> URL? {
-        let path: String
+        var path: String
         switch style {
         case .light:
             path = lightURL
@@ -30,6 +36,8 @@ struct MapTilerStyleBuilder: MapTilerStyleBuilderProtocol {
             path = darkURL
         }
         
+        path.append("/style.json")
+        
         guard let url = URL(string: path) else { return nil }
         let authorization = MapTilerAuthorization(key: key)
         return authorization.authorizeURL(url)