This project is a fork of MapboxAnnotationExtension, aiming to make it work with Maplibre's iOS SDK. The migration to use the Maplibre SDK isn't completed, yet. Therefore this Extension currently should't be used!
The Maplibre Annotation Extension is a lightweight library you can use with the Maplibre Maps SDK for iOS to quickly add basic shapes, icons, and other annotations to a map.
This extension leverages the power of runtime styling with an object oriented approach to simplify the creation and styling of annotations.
To install the Maplibre Annotation Extension using CocoaPods:
Create a Podfile with the following specification:
pod 'MaplibreAnnotationExtension', '0.0.1-beta.2'
Run pod repo update && pod install and open the resulting Xcode workspace.
Download and unzip the latest release.
Drag MaplibreAnnotationExtension.framework into your project's Embedded Binaries section in the project editor. In the sheet that appears, make sure "Copy items if needed" is checked, then select Finish.
Carthage and Swift Package Manager ("SPM") are currently not supported (see #64).
You can find a sample application within this project by running the annotationapp target.
The Maplibre Annotation Extension supports the addition of circles, lines, polygons, and symbols. Each shape type has its own corresponding controller which manages the addition of multiple shape objects of the same type.
Since the map needs to be finished loading before adding shapes to it, all shapes should be added within the MGLMapView:didFinishLoadingStyle:delegate method.
Circles represent a coordinate point on a map with an associated radius, measured in pixels.
func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
let circleAnnotationController = MGLCircleAnnotationController(mapView: self.mapView)
let circle = MGLCircleStyleAnnotation(center: CLLocationCoordinate2D(latitude: 59.31, longitude: 18.06), radius: 3.0, color: .blue)
circle.opacity = 0.5
circleAnnotationController.add(circle)
}Lines represent a connected series of coordinates.
func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
let lineAnnotationController = MGLLineAnnotationController(mapView: self.mapView)
let lineCoordinates = [
CLLocationCoordinate2D(latitude: 59, longitude: 18),
CLLocationCoordinate2D(latitude: 60, longitude: 20)
]
let line = MGLLineStyleAnnotation(coordinates: lineCoordinates, count: UInt(lineCoordinates.count))
line.color = .purple
lineAnnotationController.add(line)
}Polygons represent a connected series of coordinates, where the first and last coordinates are equal.
func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
let polygonAnnotationController = MGLPolygonAnnotationController(mapView: self.mapView)
let polygonCoordinates = [
CLLocationCoordinate2DMake(59, 18),
CLLocationCoordinate2DMake(62, 19),
CLLocationCoordinate2DMake(54, 20),
CLLocationCoordinate2DMake(59, 18)
]
let polygon = MGLPolygonStyleAnnotation(coordinates: polygonCoordinates, count: UInt(polygonCoordinates.count))
polygon.fillOutlineColor = .red
polygonAnnotationController.add(line)
}Symbols represent a coordinate point on a map with a label and an associated optional icon image. An image must be supplied to the map style's sprite before being able to assign it to be the icon image of a symbol.
func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
let attraction = UIImage(named: "attraction")
if let styleImage = attraction {
self.mapView.style?.setImage(styleImage, forName: "attraction")
}
let symbolAnnotationController = MGLSymbolAnnotationController(mapView: self.mapView)
let symbol = MGLSymbolStyleAnnotation(coordinate: CLLocationCoordinate2DMake(59, 18));
symbol.iconImageName = "attraction"
symbol.text = "This is a cool place!"
symbol.textFontSize = 16
symbolAnnotationController.add(symbol)
}Style annotations support callouts that appear when the annotation is selected. Each callout can display additional information about its annotation.
- To enable callouts for a style annotation, create a class property with the controller type you are enabling interaction for:
class ViewController: UIViewController {
var mapView: MGLMapView!
var circleAnnotationController: MGLCircleAnnotationController!
}- The style annotation must contain a title and must implement two delegate methods using the Maps SDK for iOS. The first method,
annotationCanShowCalloutshould returntrue. The second method,viewFor annotation:should return an emptyMGLAnnotationViewmatching the size of the style annotation's shape, as shown below.
extension ViewController : MGLMapViewDelegate {
func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
circleAnnotationController = MGLCircleAnnotationController(mapView: self.mapView)
let circle = MGLCircleStyleAnnotation(center: CLLocationCoordinate2D(latitude: 59.31, longitude: 18.06), radius: 3.0, color: .blue)
circle.opacity = 0.5
circle.title = "Title"
circleAnnotationController.add(circle)
}
func mapView(_ mapView: MGLMapView, annotationCanShowCallout annotation: MGLAnnotation) -> Bool {
return true;
}
func mapView(_ mapView: MGLMapView, viewFor annotation: MGLAnnotation) -> MGLAnnotationView? {
return MGLAnnotationView(frame: CGRect(x: 0, y: 0, width: 10, height: 10))
}
}Each MGLStyleAnnotation class can be assigned a specific set of properties to configure its layout and style. Additionally, MGLAnnotationControllers also have properties that can assign a specific layout property to all of its child MGLStyleAnnotations.
All of these properties mirror the same values specified in the Mapbox Style Specification. Below is a list of supported properties on each class along with its corresponding property within the Mapbox Style Specification.
MGLCircleStyleAnnotation
MGLCircleAnnotationController
MGLLineStyleAnnotation
MGLLineAnnotationController
MGLPolygonStyleAnnotation
MGLPolygonAnnotationController
MGLSymbolStyleAnnotation
Icon images
iconScaleiconImageNameiconRotationiconOffseticonAnchoriconOpacityiconColoriconHaloColoriconHaloWidthiconHaloBlur
Symbol text
textfontNamestextFontSizemaximumTextWidthtextLetterSpacingtextJustificationtextRadialOffsettextAnchortextRotationtextTransformtextOffsettextOpacitytextColortextHaloColortextHaloWidthtextHaloBlur
Icon image & symbol text
MGLSymbolAnnotationController
Icon images
iconAllowsOverlapiconIgnoresPlacementiconOptionaliconPaddingiconPitchAlignmenticonRotationAlignmenticonTextFiticonTranslationiconTranslationAnchorkeepsIconUpright
Symbol text
textAllowsOverlaptextLineHeighttextOptionaltextPaddingtextPitchAlignmenttextRotationAlignmenttextVariableAnchortextTranslationtextTranslationAnchorkeepsTextUpRightmaximumTextAngle
Icon image & symbol text
Please note that this is an experimental project and is subject to change.
If you have questions or feedback, please open a new issue in this repository.
If you'd like to report a bug, please include as much information as possible so that we can quickly reproduce the issue.