iOS: Creating dynamic speech balloons for annotations that appear from user input using MapBox

Question

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
    }
}

Answer 1

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.

Answer 2

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.