Add a label on MGLPolygon

Question

I have a situation where I need to draw an MGLPolygon on a map(MapBox) and I also want to give a UILabel like text on the polygon. The label has to be at the centroid of the polygon and it should be always visible. I found a code with which I can find the centroid of a given polygon, But I couldn't add a label to polygon. I have done the coding in SWIFT so swift developers please help me. Thanks in advance and Happy Coding :)

Answer 1

func mapView(_ mapView: MGLMapView, viewFor annotation: MGLAnnotation) -> MGLAnnotationView? {

    if let currentAnnotation = annotation as? AreaAnnotation {

        let reuseIdentifier = currentAnnotation.areaTitle
        var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: reuseIdentifier!)

        if annotationView == nil {
            annotationView = MGLAnnotationView(reuseIdentifier: reuseIdentifier)
            annotationView?.frame = CGRect(x: 0, y: 0, width: 120, height: 90)
            annotationView!.backgroundColor = UIColor.clear

            let detailsLabel:UILabel = UILabel()
            detailsLabel.frame = CGRect(x: 30, y: 60, width: 60, height: 25)
            detailsLabel.textAlignment = .center
            detailsLabel.text = currentAnnotation.areaTitle
            //                detailsLabel.textColor = UIColor(red:175/255 ,green:255/255, blue:255/255 , alpha:0.75)
            detailsLabel.textColor = UIColor.white
            detailsLabel.font = UIFont(name: "HelveticaNeue-CondensedBlack", size: 15)

            let strokeTextAttributes = [NSAttributedStringKey.strokeColor : UIColor.black, NSAttributedStringKey.strokeWidth : -5.0,] as [NSAttributedStringKey : Any]

            detailsLabel.attributedText = NSAttributedString(string: titleLabel.text!, attributes: strokeTextAttributes)
            detailsLabel.backgroundColor = UIColor.black.withAlphaComponent(1.0)
            detailsLabel.clipsToBounds = true
            detailsLabel.layer.cornerRadius = 5.0
            detailsLabel.layer.borderWidth = 2.0
            detailsLabel.layer.borderColor = UIColor.white.cgColor
            annotationView?.addSubview(detailsLabel)
        }
        return annotationView
    }
    return nil
}

Thanks @jmkiley but I wanted to clear out that issue as fast as possible so I used this tweak, which was the exact thing I wanted.

Answer 2

If you have the center point of the polygon, you could use it to create a MGLPointFeature. Then create a MGLShapeSource and MGLSymbolStyleLayer with it. Provide the text to that layer. For example:

import Mapbox

class ViewController: UIViewController, MGLMapViewDelegate {

var mapView : MGLMapView!

var line: MGLPolyline?

override func viewDidLoad() {
    super.viewDidLoad()

    mapView = MGLMapView(frame: view.bounds)
    view.addSubview(mapView)
    mapView.delegate = self

   let coords = [
                  CLLocationCoordinate2D(latitude: 38.0654, longitude:     -88.8135),
                  CLLocationCoordinate2D(latitude: 41.7549, longitude: -88.8135),
                  CLLocationCoordinate2D(latitude: 41.7549, longitude: -83.1226),
                  CLLocationCoordinate2D(latitude: 38.0654, longitude: -83.1226)
    ]

    let polygon = MGLPolygon(coordinates: coords, count: UInt(coords.count))
    mapView.addAnnotation(polygon)
}

func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
    let point = MGLPointFeature()
    point.coordinate = CLLocationCoordinate2D(latitude: 40.0781, longitude: -85.6714)

    let source = MGLShapeSource(identifier: "point-source", features: [point], options: nil)
    style.addSource(source)

    let layer = MGLSymbolStyleLayer(identifier: "point-layer", source: source)
    layer.text = MGLStyleValue(rawValue: "Polygon A")
    style.addLayer(layer)
}
}