I added mapView with @IBOutlet and the extension of GMSMapViewDelegate{}
below code able to parse the returned json result. The code will get the image url and Latlon.
Problems:
the markers are added in the googlemap BUT the map does not show them at center so you donot scroll to look for the markers
How to implement the clickable Marker when click it will fetch the image base on the image URL
import UIKit
import Foundation
import GoogleMaps
import GooglePlaces
class ViewController: UIViewController {
@IBOutlet weak var mapView: GMSMapView!
override func viewDidLoad() {
super.viewDidLoad()
mapView.delegate = self
getJsonMapData()
}
func getJsonMapData(){
guard let mapUrl = URL(string: "https://xxxxxxxx/traffic-images") else { return }
URLSession.shared.dataTask(with: mapUrl) { (data, response, error) in
guard error == nil else { return}
guard let data = data else { return}
let dataString = String(data: data, encoding:.utf8)
do {
let jsonDecoder = JSONDecoder()
jsonDecoder.dateDecodingStrategy = .iso8601
let LocationArrDict = try jsonDecoder.decode(Location.self, from: data)
let items = LocationArrDict.items
for item in items {
let cams = item.cameras
for cam in cams {
let strimgUrl = cam.image
let lat: Double = Double(cam.location.latitude)
let lon: Double = Double(cam.location.longitude)
let GpsMarker = GMSMarker()
GpsMarker.position = CLLocationCoordinate2D(latitude: lat, longitude: lon)
//GpsMarket.iconView = UIImageView(image: ??? how to add the image url ??)
DispatchQueue.main.async {
GpsMarker.map = self.mapView
self.view.addSubview(self.mapView)
}
}
}
} catch {
print(error)
}
}.resume()
}
}
extension ViewController:GMSMapViewDelegate{}
//----------------------- return Json String:
{
"items":[
{
"timestamp":"2020-12-05T08:45:43+08:00",
"cameras":[
{
"timestamp":"2020-11-05T08:42:43+08:00",
"image":"https://xxxxxxxxx/traffic-images/2020/12/2ab06cd8-4dcf-434c-b758-804e690e57db.jpg",
"location":{
"latitude":1.29531332,
"longitude":103.871146
},
"camera_id":"1001",
"image_metadata":{
"height":240,
"width":320,
"md5":"c9686a013f3a2ed4af61260811661fc4"
}
},
{
"timestamp":"2020-11-05T08:42:43+08:00",
"image":"https://xxxxxxxxxx/traffic-images/2020/12/9f6d307e-8b05-414d-b27d-bf1414aa2cc7.jpg",
"location":{
"latitude":1.319541067,
"longitude":103.8785627
},
"camera_id":"1002",
"image_metadata":{
"height":240,
"width":320,
"md5":"78060d8fbdd241adf43a2f1ae5d252b1"
}
},
........
{
"timestamp":"2020-12-05T08:42:43+08:00",
"image":"https://xxxxxx/traffic-images/2020/12/98f64fe6-5985-4a8a-852f-0be24b0a6271.jpg",
"location":{
"latitude":1.41270056,
"longitude":103.80642712
},
"camera_id":"9706",
"image_metadata":{
"height":360,
"width":640,
"md5":"f63d54176620fa1d9896fa438b3cc753"
}
}
]
}
],
"api_info":{
"status":"healthy"
}
}