Dans les articles précédents nous avons traité :

• montrant la carte
• montrant l'emplacement actuel de l'utilisateur

Affichage de l'annotation de points

Tout d'abord, nous voulons montrer quoi que ce soit, alors commençons par PointAnnotation. Tout ce dont nous avons besoin, ce sont les coordonnées de notre point.

Avant Mapbox 10

var pointAnnotations = [MGLPointAnnotation]()
let point = MGLPointAnnotation()
point.coordinate = CLLocationCoordinate2D(latitude: 50.6710, longitude: 20.2990)
point.title = "\(50.6710), \(20.2990)"
pointAnnotations.append(point)
        
mapView?.addAnnotations(pointAnnotations)

var pointAnnotation = PointAnnotation(coordinate: CLLocation(latitude: 50.6710, longitude: 20.2990).coordinate)
pointAnnotation.image = .init(image: UIImage(named: "red_pin")!, name: "red_pin")
let pointAnnotationManager = mapView?.annotations.makePointAnnotationManager()
pointAnnotationManager?.annotations = [pointAnnotation]

Affichage des annotations de cercle

L'autre type d'annotation que nous pourrions souhaiter est l'annotation circulaire, par exemple, lorsque nous voulons afficher le rayon de quelque chose.

Avant Mapbox 10

let circleLayer = MGLCircleStyleLayer(identifier: "circle-layer", source: source)
circleLayer.circleColor = NSExpression(forConstantValue: UIColor.blue)
circleLayer.circleRadius = NSExpression(forConstantValue: 100)
circleLayer.circleStrokeWidth = NSExpression(forConstantValue: 2)
circleLayer.circleStrokeColor = NSExpression(forConstantValue: UIColor.green)
 
self.addLayer(circleLayer)

var circleAnnotation = CircleAnnotation(centerCoordinate: CLLocation(latitude: 50.6710, longitude: 20.2990).coordinate)
circleAnnotation.circleRadius = 100
circleAnnotation.circleColor = .init(.red)
let circleAnnotationManager = mapView?.annotations.makeCircleAnnotationManager()
circleAnnotationManager?.annotations = [circleAnnotation]

Affichage des annotations de polygone

Et le dernier est une couche de polygones

Avant Mapbox 10

let polygonLayer = MGLFillStyleLayer(identifier: "polygon-layer", source: source)
polygonLayer.fillColor = NSExpression(forConstantValue: UIColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 0.3))
 
self.addLayer(polygonLayer)

let polygon = Polygon(center: CLLocation(latitude: 50.6710, longitude: 20.2990).coordinate, radius: 1000.0, vertices: 64) // Radius is in meters
        
var polygonAnnotation = PolygonAnnotation(polygon: polygon)
polygonAnnotation.fillColor = StyleColor(UIColor.blue.withAlphaComponent(0.3))
        
let polygonAnnotationManager = mapView?.annotations.makePolygonAnnotationManager()
        
polygonAnnotationManager?.annotations = [polygonAnnotation]

Si nous voulons avoir beaucoup d'annotations sur la carte, il est préférable de les considérer comme une couche plutôt que comme un point sur la carte.

Avant Mapbox 10

let feature = MGLPointFeature()
feature.coordinate = CLLocation(latitude: 50.6710, longitude: 20.2990).coordinate
feature.attributes = ["name": "image-propertie"]
mapView?.style?.setImage(UIImage(named: "red_pin")!, forName: "image-propertie")
if let source = mapView?.style?.source(withIdentifier: "poi-source") as? MGLShapeSource {
   let newShape = MGLShapeCollectionFeature(shapes: [feature])
   source.shape = newShape
} else {
   let source = MGLShapeSource(identifier:"poi-source", features: [feature], options: nil)
   mapView?.style?.addSource(source)
}
guard let sourceNew = mapView?.style?.source(withIdentifier: "poi-source"), mapView?.style?.layer(withIdentifier: "poi-layer") == nil else {
   return
}
let poiLayer = MGLSymbolStyleLayer(identifier: "poi-layer", source: sourceNew)
poiLayer.iconImageName = NSExpression(forConstantValue: "{name}")
mapView?.style?.addLayer(poiLayer)

var feature = Feature(geometry: .point(Point(CLLocation(latitude: 50.6710, longitude: 20.2990).coordinate)))
feature.properties = ["name": .string("image-propertie")]
try? mapView?.mapboxMap.style.addImage(UIImage(named: "red_pin")!, id: "image-propertie")
var source = GeoJSONSource()
source.data = .featureCollection(FeatureCollection(features: [feature]))
try? mapView?.mapboxMap.style.addSource(source, id: "poi-source")
var poiLayer = SymbolLayer(id: "poi-layer")
poiLayer.source = "poi-source"
poiLayer.iconImage = .constant(.name("{name}"))
try? mapView?.mapboxMap.style.addLayer(poiLayer)

Conclusion

Nous pouvons maintenant afficher des annotations sur la carte.

Voici également le projet avec le code de cet article.