Swift UI and Their Integration to MapKit Technology as a Framework for Representing Spatial Information in Mobile Applications

Abstract

Mobile applications are becoming as complex as the kind of problems we need to solve. A normal GIS application needs to incorporate elements such as artificial intelligence more specifically, pattern recognition or machine learning, relational or non-relational databases, spatial representation, and reasoning. In addition to that, it is necessary to design and develop a mobile application to integrate all these elements. After analysis, planning, and design a company will require to develop a full team of engineers to accomplish an application. On the other hand, universities and other organizations, have additional interests. It is necessary to develop a mobile application to test a hypothesis before a large development project. The necessity is to use a technology that permits the integration of advanced technologies and programming tools in a manageable sense. Companies such as Google and Apple are reducing the gap of learning knowledge. They are developing new technologies. For example, Apple presented in 2019 at WWDC2019 and WWDC2020 a novelty technology called SwiftUI, which aims to reduce the complexity of developing a mobile application and allowing us to integrate technology such as Mapkit to represent spatial information. This work presents the advantages of using SwiftUI to integrate Mapkit as a spatial representation framework to ease the development of GIS mobile development. And focus on the problem solution, such as spatial representation and reasoning, robot planning, content image retrieval, etc.

1 Introduction

Computer Science has a large variety of applications in different fields of science. For example, artificial intelligence and machine learning are topics and technologies widely used in several areas of knowledge [1]. The aim is to develop programs that can perform representation and calculations of the information according to the necessity of the study. And to develop new way of representation [2] for the large problems we have today, for example data science. For example, in social sciences, we can create a model that study people activities [3]. In meteorology, we can represent the predictions of the weather [4]. In order to achieve computer science collaborations with all sciences is necessary to use a scientific computing approach. The definition of scientific computing is the intersection of Numerical Analysis, Modeling, and Computer Science, as we can see in Fig. 1 [5]. After we have selected a mathematical model and analyze the computational complexity to reduce error and increase performance. We can design an Algorithm so we can implement it on a computer.

Fig. 1.

Definition of scientific computing from [2].

After that, according to [6] the understanding of a computational system has three levels or layers: The concepts of computational theory we need to consider. The representation of the information or knowledge, and the design and implementation of the algorithm. And finally, the Hardware implementation. We can also add software implementation in a computer language and the use of a technological platform. In the last one, we need to consider the technical elements to improve the spatial and temporal performance of the algorithm, reduce the error, scheduling the transactions of blocks of data, access to a shared or distributed memory, etc. [7, 8]. So, we can see these as an architecture that we can use as a framework. As we can see in Fig. 2.

Fig. 2.

Architecture of a computational system implementation according to [3].

One of the purposes of a layered architecture is the possibility of divide activities, so we can reduce the complexity of the modules, specialize, and reuse. The communication between layers should be simple and easy. As an example, we have the architecture of the Open System Interconnection, where every layer is defined to provide one service. For example, the 5-layer hybrid model. Layers provide the service of packing, routing over the network, synchronization and codifying frames [7]. Finally, the communication between layers is made by an interface. In Fig. 3 we can see a general model a layered architecture.

Fig. 3.

Layer of an architecture image base on [7].

1.1 Brief State of the Art of User Interfaces

As mentioned before, every layer performs a function. These functions must be transparent for the other layers. So, the interfaces are the key to their communication. In the case of development platforms such as Android, Eclipse, and XCode. All of them have a Graphic User Interface (GUI) that eases the programming [9] and allows to focus in the programmer [10] and increase the productivity [11]. By making the process of development more intuitive. In the case of Xcode is integrating a new Technology called SwiftUI. Arrived in 2019 which is a declarative form of development applications [12, 13]. The declarative model is now used in major technologies such as Xamarin, UWP, and WPF with XAML [14] with the intention to simplify tasks [15]. This 2020 Apple announced new novelties at WWDC 2020 [16], with new features for the stack mode. These interfaces provide a way to progressively add functionalities. Allow us to develop algorithms as a Lego blocks. One of the interesting features are the possibility to avoid and reduce the need to manage technical details. The advantage is that we can develop advance mobile applications with high-end technology.

2 Methodology

The proposed methodology is agile. The intention is to focus on the development of the three parts which are design, implementation, and feedback. The advantages of this approach are. that we can integrate modules gradually to the architecture such as reconfigure the presentation or add another functionality to the applications. As it seems in Sect. 4.1. The methodology for example also allows reconfiguring the applications in a short period of time, whether it is needed to add elements to the GIS functionality or change the technology from Mapkit to ArcGis without affecting other elements in the project (Fig. 4).

Fig. 4.

AGILE development methodology

3 Standard Mobile Implementation of MapKit on XCode

XCode allows the development by using a mechanism called a storyboard. This is made by a file called Main.storyboard. Which represents the structure of the objects and their distribution in the mobile device. As it seems in Xcode the working area of Xcode on the left have file hierarchy section where we can select any file of the project. There’s also an edit section where the code can be modified. The file ViewController.swift controls the behavior of the application. Finally, Xcode shows a graphic representation of the Main.storyboard. Where we can insert objects such as buttons, images, and maps and place them where they are suitable. The project needs to be compiled to run in the simulator or an external device. This program is called Simulator. Xcode allows selecting the specific device where the application is designed to be executed. For example, iPad, iPad Pro, iPhone X, iPhone 8, etc. It is important to mention that every time we need to see the result of output. It has to be executed the simulator or the external device. The problem with compiling every time is that if we need to see a minor change, is to spend more time in compiling. As a result, it loses the sense of being programming in real-time.

