FusionLocation: Cross-Platform Swift Mobile App Development
Tags: android, ios, swift, scade
Published: 2022-11-09 11:25:15

---
title: FusionLocation: Cross-Platform Swift Mobile App Development
published: true
description: 
tags: android, ios, swift, scade
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5sj6q1225b95vitzqru.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-09 11:09 +0000
---







### Introduction

Hi everyone 🙋🏻‍♂️! My name is Vedant, and it is time to build another [SCADE](https://www.scade.io/) app! We all love hybrid tech stack when it comes to building cross-platform mobile apps. And then we start having discussions within the team for the possible tech stack to implement the new app idea.  But what if the team is not willing to learn any other language? 

SCADE solves this problem for us and makes it super easy to code cross-platform mobile apps using the only language Swift. It’s like developing Android apps using Swift, without coding a single line in Java or Kotlin. In this article, we will explore the map and geolocation apps that use just a few lines of Swift code, to develop using SCADE.

### Fusion SDK

Recently, the SCADE team has gone open-source with their breakthrough technology called **[Fusion](https://docs.scade.io/docs/fusionintroduction)** libraries. Fusion enables us to invoke the Android APIs using the Scade Fusion SDK. The benefit, is we don’t have to bother about setting up the Android platform-specific stuff in the gradle or anywhere. Even iOS-specific settings are very easy and no further prerequisite is required for the same. 

SCADE swift codebase acts as the single source of truth in this case, and Fusion SDK makes it possible. Currently, [Fusion SDK](https://docs.scade.io/docs/fusion-library-overview) provides easy integrations for the Geolocation, Bluetooth, NFC, and Media Player, and many more Fusion libraries are in development by the SCADE developers. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6d79pssyulsb7hfcq2xz.png)

We will now start the development of the FusionLocation app by integrating the Fusion extension in our SCADE project. Navigate to the `Package.swift` and add the below code snippet.


```swift
dependencies: [
      	.package(name: "FusionLocation", url: "https://github.com/scade-platform/FusionLocation.git", .branch("main"))
    ],    
targets: [
        .target(
            name: "GeoLocation",
            dependencies: [
            	.product(name: "FusionLocation", package: "FusionLocation")
            ],
            exclude: ["main.page"],
            swiftSettings: [
                .unsafeFlags(["-F", SCADE_SDK], .when(platforms: [.macOS, .iOS])),
                .unsafeFlags(["-I", "\(SCADE_SDK)/include"], .when(platforms: [.android])),
            ]
        )
    ]
```


We also need to provide the location permission in build.yaml for both iOS and Android platforms. 


```bash
ios:
  ...
  plist:
    ...
    - key: NSLocationAlwaysAndWhenInUseUsageDescription
      type: string
      value: This app just tracks your location to test FusionLocation      
    - key: NSLocationWhenInUseUsageDescription
      type: string
      value: This app just tracks your location to test FusionLocation
    ...

android:
  ...
  permissions: ["ACCESS_FINE_LOCATION"]
```


Please note that the Google API key can also be passed as the value of the key `google-api-key` in `build.yaml` for invoking [Google Cloud APIs](https://developers.google.com/maps/documentation/places/web-service/overview) related to maps and geolocation. 

### Tracking User Location

FusionLocation has utility methods for performing location updates in the background. We often require background location update operations for various use cases related to mobility and delivery of mobile apps. All we need to do is to initialize the `LocationManager` instance, authenticate the instance and call the location update method of the `LocationManager`.


```swift
// initialize the LocationManager
let locationManager = LocationManager(usage: .always)
    
// request authorization
locationManager.requestAuthorization()
    
// start location tracking
locationManager.startUpdatingLocation { location in
    print("Location Updated.")
    print(location?.coordinate)
}
```


### Get the Distance between two Coordinates

In order to find the distance between two locations, we will call the inbuilt `distanceBetween` method and will pass the location value for the <code><em>from</em></code> and <code><em>to</em></code> params. 


```swift
let mallLocation = Location(latitude: 12.9574292, longitude: 77.6383552)
let parkLocation = Location(latitude: 12.973826, longitude: 77.590591)

let dist = locationManager.distanceBetween(
          from: familyMallLocation, to: cubbon_parkLocation)

print("Distance between Mall and the Park:")
print(String(dist))
```


We will get the output somewhat like this with real-time updates of the user location coordinates and the distance in meters.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mf9n3jcb6385afmqql3l.png)


### Get Bearing distance

Bearing distance is required in various domains like aircraft navigation or land surveying. Fusion makes it very easy to calculate the bearing distance between two coordinates. 


```swift
// get bearing between from and to
locationManager.bearingBetween(from: from, to: to)
```


### SCADE Map Integration

SCADE provides MapUIControl to integrate the map widget into our mobile app. Let’s start integrating the map into our existing Fusion SCADE app. Navigate to the `main.page` and add the below UI widgets.

**a.) MapUI Control**: Drag the map widget to the page and we will make the map to cover the entire `main.page` height and width.

**b.) RowViewUI Control:** We need RowView to contain a set of buttons horizontally laid at the bottom of the page.

**c.) 5 UI Buttons**: We will now create 5 buttons horizontally in the RowView, namely Airport and Seaport to mark the location in the map, and the other 3 buttons will be used to set the type of map at runtime.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqpd0jws35k6qrdnzyb9.png)

