In this page

Animate Map Style Layer

This example shows how to animate runtime map style layer.

  1. Add Image Source layer

  2. 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//
6import Foundation
7import UIKit
8import Nbmap
9class 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}
62extension 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.

  1. Declaration and initialization of nbMapView, radarSuffix, and points variables.

  2. viewDidLoad() method where the nbMapView is created and added as a subview to the view.

  3. addImageSourceLayer() method to add an image source and raster layer to the map view.

  4. updateAnimatedImageSource(_:) method to update the image source with a new image.

  5. mapView(_:didFinishLoading:) delegate method that sets the initial center and zoom level of the map and calls addImageSourceLayer().

DIDN'T FIND WHAT YOU LOOKING FOR?