- Welcome
- Getting started
- Latest updates
- Foundations
-
Components
- Accordion
- Alert
- Alignment
- App Search Modal
- Aria live
- Autosuggest
- Badge
- Banner alert
- Bar chart
- Blockquote
- Bottom navigation
- Bottom sheet
- Breadcrumb
- Breakpoint
- Button
- Calendar
- Card
- Card list
- Card button
- Carousel
- Checkbox
- Chip
- Chip group
- Code
- Content cards
- Data Table
- Datepicker
- Description list
- Dialog
- Divider
- Drawer
- Field Set
- Flare
- Flat list
- Flight leg
- Floating action button
- Floating notification
- Form label
- Form validation
- Graphic promotion
- Horizontal navigation
- Icon
- Image
- Image Gallery
- Infinite scroll
- Info Banner
- Inset Banner
- Link
- List
- Map
- Mobile scroll container
- Modal
- Navigation bar
- Navigation Tab Group
- Nudger
- Overlay
- Page indicator
- Pagination
- Panel
- Phone input
- Picker
- Popover
- Price
- Progress bar
- Radio button
- Rating
- Rating Bar
- Scrollable calendar
- Search Modal
- Section header
- Section list
- Select
- Skeleton
- Skip link
- Slider
- Snackbar
- Snippet
- Spinner
- Split input
- Star rating
- Swap Button
- Switch
- Table
- Text
- Text input
- Theming
- Ticket
- Toast
- Tooltip
- Touchable native feedback
- Touchable overlay
- Search Input Summary
- Content
- Accessibility
- Contributing
- Localisation
Map
The map component is for embedding maps into pages.
Backpack/Map
Map markers
Day | Night |
---|---|
Usage
BPKMapView is a wrapper around MKMapView.
BPKMapAnnotationView contains the Backpack annotation component. BPKMapAnnotation can be used to represent a given annotation.
Objective-C
#import <Backpack/Map.h>
BPKMapView *mapView = [BPKMapView new];
mapView.delegate = self;
[mapView registerClass:BPKMapAnnotationView.class forAnnotationViewWithReuseIdentifier:@"Annotation"];
BPKMapAnnotation *edinburgh = [BPKMapAnnotation new];
edinburgh.title = @"Edinburgh";
edinburgh.alwaysShowCallout = YES;
edinburgh.coordinate = CLLocationCoordinate2DMake(55.95338, -3.189977);
[mapView addAnnotation:edinburgh];)
- (MKAnnotationView *_Nullable)mapView:(MKMapView *)mapView viewForAnnotation:(id<MKAnnotation>)annotation {
return [mapView dequeueReusableAnnotationViewWithIdentifier:ReuseIdentifier forAnnotation:annotation];
}
- (void)mapView:(MKMapView *)mapView didSelectAnnotationView:(MKAnnotationView *)view {
// do something
}
- (void)mapView:(MKMapView *)mapView didDeselectAnnotationView:(MKAnnotationView *)view {
// do something
}
Swift
import Backpack
let mapView = MKMapView()
mapView.delegate = self
mapView.register(BPKMapAnnotationView.self, forAnnotationViewWithReuseIdentifier: "Annotation")
let edinburgh = BPKMapAnnotation()
edinburgh.title = "Edinburgh"
edinburgh.alwaysShowCallout = true
edinburgh.coordinate = CLLocationCoordinate2D(latitude: 55.95338, longitude: -3.189977)
mapView.addAnnotation(edinburgh)
...
extension MapViewController: MKMapViewDelegate {
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
return mapView.dequeueReusableAnnotationView(withIdentifier: "Annotation", for: annotation)
}
func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
// do something
}
func mapView(_ mapView: MKMapView, didDeselect view: MKAnnotationView) {
// do something
}
}
Made with ❤️ by Skyscanner © 2024
© 2024 Skyscanner Backpack. Page last updated on Sep 11, 2023, 13:57