First, we will define a few location coordinates which will be used throughout the app. 


```swift
let airport_coordinate = SCDPlatformLocationCoordinate(latitude: 28.556160, longitude: 77.100281)

let seaport_coordinate = SCDPlatformLocationCoordinate(latitude: 13.08441, longitude: 80.2899)
```


In order to navigate to the defined coordinate region on the map, we use the `setRegion` method of the `mapWidget`. 


```swift
func goto(coordinates: SCDPlatformLocationCoordinate) {
        self.mapWidget.setRegion(coordinates, latitudinalMeters: 1000, longitudinalMeters: 1000)
}
```


It takes the coordinates as the input parameter along with the `latitudinalMeters` and `longitudinalMeters` to display the location for the given width and height of the region. We will call this _goto_ method for the above-defined buttons to navigate to the coordinates on the map.


```swift
// Goto Airport location
self.btnAirport.onClick.append(
  SCDWidgetsEventHandler { _ in
    self.goto(coordinates: self.airport_coordinate)

})
// goto Seaport location
self.btnSeaport.onClick.append(
    SCDWidgetsEventHandler { _ in
        self.goto(coordinates: self.seaport_coordinate)

})
```


To show the marker image for the location on the map, we use the map annotations to append the marker image using the `SCDWidgetsMapAnnotation` class.


```swift
func setPinAsAnnotaton(coordinate:   SCDPlatformLocationCoordinate, imagePath: String) {

    let svgImage = SCDSvgImage(width: SCDSvgUnit(value: 55),  height: SCDSvgUnit(value: 55))
    svgImage.xhref = imagePath

    let ann = SCDWidgetsMapAnnotation(location: coordinate)
    ann.drawing = svgImage

    self.mapWidget.annotations.append(ann)
}
```


We will now call the above utility method and pass the coordinate and image file path as input parameters.


```swift
self.setPinAsAnnotaton(coordinate: airport_coordinate,  imagePath: "Assets/mpin.png")
```

### iOS



![ios1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdy9psc5p7x76qmcgsuf.png)

![ios2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwoutt1w3rfdzwdvca6s.png)


### Android



![android1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jgzmx4uvsf2r4uw2z2ff.jpeg)


![andorid2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2l0ers1lmunjt6nc81eg.jpeg)


SCADE map widget provides the feature to change the map type to _Standard_, _Satellite,_ and _Hybrid_. `SCDWidgetsMapType` class has the inbuilt methods for these map types.  


```swift
func setMapType(_ name: String) {
    switch name {
    case "btnHybrid":
      self.mapWidget.mapType = SCDWidgetsMapType.hybrid
    case "btnSatelite":
      self.mapWidget.mapType = SCDWidgetsMapType.satellite
    case "btnStandard":
      self.mapWidget.mapType = SCDWidgetsMapType.standard
    default:
      print("not covered")
    }
}
```


We will now set the click listeners to the rest of the buttons to change the map type at runtime. 


```swift
// satellite mode
self.btnSatelite.onClick.append(
   SCDWidgetsEventHandler { _ in
      self.setMapType("btnSatelite")
})
// Standard mode
self.btnStandard.onClick.append(
   SCDWidgetsEventHandler { _ in
      self.setMapType("btnStandard")
})

// Hybrid mode
self.btnHybrid.onClick.append(
   SCDWidgetsEventHandler { _ in
       self.setMapType("btnHybrid")
})
```


We are now ready to run the app and test if everything is working as expected. Please save the project otherwise the changes won’t reflect in the app. 

### iOS
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7zhpq6pkn79wrp3j3a4.gif)

### Android
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blhsr0ambpjpz3gcywlg.gif)

Voila 🎉! It is very easy to integrate SCADE map and Fusion SDK to create an iOS or Android app for all location needs. We don’t have to bother about any native Android/iOS environment setup or anything like that. We call Android APIs directly through Fusion SDK.

It is cool right! You should try FusionLocation in your next app for maps and geolocation 😊.