Skip to main content

The camera


The camera is how the user views the map. It can be centered on a location, zoomed, tilted, rotated and moved. The camera can be set programmatically but also controlled through user interaction with gestures.

The camera is typically set using the TMGLMapCamera class which is made up of center, altitude, pitch and heading parameters.

AttributeTypeDescriptionDefault Setting
centerCLLocationCoordinate2DThe map coordinate that will represent the center of the viewport.nil
altitudeCLLocationDistanceThe altitude (measured in meters) above the map at which the camera should be situated.nil
pitchCGFloatThe viewing angle of the camera, measured in degrees0
headingCLLocationDistanceThe camera’s heading, measured in degrees clockwise from true north.nil

Setting the TMGLMapCamera

The code below sets the camera’s target/center to be a coordinate in New York City. Once the TMGLMapCamera is defined, the map is updated with the new position.

// Center the map camera over New York City.
let centerCoordinate = CLLocationCoordinate2D(
latitude: 40.7128, longitude: -74.0060)

let camera = TMGLMapCamera(
                                altitude: 500,
                                pitch: 15,
                                heading: 180) = camera

Animating the CameraPosition

In addition to setting the map’s camera position, you can also animate a “flight” for the new camera position information, gliding into it. An example of this is below:

                    withDuration: 5,
                    animationTimingFunction: CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut))

Visualizing data

Typically the Maps SDK will be used to visualize data on top of the map. Data could vary from simple dots-on-a-map to more complex pieces like 3D buildings, route paths, geofences, and more.

The recommended way to visualize custom data on top of the map is through the use of Sources and Layers.

  • Sources store the data you want to visualize.
  • Layers, depending on the type set, will visualize that data on the map.

Sources and Layers are attached to the map’s style. Therefore, if you change styles after setting those Sources and Layers, you will need to re-apply them.

It is important that you add the source for a new layer before attempting to add the layer itself because the source is a required parameter for most layer types.


Sources store and contain the data you wish to visualize on the map. A Layer will reference a source by its ID, and pull from the source for rendering purposes. The two required parameters for a source are a unique String ID and the type of data being stored. There are a variety of source types such as vector and raster, but the most commonly used is the GeoJson type. The sample code below illustrates how to add a GeoJSON source and then add and style a line layer that uses the data in that source.

do {
  // Make the GeoJSON source
  var source = GeoJSONSource() = .feature(myLineFeature)

  // Add the source to the mapView
  // Specify a unique string as the source ID (SOURCE_ID)
  // and reference the location of source data
  try, id: "SOURCE_ID")

  // Make the line layer
  // Specify a unique string as the layer ID (LAYER_ID)
  // and reference the source ID (SOURCE_ID) added above.
let lineLayer = TMGLLineStyleLayer(identifier: "LAYER_ID", source: SOURCE_ID)

  // Add the line layer to the mapView
} catch {
  print("Ran into an error adding source or layer: \(error)")

Using JSON / URI in a source

While you can create sources manually as shown above, a URI can also be used as the data for a source. The Source will pull the data from that URI location, negating the need to manually create a FeatureCollection yourself. See below:

 let shapeSource = TMGLShapeSource(identifier: SOURCE_ID, url: fileUrl, options: .none)
Last updated May 24, 2022.