Find features at a point
This example demonstrates how to interact with features at specific points on the map using the Mapbox Maps SDK for iOS.
The example uses the MapView class with options to center the map over the United States. It imports a GeoJSON data source and adds a FillLayer with minimal styling to represent US states. It uses the GesturesManager class and the onLayerTap method to allow users to tap on the states to display an alert with the selected state's name.
This example code is part of the Maps SDK for iOS Examples App, a working iOS project available on Github. iOS developers are encouraged to run the examples app locally to interact with this example in an emulator and explore other features of the Maps SDK.
See our Run the Maps SDK for iOS Examples App tutorial for step-by-step instructions.
import UIKit
import MapboxMaps
final class ViewController: UIViewController {
private var cancelables = Set<AnyCancelable>()
private var mapView: MapView!
override func viewDidLoad() {
super.viewDidLoad()
// Center the map over the United States.
let centerCoordinate = CLLocationCoordinate2D(latitude: 39.368279,
longitude: -97.646484)
let options = MapInitOptions(cameraOptions: CameraOptions(center: centerCoordinate, zoom: 2.4))
mapView = MapView(frame: view.bounds, mapInitOptions: options)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(mapView)
// Allows the view controller to receive information about map events.
mapView.mapboxMap.onMapLoaded.observeNext { _ in
self.setupExample()
}.store(in: &cancelables)
// Set up the tap gesture
mapView.gestures.onLayerTap("US-states") { [weak self] queriedFeature, _ in
if let firstFeature = queriedFeature.feature.properties,
case let .string(stateName) = firstFeature["STATE_NAME"] {
self?.showAlert(with: "You selected \(stateName)")
}
return true
}.store(in: &cancelables)
}
func setupExample() {
// Create a new GeoJSON data source which gets its data from an external URL.
var geoJSONSource = GeoJSONSource(id: "US-states-vector-source")
geoJSONSource.data = .string("https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson")
// Create a new fill layer associated with the data source.
var fillLayer = FillLayer(id: "US-states", source: geoJSONSource.id)
fillLayer.sourceLayer = "state_county_population_2014_cen"
// Apply basic styling to the fill layer.
fillLayer.fillColor = .constant(StyleColor(.blue))
fillLayer.fillOpacity = .constant(0.3)
fillLayer.fillOutlineColor = .constant(StyleColor(.black))
// Add the data source and style layer to the map.
try! mapView.mapboxMap.addSource(geoJSONSource)
try! mapView.mapboxMap.addLayer(fillLayer, layerPosition: nil)
}
}