add a permanent label below a marker swift

Question

I want to add multiple markers to the map view. Each marker having a text label below it always i.e it should always be visible. Also I want to add my own image as its icon.

Herewith I am attaching a screenshot of what I want.

Code Work

  func addGroundOverlay(position: CLLocationCoordinate2D, veh_num: String) {

    let overlay = GMSGroundOverlay(position: position, icon: newImage(text: veh_num, size: CGSize(width: 150.0, height: 150.0)), zoomLevel: 10)
    overlay.bearing = 0
    overlay.map = (self.view as! GMSMapView)
}

func newImage(text: String, size: CGSize) -> UIImage {

    let data = text.data(using: String.Encoding.utf8, allowLossyConversion: true)
    let drawText = NSString(data: data!, encoding: String.Encoding.utf8.rawValue)

    let textFontAttributes = [
        NSAttributedStringKey.font: UIFont(name: "Helvetica Bold", size: 10)!,
        NSAttributedStringKey.foregroundColor: UIColor.red,
        ]

    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    drawText?.draw(in: CGRect(x: 0,y: 0, width: size.width, height: size.height), withAttributes: textFontAttributes)
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return newImage!
}

Image for what I have tried

result image

https://stackoverflow.com/questions/38274115/ios-swift-mapkit-custom-annotation ?? tried this.. — Egghead, Dec 23 '17 at 10:34
@PrashantTukadiya snippet and title appear on clicking the marker. I want my label to be always visible instead of on the marker click — Pooja Mishra, Dec 23 '17 at 10:34
@PoojaMishra I understand your question but I dont think you can drop a label instead of image on map. you have to use snniplet. — dahiya_boy, Dec 23 '17 at 10:45
@PoojaMishra Mail them -> We have done R&D on this issue and we found that google only specified snippet on their map. Here is the [Google Marker Doc](https://developers.google.com/maps/documentation/ios-sdk/marker), please check it out. — dahiya_boy, Dec 23 '17 at 10:51
@PoojaMishra As i am thinking, annotation means you'r highlighting that point. If you use label as annotation then it overrides many coordinates of the map that is not a good idea. Thats why either of the map google & apple doesn't allows this thing. Hope now u'r cleared. — dahiya_boy, Dec 23 '17 at 10:54
@PoojaMishra Check my answer, it is working properly in apple map, follow the steps as I mentioned it will work for google map also. — dahiya_boy, Dec 23 '17 at 13:07

dahiya_boy · Accepted Answer · 2017-12-26T12:44:28.073

I found out the solution, as lack of time I tried for Apple Map, but you try for google map also.

Steps

Get the location where you wanted to show annotation.
Add this point annotation on Map.
Create a UILabel(says, lbl) with text as you wanted.
Add this text on a view (says, viewAn).
Now capture the viewAn and make it image.
Use this image for location marker.

Below is the code work for Apple Map and out of simulator is added below it and it is working properly. Follow the above steps and definatly it will work for google map also.

Code Work

    import UIKit
    import MapKit

    class MapVC: UIViewController, MKMapViewDelegate {


    @IBOutlet weak var mapView: MKMapView! // Apple mapview Outlet

    var location: CLLocationCoordinate2D = CLLocationCoordinate2D(latitude: 28.5961279, longitude: 77.1587375)

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        let anno = MKPointAnnotation();
        anno.coordinate = location;
        mapView.addAnnotation(anno);
    }
    // To capture view
    func captureScreen(_ viewcapture : UIView) -> UIImage {

        UIGraphicsBeginImageContextWithOptions(viewcapture.frame.size, viewcapture.isOpaque, 0.0)
        viewcapture.layer.render(in: UIGraphicsGetCurrentContext()!)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image!;
    }

    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
        // Don't want to show a custom image if the annotation is the user's location.
        guard !(annotation is MKUserLocation) else {
            return nil
        }

        // Better to make this class property
        let annotationIdentifier = "AnnotationIdentifier"

        var annotationView: MKAnnotationView?
        if let dequeuedAnnotationView = mapView.dequeueReusableAnnotationView(withIdentifier: annotationIdentifier) {
            annotationView = dequeuedAnnotationView
            annotationView?.annotation = annotation
        }
        else {
            annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: annotationIdentifier)
            annotationView?.rightCalloutAccessoryView = UIButton(type: .detailDisclosure)
        }

        if let annotationView = annotationView {
            // Configure your annotation view here
            // view for annotation
            let viewAn = UIView()
            viewAn.frame = CGRect(x: 0, y: 0, width: 80, height: 18)
            // label as required
            let lbl = UILabel()
            lbl.text = "ABC 123"
            lbl.textColor = UIColor.black
            lbl.backgroundColor = UIColor.cyan
            // add label to viewAn
            lbl.frame = viewAn.bounds
            viewAn.addSubview(lbl)
            // capture viewAn
            let img = self.captureScreen(viewAn)

            annotationView.canShowCallout = true
            // set marker
            annotationView.image = img
        }

        return annotationView
      }


}