4 Implementation Using SwiftUI on Xcode

On the other hand, we have a new technology of GUI called SwiftUI. Similar to Main.storyboard. But with new characteristics that permits the development be more dynamically. In Fig. 5 on the left are the working files and edit code (left and center respectively). On the right there is a novelty. A simulation of a mobile phone where every time a change is done in the left a change is reflected on the simulated phone. As was previously described in the last section this model allows also to run the Simulator program.

Fig. 5.

SwiftUI graphic interface on Xcode.

One of the features of this technology is that it is possible to build all the components the application needs independently. Which eases the modularity. In addition to that, it allows to create systems and algorithms more robust [8]. Increase cohesion and reduce the coupling of the modules. These are valuable to detect errors easily [17]. That is because the constructions of the elements in SwiftUI use verticals and horizontals stacks structures (Vstack and HStack). In the WWDC2020 introduce an enhance of these structures. As it is shown in Fig. 6 the structures can be nested. In addition to that SwiftUI manages almost automatically the alignment of the elements. So, there is less need to program restrictions. In Fig. 7 we can see the automatic align in a vertical and horizontal position.

Fig. 6.

Use of Stacks and ScrollView.

Fig. 7.

A vertical and horizontal simulation of an mobile phone.

4.1 Geographical Implementation Using MapKit and SwiftUI

Suppose our application must add a geographical representation. So, we need to use MapKit. We can divide the application in four parts. One part can describe the distribution of the elements in the phone, similar to HTML. Then we add a functionality or some other elements to the application. We have a module that manages the geographical representation and receive geographical data, longitude and latitude. Finally, a layer that processes the data. In the Fig. 8, we can see the architecture that can be used interchangeably to add the functionality we need. We can see that at the top of the stack we find the Application representation.

Fig. 8.

An architecture for a general geographic application.

4.2 Data Structures Such as GEO JASON or SHAPEFILES

For the manipulation of the Map we have a file that contains all code related to the Maps management. In this case, it is called MapView. And it is important to import the libraries SwiftUI and MapKit and extend the class UIViewRepresentable. The file allows us to represent the geographic locations as it seems in Fig. 9. In SwiftUI, we can add new locations and we will see the change on the right. (The location Added is UNAM-FES Acatlán.).

Fig. 9.

Adding a map and showing the results on the right.

Then we can add another swift file (In this case SwiftUIView.swift), to add a functionality. In this case we only are interested in adding an image. The result is observed on the right in the Fig. 9. For this example, the processing of the data is static. But for other applications it is possible to use a database, a GEOJson file (Fig. 10), storing data on the device, etc. The structure uses a class model called DataModel.swift to store the receiving information. The file needs to import the MapKit library so we can use the objects of CLLocationCoordinate and MKAnnotation [18,19,20]. We also have the option to manipulate shape files. Because as it seems in their technical description [21]. It can be processed as a structure to use it as a Polygon or Multipoint. Now there are also work in ArCGIS to connect it to iOS such as [22] and use it in the ArcGIS implementation in our proposed architecture.

Fig. 10.

Class DataModel.

The final result is showed in Fig. 11. Where the ContentView integrates all the elements.

Fig. 11.

The integration of all elements on the ContentView.swift.

4.3 Similarities Between Main.Storyboard and SwiftUI

However, it is not necessary to learn new concepts. Whether you are familiarized with Swift and XCode environment. For SwiftUI the structure MKMapView use the function updateUIView(). The function processes the map. And it is possible to set and get elements from MKMapView (such as longitude, latitude, region, zoom). See Fig. 12a).

Fig. 12.

a) updateUIView function, b) viewDidLoad function

In the case of the Main.storyboard the same methods and properties are used (region, location, span). In this case, there were written in the function viewDidLoad(). To load the map after the application is executed. The difference is that we have to add manually an outlet to communicate the Main.storyboard to the ViewController.swift. As it seems on line 15 in the following Fig. 12b).

5 Conclusions

We can see that a simple implementation can be developed with SwiftUI. SwiftUI offers us a high level of characteristics like WYSIWYG. Because as we are implementing a section of code, we can see the result in real-time. This is very helpful when we are searching for accelerated results or testing a functionality. On the other hand, is clear that an application more extensive will require more degree of expressiveness that Main.storyboard can offer. But these two forms of development are not exclusive of any implementation. All the code made in SwiftUI is functional and easily adapted to traditional modality (Main.storyboard) and vice versa. Once you have an algorithm in one version, it can be translated into another. The intention of using this framework is to use SwiftUI as a laboratory. And then integrate the functionalities with a major application or system, isolating possible errors. In addition to that as it was mention in the introduction, now major technologies are used declarative language to ease the development. Summarizing we can see that SwiftUI offers a functional user experience. The Architecture divided into layers is useful to trace errors and add functionalities without affect other modules.