I migrated from old Mapbox Maps SDKs for iOS and macOS v6.x.x to mapbox-maps-ios v10.1.0.
A lot of API got changed.
I was able to restore same functionality using new SDK, however I could not find a way to animate annotations upon selection.
Before I used MGLAnnotationView, or MGLAnnotationImage for displaying annotations, and I could easily animate MGLAnnotationView by applying animation block with transformations I needed.
In a new SDK it's not the same. Annotations are now represented by struct PointAnnotation, therefore animation API is not accessible, as it's not a UIView subclass anymore.
What I'm looking for is a simple scale animation that should happen when user tap on the annotation.
Animation scales pin for 1.1 factor and return to 1.0, with duration of 350ms. It is not repeating animation, suppose to happen only once when user tap on the annotation.
I checked an example projects and from what I understand animation is possible by manipulating layers, but I'm not sure how to do that exactly.
Looking for help
As of Mapbox v10.4.3, the solution that works for me is by using View Annotations. You can add custom gesture recognizers, animations, etc inside your custom annotation view. https://docs.mapbox.com/ios/maps/guides/annotations/view-annotations/#create-a-view-annotation
let sampleCoordinate = CLLocationCoordinate2D(latitude: 39.7128, longitude: -75.0060)
let options = ViewAnnotationOptions(geometry: Point(sampleCoordinate), allowOverlap: true, anchor: .center)
let annotationView = CustomAnnotationView()
annotationView.rx.tapGesture().when(.recognized).subscribe(onNext: { [weak self] _ in
guard let self = self else { return }
self.viewModel.input.tappedAnnotation()
/// You can animate annotation view resize here when tapping specific annotation view, or you can also add it inside the custom annotation view
}).disposed(by: self.disposeBag)
try? self.mapView.viewAnnotations.add(annotationView, options: options)
class CustomAnnotationView: UIView {
// Do your customizations here
}
Related
I have observed MKMapView zoom-out on Double tap gesture, I didn't find any way to disable it. I tried to add own Double Tap Gesture to catch Double tap action but it still zoom out. Any thought?
There is no API to disable or change double-tap behavior with MKMapView.
But, if you really want to do so, one approach would be to find and remove the double-tap gesture recognizer from the MKMapView object.
In the project you shared, you could do that in makeUIView in your UIMapView class:
func makeUIView(context: UIViewRepresentableContext<UIMapView>) -> UIViewType {
self.configureView(mapView, context: context)
setRegion(to: palce)
if let v = mapView.subviews.first,
let ga1 = v.gestureRecognizers
{
let ga2: [UITapGestureRecognizer] = ga1.compactMap { $0 as? UITapGestureRecognizer } .filter { ($0.numberOfTapsRequired == 2) }
for g in ga2 {
v.removeGestureRecognizer(g)
}
}
return mapView
}
I wouldn't necessarily suggest that you do so, however.
Apple may change the MKMapView object in the future, which could then break this.
User's tend to prefer that common UI elements behave in expected ways.
Personally, I get rather annoyed when using an app and the developer has changed standard functionality of UI elements. For example, if I see a table view row with a disclosure indicator (the right-arrow / chevron), I expect that tapping the row will "push" to another screen related to that row. I've seen apps that do not follow that pattern, and it just gets confusing.
In the code posted, when you click on the annotation, the speech balloon pops up to say
Hello World!
Welcome to my marker
I would like to know how to make the speech bubble appear while using the app, and have the speech bubble display some text that the user would enter in, and disappear after about an hour or so. The bubble would be able to be seen by other users even if the user logged out or closed the app, and the bubble would still be open when the user goes back into the app, unless the window of time for the bubble has passed.
Thank-you
import Mapbox
class ViewController: UIViewController, MGLMapViewDelegate {
override func viewDidLoad() {
super.viewDidLoad()
let mapView = MGLMapView(frame: view.bounds)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
// Set the map’s center coordinate and zoom level.
mapView.setCenter(CLLocationCoordinate2D(latitude: 40.7326808, longitude: -73.9843407), zoomLevel: 12, animated: false)
view.addSubview(mapView)
// Set the delegate property of our map view to `self` after instantiating it.
mapView.delegate = self
// Declare the marker `hello` and set its coordinates, title, and subtitle.
let hello = MGLPointAnnotation()
hello.coordinate = CLLocationCoordinate2D(latitude: 40.7326808, longitude: -73.9843407)
hello.title = "Hello world!"
hello.subtitle = "Welcome to my marker"
// Add marker `hello` to the map.
mapView.addAnnotation(hello)
}
// Use the default marker. See also: our view annotation or custom marker examples.
func mapView(_ mapView: MGLMapView, viewFor annotation: MGLAnnotation) -> MGLAnnotationView? {
return nil
}
// Allow callout view to appear when an annotation is tapped.
func mapView(_ mapView: MGLMapView, annotationCanShowCallout annotation: MGLAnnotation) -> Bool {
return true
}
}
Are you wanting the user to enter text into a text field inside the annotation bubble? If so, consider subclassing MGLPointAnnotation and adding a text field to it. That might be a bit tricky though since it would appear that MGLPointAnnotation is a subclass of MGLShape, which appears to not be a subclass of the usual UIKit hierarchy of view/view-controller classes. You may be better off swapping out the Mapbox framework for a basic MapKit solution (...I don't know for what else you are relying on Mapbox though).
Apple's MapKit does have MKAnnotationView. There is a definite answer for how to add a UITextField to MKAnnotationView. See how to add UITextField in MKAnnotationView Title. You may need to modify the answer depending on how you want your annotation to behave.
If, on the other hand, you were thinking of the user entering text into a text field through another screen in the iOS app, there are many easy ways to properly implement a UITextField in a UIViewController, UIView, UITableViewController, UICollectionView, etc.
Alternatively, if you were thinking about the user entering text through a website, that is trivially easy with HTML forms.
For the approximate 1 or 3 hour(s) timeframe for displaying the bubble before it goes away, you would need to add a createdTimestamp property to the MKAnnotationView subclass. Just compare the current time periodically to the createdTimestamp on the annotation and if currentTime >= annotation.createTimestamp + oneHour, remove the annotation from the map. You can see about dates in Swift here: https://developer.apple.com/documentation/foundation/date
As far as "other users" seeing the bubble goes, that would require some sort of networked solution (such as a central server that synchronizes with these bubbles' data and then broadcasts them to other users). You would need a networked setup anyway if you were thinking of using website(s) to gather/display map data.
Presumably from your other question, I assume that you are using the map fullscreen. There are several approaches to this.
You could use the default I accessory button to add a target action to it. Which calls a custom UIView which has a textView and a submit button. Which then modifies your annotation.
Or you could modify your mapview to show a small textbox at the bottom of the screen which is then shifted upwards whilst editing and added to your annotation upon submitting.
When it comes to your timeout question I did not find anything in the MapBox's documentation to get you the results you want. I believe it needs some sort of backend server side timer function which will handle this accordingly.
We are coding in Swift to create an application with UI buttons. These UI buttons will add or remove markers depending on its status. Because we want the buttons to be layered on top of google maps we have two view controllers. The top view controller contains a button. When the button is pressed, we want to remove the markers that have a "bad" status.
This is our code to remove the marker:
func showOnlyGood(){
mapView.clear() //this is the google map (GMSMapView.map)
for x in arrayOfGood { //Array of good markers
x.map = mapView //Set good markers to show
}
for y in arrayOfBad { //Array of bad markers
y.map = nil //removes markers from map
}
}
The google maps gets updated if the function call is in viewDidLoad(), but when we call the function in the top view controller with the buttons it does not update the map accordingly.
We think this is an issue with refreshing the google map view and have tried many different solutions, but the google map view only shows what is initially in viewDidLoad().
First, if you just want the buttons to be layered on top of the map, just add the buttons to the view after you've added the map to the view; do not create a second view controller. Your problem is most likely caused by this awkward setup. You also don't have an #objc prefix in your action method, which would definitely prevent the button from executing its action.
#objc func updateButtons() {
mapView.clear() // clear the map
for i in someArray {
let marker = GMSMarker()
// configure parameters
marker.map = mapView
}
}
That method will update your map's markers. There is [probably] never a need to refresh the map, even if you want to change styles.
I follow this article Custom Call out
Every time when I zoom or panning on Mapbox View, the call out is automatically hide!
How to prevent this behavior?
Thanks
You need to add two class variables to your CustomCalloutView class. Add these two lines before your init method:
var dismissesAutomatically: Bool = false
var isAnchoredToAnnotation: Bool = true
This seems to fix the problem of the Callout being dismissed, and allows the callout to follow the annotation.
However, this runs into a new problem where every time the map is panned/zoomed, the callout seems to drop down about 10 pixels. I'm still trying to figure this out. I have opened another question here to see if anybody knows how to solve the issue.
As given above you need to add:
let dismissesAutomatically: Bool = false
let isAnchoredToAnnotation: Bool = true
so the callout does not drop down when panning you will also need to add:
override var center: CGPoint {
set {
var newCenter = newValue
newCenter.y = newCenter.y - bounds.midY
super.center = newCenter
}
get {
return super.center
}
}
Could you say which version of the Mapbox iOS SDK are you using? This bug should have been fixed for 3.4.0. You may want to try the latest version of the SDK, if you aren't already using it.
I recently started using scenekit for scenekit in iOS 8. I am facing difficulty in detecting whether the user has tapped or pressed on the object. Is there any way to do that?
See the documentation for the hitTest method. Call that from wherever you're handling touch events to get a list of 3D scene objects/locations "under" a 2D screen point.
An easy way to get sample code that shows the hitTest in action is to create a sample app using the Game template in XCode6. Create a new project, select the "Game" template.
The hitTest code should be there in the implementation of:
- (void) handleTap:(UIGestureRecognizer*)gestureRecognize
Add a tap gesture to the object and check whether it is a SCNNode()
#objc func tapGestureRec(sender: UIPanGestureRecognizer? = nil){
let location: CGPoint = (sender?.location(in: self.view))!
let hits = self.sceneKitView.hitTest(location, options: nil)
if let tappedNode : SCNNode = hits.first?.node {
...
}
}