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

Subviews on top of the map view. The i is an iOS resource. UIButton -> type -> Detail Disclosure

Answer 2

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.