• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

Custom Runtime Style Layer

This example shows how to customize runtime map style layer.

  • Custom building-3d layer style with zoom level

  • Add building layer in Runtime style

  • Custom water layer style with zoom level

  • Custom roads layer with zoom level

docs-image

For all code examples, refer to Maps Code Examples

StyleMapLayerViewController view source

1//
2// StyleMapLayerViewController.swift
3// maps-ios-demo
4//
5import Foundation
6import UIKit
7import Nbmap
8enum ActionType{
9 case StyleBuildingExtrusions
10 case StyleWaterWithFunction
11 case StyleRoadsWithFunction
12 case AddBuildingExtrusions
13}
14class StyleMapLayerViewController: UIViewController {
15
16 var nbMapView: NGLMapView! {
17 didSet {
18 oldValue?.removeFromSuperview()
  • Initializing mapView: The nbMapView property is initialized in the viewDidLoad() method. It creates an instance of NGLMapView and sets it as the main view of the view controller.

  • styleBuildingExtrusions() method: This method is called when the "Style Building Extrusions" option is selected. It retrieves the “building-3d” layer from the map style and sets the fill extrusion color and opacity. It also sets the map center and zoom level.

  • addBuildingExtrusions() method: This method is called when the "Add Building Extrusions" option is selected. It adds a new NGLFillExtrusionStyleLayer to the map style with a source identifier of "openmaptiles". It sets the fill extrusion base and height, fill extrusion color, and opacity. It also sets a specific map camera position for animation.

  • styleWaterWithFunction() method: This method is called when the "Style Water with function" option is selected. It retrieves the “water” layer from the map style and sets the fill color using an interpolation function based on the zoom level. It also sets the fill antialiased property using a stepped interpolation.

  • styleRoadsWithFunction() method: This method is called when the "Style Roads with function" option is selected. It retrieves the “road_primary” layer from the map style and sets the line color using an interpolation function based on the zoom level. It also sets the line width and line gap width using an interpolation function. Additionally, it sets the layer's visibility to true.

Have Questions ?