Animate Map Style Layer

This example shows how to animate runtime map style layer.

Add Image Source layer
Update Image source every second

For all code examples, refer to Maps Code Examples

AnimateMapLayerViewController view source

1
//
2
//  AnimateMapLayerViewController.swift
3
//  maps-ios-demo
4
//
5
//
6
import Foundation
7
import UIKit
8
import Nbmap
9
class AnimateMapLayerViewController: UIViewController {
10
    
11
    var nbMapView: NGLMapView! {
12
        didSet {
13
            oldValue?.removeFromSuperview()
14
            if let mapView = nbMapView {
15
                view.insertSubview(mapView, at: 0)
16
                mapView.delegate = self
17
            }
18
        }
19
    }
20
    var radarSuffix = 0
21
    
22
    var points : Array = [CLLocationCoordinate2D]()
23
    
24
    override func viewDidLoad() {
25
        super.viewDidLoad()
26
        nbMapView = NGLMapView(frame:self.view.bounds)
27
    }
28
    
29
    func addImageSourceLayer() {
30
        let coordinateQuad: NGLCoordinateQuad = NGLCoordinateQuad(
31
            topLeft:CLLocationCoordinate2D(latitude: 46.437, longitude: -80.425),
32
            bottomLeft:CLLocationCoordinate2D(latitude: 37.936, longitude: -80.425),
33
            bottomRight:CLLocationCoordinate2D(latitude: 37.936, longitude: -71.516),
34
            topRight: CLLocationCoordinate2D(latitude: 46.437, longitude: -71.516)
35
        )
36
        
37
        let imageSource = NGLImageSource(identifier: "style-image-source-id", coordinateQuad: coordinateQuad, image: UIImage(named: "southeast_radar_0")!)
38
        if let source = nbMapView.style?.source(withIdentifier: "style-image-source-id") {
39
            nbMapView.style?.removeSource(source)
40
        }
41
        nbMapView.style?.addSource(imageSource)
42
        let rasterLayer = NGLRasterStyleLayer(identifier: "style-raster-image-layer-id", source: imageSource)
43
        if let layer = nbMapView.style?.layer(withIdentifier: "style-raster-image-layer-id") {
44
            nbMapView.style?.removeLayer(layer)
45
        }
46
                                               
47
        nbMapView.style?.addLayer(rasterLayer)
48
        Timer.scheduledTimer(timeInterval: 0.8, target: self, selector: #selector(updateAnimatedImageSource(_:)), userInfo: imageSource, repeats: true)
49
    }
50
    
51
    @objc func updateAnimatedImageSource(_ timer: Timer) {
52
        guard let imageSource = timer.userInfo as? NGLImageSource else { return }
53
        let uiImage = UIImage(named: "southeast_radar_\(radarSuffix)")
54
        imageSource.setValue(uiImage, forKey: "image")
55
        radarSuffix += 1
56
        if radarSuffix > 3 {
57
            radarSuffix = 0
58
        }
59
    }
60
    
61
}
62
extension AnimateMapLayerViewController: NGLMapViewDelegate {
63
    func mapView(_ mapView: NGLMapView, didFinishLoading style: NGLStyle){
64
        
65
        nbMapView.setCenter(CLLocationCoordinate2DMake(41.437, -76.425), zoomLevel: 5, animated: true)
66
        addImageSourceLayer()
67
    }
68
}

The main functionality of this example is to display a map view with an animated image overlay (radar images). The addImageSourceLayer() method sets up the image source and raster layer, and the updateAnimatedImageSource(_:) method is called periodically to update the image source with new radar images.

Declaration and initialization of nbMapView, radarSuffix, and points variables.
viewDidLoad() method where the nbMapView is created and added as a subview to the view.
addImageSourceLayer() method to add an image source and raster layer to the map view.
updateAnimatedImageSource(_:) method to update the image source with a new image.
mapView(_:didFinishLoading:) delegate method that sets the initial center and zoom level of the map and calls addImageSourceLayer().