How can i add location icon in swift?

Question

How can I add this things in my project. Are they integrated in MKMapView?

I didn't find anything in the internet about them.

Answer 1

1. Create two buttons on the top of the MKMapView add their constraints then write this code in viewDidLayourSubviews function to round the desired corners and add the shadows and images to the buttons. Choose their light grey background color from the identity inspector.

   override func viewDidLayoutSubviews() {
   
   let infoButtonShape = CAShapeLayer()
   infoButtonShape.bounds = infoButton.frame
   infoButtonShape.position = infoButton.center
   
   let locationButtonShape = CAShapeLayer()
   locationButtonShape.bounds = locationButton.frame
   locationButtonShape.position = locationButton.center
   
   
   infoButton.clipsToBounds = true
   infoButton.layer.masksToBounds = false
   infoButton.layer.shadowColor = UIColor.white.cgColor
   infoButton.layer.shadowRadius = 2
   infoButton.layer.shadowOpacity = 0.5
   infoButton.layer.shadowOffset = CGSize(width: 2, height: -2)
   infoButton.layer.shadowPath = UIBezierPath(rect: infoButton.bounds).cgPath
   
   
   
   locationButton.clipsToBounds = true
   locationButton.layer.masksToBounds = false
   locationButton.layer.shadowColor = UIColor.white.cgColor
   locationButton.layer.shadowRadius = 2
   locationButton.layer.shadowOpacity = 0.5
   locationButton.layer.shadowOffset = CGSize(width: -2, height: 2)
   locationButton.layer.shadowPath = UIBezierPath(rect: locationButton.bounds).cgPath
   
   infoButton.layer.shouldRasterize = true
   locationButton.layer.shouldRasterize = true
   
   locationButtonShape.path = UIBezierPath(roundedRect: locationButton.bounds, byRoundingCorners: [UIRectCorner.bottomLeft , UIRectCorner.bottomRight], cornerRadii: CGSize(width:10.0, height:10.0)).cgPath
   
   infoButtonShape.path = UIBezierPath(roundedRect: infoButton.bounds, byRoundingCorners: [UIRectCorner.topRight , UIRectCorner.topLeft], cornerRadii: CGSize(width:10.0, height:10.0)).cgPath
   
   infoButton.layer.mask = infoButtonShape
   locationButton.layer.mask = locationButtonShape
   
   infoButton.contentMode = .scaleAspectFit
   locationButton.contentMode = .scaleAspectFit
   
   
   infoButton.setImage(#imageLiteral(resourceName: "information-icon-3"), for: .normal)
   locationButton.setImage(#imageLiteral(resourceName: "LocationArrow-512"), for: .normal)
   
   
   }
   

2. Then add the IBAction of the button to update the location

    let manager = CLLocationManager()
   
   func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
   
   //Use location.last add to map then stop updating location
   manager.stopUpdatingLocation()
   
   }
   
   @IBAction func updateLocationAction(_ sender: UIButton) {
   
   manager.startUpdatingLocation()
   }
   

3. For the two other UIViews just create a UILabel for the temperature and an UIImageView for the cloud icon. And for the background color of the UILabel and the UIImageView and its corner radius you can do something similar as the ones i did for the button but this time choosing the right corners for the UIImageView and the left corners for the UILabel.

Here is the output: Of course you can use better sized icon images for your buttons.