Custom layers
Once a Source is set and has data, a layer can reference it. Layers are used to visualize the data from a source. There are a variety of layer types including: Circle, Line, Fill and Symbol.
CircleLayer
A CircleLayer uses single coordinates from a source to display and render a circle at a location on a map. Circles can be styled with size options, coloring, opacity etc.
let circleLayer = TMGLCircleStyleLayer(identifier: "circle-layer-id", source: circleSource)
circleLayer.circleRadius = NSExpression(forConstantValue: 10)
circleLayer.circleColor = NSExpression(forConstantValue: UIColor.red)
style.addLayer(circleLayer)
LineLayer
The LineLayer is used to visualize a series of coordinates as a line on the map. A line is drawn between each coordinate provided in the LineString geometry in the source.
let lineLayer = TMGLLineStyleLayer(identifier: "line-layer-id", source: lineSource)
lineLayer.lineWidth = NSExpression(forConstantValue: 3)
lineLayer.lineColor = NSExpression(forConstantValue: UIColor.red)
style.addLayer(lineLayer)
FillLayer
A FillLayer makes use of the Polygon geometry from the linked source. A shape is drawn enclosed on the map and the shape is filled in.
let fillLayer = TMGLFillStyleLayer(identifier: "fill-layer-id", source: fillSource)
fillLayer.fillOpacity = NSExpression(forConstantValue: 0.5)
fillLayer.fillColor = NSExpression(forConstantValue: UIColor.red)
style.addLayer(fillLayer)
SymbolLayer
The SymbolLayer is used for displaying text or icons on the map. The locations for rendering are pulled from the coordinates in the source’s data. The example below shows how you can use your own custom icon on the map:
let symbolLayer = TMGLSymbolStyleLayer(identifier: "symbol-layer-id", source: shapeSource)
style.setImage(image, forName: "symbol-layer-image")
symbolLayer.iconImageName = NSExpression(forConstantValue: "symbol-layer-image")
style.addLayer(symbolLayer)
Other layers
A variety of other layers are also available for use, such as the TMGLHeatmapStyleLayer and the TMGLFillExtrusionStyleLayer.