I am trying to set up a Map with UIKit, using SF Symbols as Annotations. So far so good.
The problem is that the symbols are black, i would like to change the color to white.
annotationView.image = UIImage(systemName: "23.circle.fill")!.withTintColor(.white, renderingMode: .alwaysTemplate)
doesn't do the job. As a matter of fact, if I use normal Pins, i am able to change the color.
It just doesn't work with SF Symbols.
This is my code
import SwiftUI
import MapKit
import UIKit
struct MapView: UIViewRepresentable {
func makeUIView(context: Context) -> MKMapView {
let myMapView = MKMapView(frame: .zero)
return myMapView
}
func updateUIView(_ view: MKMapView, context: Context) {
let coordinate = CLLocationCoordinate2D(latitude: 49.289912, longitude: 19.764172)
let span = MKCoordinateSpan(latitudeDelta: 0.027, longitudeDelta: 0.027)
let region = MKCoordinateRegion(center: coordinate, span: span)
view.setRegion(region, animated: true)
view.mapType = MKMapType.hybrid
view.delegate = context.coordinator
let Stand = Staende()
for x in 1...47 {
view.addAnnotation(Stand.mitDerNummer(x))
}
}
func makeCoordinator() -> MapViewCoordinator{
MapViewCoordinator(self)
}
}
// Just the location of annotations
class Staende {
var Standname: [Int: [CLLocationDegrees]] = [0: [49.289912, 11.764172],
1: [49.286350, 11.752594], 2: [49.285030, 11.756457], 3: [49.285660, 11.760449], 4: [49.288375, 11.756384],
5: [49.282156, 11.756804], 6: [49.282291, 11.759722], 7: [49.283888, 11.763349], 8: [49.296440, 11.769589],
9: [49.283813, 11.766361], 10: [49.282745, 11.767006], 11: [49.281876, 11.769693], 12: [49.285313, 11.770928],
13: [48.282069, 11.771333], 14: [49.285064, 11.773408], 15: [49.287436, 11.772958], 16: [49.287954, 11.771348],
17: [48.289525, 11.772810], 18: [49.290832, 11.771648], 19: [49.283636, 11.773671], 20: [49.292861, 11.773709],
21: [49.284230, 11.758675], 22: [49.297040, 11.775138], 23: [49.298002, 11.775465], 24: [49.294852, 11.774368],
25: [49.292690, 11.771520], 26: [49.287850, 11.754731], 27: [49.299254, 11.774461], 28: [49.284187, 11.753743],
29: [49.294497, 11.766336], 30: [49.293562, 11.766357], 31: [49.292035, 11.765755], 32: [49.294161, 11.763869],
33: [49.293591, 11.761708], 34: [49.292360, 11.763438], 35: [49.291680, 11.763557], 36: [49.290670, 11.762457],
37: [49.289053, 11.765481], 38: [49.289864, 11.769767], 39: [49.295175, 11.764827], 40: [49.288745, 11.760020],
41: [49.288123, 11.760888], 42: [49.288417, 11.762843], 43: [49.287116, 11.762057], 44: [49.286426, 11.757369],
45: [49.286686, 11.765102], 46: [49.287328, 11.767133], 47: [49.279872, 11.758877], 48: [0, 0],
49: [0, 0], 50: [0, 0]
]
func mitDerNummer(_ standNummer: Int) -> MKPointAnnotation {
let Stand = MKPointAnnotation()
Stand.title = "Stand \(standNummer)"
let latitude = Standname[standNummer]![0]
let longitude = Standname[standNummer]![1]
Stand.coordinate = CLLocationCoordinate2D(latitude: latitude, longitude: longitude)
return Stand
}
}
class MapViewCoordinator: NSObject, MKMapViewDelegate {
var mapViewController: MapView
let Stand = Staende()
init(_ control: MapView) {
self.mapViewController = control
}
func mapView(_ mapView: MKMapView, viewFor
annotation: MKAnnotation) -> MKAnnotationView?{
//Custom View for Annotation
let annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: "customView")
annotationView.canShowCallout = true
//Your custom image icon
for (standNummer, _) in Stand.Standname {
if annotation.title == "Stand \(standNummer)" {
annotationView.image = UIImage(systemName: "\(standNummer).circle")!.withTintColor(.red, renderingMode: .alwaysTemplate)
}
}
return annotationView
}
}
I also tried to changing it via UIImage extension with the following code:
extension UIImage {
func colorized(color : UIColor) -> UIImage {
let rect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)
UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
if let context = UIGraphicsGetCurrentContext() {
context.setBlendMode(.multiply)
context.translateBy(x: 0, y: self.size.height)
context.scaleBy(x: 1.0, y: -1.0)
context.draw(self.cgImage!, in: rect)
context.clip(to: rect, mask: self.cgImage!)
context.setFillColor(color.cgColor)
context.fill(rect)
}
let colorizedImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return colorizedImage!
}
}
I would prefer to have them in white color to have a better visualisation of them on the map
This works for me (adjust size as desired):
let circle = UIImage(systemName:"23.circle.fill")!.withTintColor(.white)
let size = CGSize(width: 40, height: 40)
v.image = UIGraphicsImageRenderer(size:size).image {
_ in circle.draw(in:CGRect(origin:.zero, size:size))
}