OutPut :

Edit : image trasparency

use this below func

func changeWhiteColorTransparent(_ image: UIImage) -> UIImage {
    let rawImageRef = image.cgImage as! CGImage
    let colorMasking : [CGFloat] = [222, 255, 222, 255, 222, 255]
    UIGraphicsBeginImageContext(image.size)
    let maskedImageRef: CGImage = rawImageRef.copy(maskingColorComponents: colorMasking)!
    do {
        //if in iphone
        UIGraphicsGetCurrentContext()?.translateBy(x: 0.0, y: image.size.height)
        UIGraphicsGetCurrentContext()?.scaleBy(x: 1.0, y: -1.0)
    }

    UIGraphicsGetCurrentContext()?.draw(maskedImageRef, in: CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height))

   let result = UIGraphicsGetImageFromCurrentImageContext() as! UIImage


    UIGraphicsEndImageContext()
    return result ?? UIImage()
}

Func callie

Replace code of upper annotationview with below

let viewAn = UIView()
        viewAn.frame = CGRect(x: 0, y: 0, width: 80, height: 18)
        let lbl = UILabel()
        lbl.text = "ABC 123"
        lbl.textColor = UIColor.black
        lbl.backgroundColor = UIColor.clear
        viewAn.backgroundColor = UIColor.white
        lbl.frame = viewAn.bounds
        viewAn.addSubview(lbl)
        let img = self.captureScreen(viewAn)

        let aImgNew = self.changeWhiteColorTransparent(img)

        annotationView.backgroundColor = UIColor.clear
        annotationView.canShowCallout = true
        annotationView.image = aImgNew

Output:

I have tried the code for google maps. Please look into it as I am not getting the desired result. I have attached my code in the question. — Pooja Mishra, Dec 26 '17 at 07:44
@PoojaMishra You still not done as I said, This is MKAnnotaionView, as u asked how to do with it in comments. Your code is updated last 2 days ago. — dahiya_boy, Dec 26 '17 at 07:46
@PoojaMishra You forgot the steps 3 & 4. Recheck as how I done and compare it. — dahiya_boy, Dec 26 '17 at 07:53
how to make the uiimage background colour clear/transparent? means your label's background form cyan to clear so that the map behind it is clearly visible. I have tried this: aview.backgroundColor = UIColor.clear aview.alpha = 0. It is not working but making the background black — Pooja Mishra, Dec 26 '17 at 12:05
@PoojaMishra chnage UILabel bg color clear along with view color clear. You don't need to set alpha as 0. — dahiya_boy, Dec 26 '17 at 12:08
code. let aview = UIView(frame: CGRect(x: 0, y: 0, width: 70, height: 60)) aview.backgroundColor = UIColor.clear let myImage = UIImageView(frame: CGRect(x: 20, y: 5, width: 30, height: 30)) aview.addSubview(myImage) myImage.backgroundColor = UIColor.clear let myLabel = UILabel(frame: CGRect(x: 0, y: 40, width: 70, height: 15)) aview.addSubview(myLabel) myLabel.backgroundColor = UIColor.clear myLabel.font = UIFont(name: "Helvetica Neue", size: 10.0) myLabel.textAlignment = .center — Pooja Mishra, Dec 26 '17 at 12:18
@PoojaMishra May be you can't do that, bcz you converting view into image, so you have to create transparent image. If you clear the the view it creates the black image as default. — dahiya_boy, Dec 26 '17 at 12:21
is there nothing to make a uiimage with transparent background? — Pooja Mishra, Dec 26 '17 at 12:22
Instead can you give me any other idea so that my marker icon and marker label are placed well below each other though I have only one position coordinates for where the vehicle icon should be. To make them place exactly below each other I thought to use a view which now seems to be useless. — Pooja Mishra, Dec 26 '17 at 12:37
@PoojaMishra check my edit answer, is there any other issue?? — dahiya_boy, Dec 26 '17 at 12:45
The background has become clear but now I am not able to change the labels txt color — Pooja Mishra, Dec 27 '17 at 04:44

add a permanent label below a marker swift

1 Answers1