Example iOS map app for Electron Asset Tracker

Developer Tools
1

I want to display location of my Electron Asset Tracker on an iPhone/iPad with a native iOS app.
Can’t find anywhere on Particle or Github or Internet.

Saw Github webmap, which looks good. But want native iOS map.

2

Then why don’t you make one and share it with the community ;)?

1 Like
3

Do you have the ability to program an iOS app? Do you have access to Xcode? I could post a simple version of an app that would display the location of your asset. How do you want the iOS app to interact with your Electron code (update automatically via a publish event from the Electron, fetch the location with a refresh button using a Particle variable, etc)?

2 Likes
4

Ric:
Yes, please “post a simple version of an app that would display the location of your asset”. That would be awesome!
Yes, am already programming iOS app, with Xcode, using Paricle iOS SDK.

My present iOS app on iOS SDK, and already gets publish events from a Photon (another project).
So, I plan to have Electron periodically upload GPS to cloud, and then iOS app shows location on map.

5

Here is a version that works assuming that the asset tracker sends its data as the string “latitude,longitude”. If that’s not true, let me know, and I can change the code. You would have to do some modification to this code if you’re using the Particle iOS SDK; I use my own code, written in swift, for the User.swift and Device.swift files. For subscribing to events, I use the EventSource.swift file from Inaka.

import UIKit
import MapKit

class ViewController: UIViewController, MKMapViewDelegate, ParticleDeviceDelegate {
    
    @IBOutlet weak var mapView: MKMapView!
    var eventSource: EventSource!
    var markerPin = MKPointAnnotation()
    var user: User!
    var device: Device!
    var rangeValue = 2.0
    var coordArray = [CLLocationCoordinate2D]()
    var path: MKPolyline!
    var shouldShowTrack = false

    override func viewDidLoad() {
        super.viewDidLoad()
        user = User.init(userEmail: "YOUR EMAIL HERE", password: "YOUR PASSWORD HERE") // user name and password for your Particle account
        device = Device(deviceNamed: "YOUR DEVICE NAME HERE", user: user)
        device.delegate = self
        mapView.delegate = self
    }
    

    @IBAction func deviceIDWasSet() { // ParticleDeviceDelegate method called from Device.swift
        eventSource = EventSource(url: "https://api.particle.io/v1/devices/\(device.deviceID)/events/assetLoc", headers: ["Authorization" : "Bearer " + device.accessToken])
        eventSource?.addEventListener("assetLoc", handler: { (id, event, dataString) in
            do {
                if let result = try NSJSONSerialization.JSONObjectWithData((dataString?.dataUsingEncoding( NSUTF8StringEncoding))!, options: .AllowFragments) as? NSDictionary{
                    let latLon = result["data"]?.componentsSeparatedByString(",")
                    let coord = CLLocationCoordinate2DMake(Double(latLon![0])!, Double(latLon![1])!)
                    self.coordArray.append(coord)
                    self.markerPin.coordinate = coord
                    self.markerPin.title = "Asset"
                    dispatch_async(dispatch_get_main_queue(), {
                        self.mapView.addAnnotation(self.markerPin)
                        self.mapView.setCenterCoordinate(self.markerPin.coordinate, animated: true)
                        self.mapView.setRegion( MKCoordinateRegionMake(self.markerPin.coordinate, MKCoordinateSpanMake(self.rangeValue, self.rangeValue)), animated: true)
                        if self.coordArray.count >= 2 {
                            if self.path != nil {
                                self.mapView.removeOverlay(self.path)
                            }
                            self.path = MKPolyline(coordinates: &self.coordArray, count: self.coordArray.count)
                            if self.shouldShowTrack == true {
                                self.mapView.addOverlay(self.path)
                            }
                        }
                    })
                }
            } catch let jsonError as NSError {
                print(jsonError.localizedDescription)
            }
        })
    }
    
    
    
    func closeConnection() {
        eventSource.close()
        print("The URLSession has been canceled")
    }
    
    
    func mapView(mapView: MKMapView, rendererForOverlay overlay: MKOverlay) -> MKOverlayRenderer {
        
        let renderer = MKPolylineRenderer(polyline: overlay as! MKPolyline)
        renderer.strokeColor = UIColor.blueColor()
        renderer.lineWidth = 1
        return renderer
    }
    
    
    @IBAction func sliderDidUpdate(sender: UISlider) {
        rangeValue = Double(sender.value)
        self.mapView.setRegion( MKCoordinateRegionMake(self.markerPin.coordinate, MKCoordinateSpanMake(self.rangeValue, self.rangeValue)), animated: true)
    }
    
    
    
    @IBAction func showTrack(sender: UIBarButtonItem) {
        if sender.title == "Show Track" {
            self.mapView.addOverlay(self.path)
            shouldShowTrack = true
            sender.title = "Hide Track"
        }else{
            self.mapView.removeOverlay(self.path)
            shouldShowTrack = false
            sender.title = "Show Track"
        }
    }
    
}

I don’t know if the particle SDK has a method that’s equivalent to my deviceIDWasSet delegate method. I use this to execute code that can only be done after the access token and device ID have been downloaded from the cloud. The view for ViewController contains a slider to change the range of the map, and a button to toggle the presence of the track as your device moves.
I will PM you to send you all the files for this project.

2 Likes
6

I got it working in Objective.C. Alas, since software is for a client, they own it, and I am not at liberty to post as open-source.

7

nice code, thanks for posting