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

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.

A simple GeoJsonSource example is below. To execute the code, your Cartfile needs to be updated. To add the dependency, configure your Cartfile as follows:

binary "https://trimblemaps.jfrog.io/artifactory/carthage/TrimbleMaps.json" == 1.0.1
binary "https://trimblemaps.jfrog.io/artifactory/carthage/TrimbleMapsMobileEvents.json" == 1.0.0
binary "https://trimblemaps.jfrog.io/artifactory/carthage/TrimbleMapsAccounts.json" == 1.0.1
binary "https://trimblemaps.jfrog.io/artifactory/carthage/TrimbleMapsWebservicesClient.json" == 1.0.1
github "raphaelmor/Polyline" ~> 5.1
binary "https://trimblemaps.jfrog.io/artifactory/carthage/Turf.json" == 1.0.0

do {
    // Make the GeoJSON source
    var source = GeoJSONSource()
    source.data = .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 mapView.trimbleMapsMap.style.addSource(source, 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
    try mapView.trimbleMapsMap.style.addLayer(lineLayer)
} catch {
    print("Ran into an error adding source or layer: \(error)")
}

The sample code above illustrates how to add a GeoJSON source and then add and style a line layer that uses the data in that source.

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)