{"id":2942,"date":"2019-10-18T16:07:54","date_gmt":"2019-10-18T16:07:54","guid":{"rendered":"https:\/\/contentlab.com\/embedding-tomtom-maps-in-an-ios-app-with-swiftui\/"},"modified":"2022-02-24T19:00:43","modified_gmt":"2022-02-24T19:00:43","slug":"embedding-tomtom-maps-in-an-ios-app-with-swiftui","status":"publish","type":"post","link":"https:\/\/contentlab.com\/embedding-tomtom-maps-in-an-ios-app-with-swiftui\/","title":{"rendered":"Embedding TomTom Maps in an iOS App with SwiftUI"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2942\" class=\"elementor elementor-2942\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7625b3cb elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"7625b3cb\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5d399491\" data-id=\"5d399491\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d52d349 elementor-widget elementor-widget-text-editor\" data-id=\"d52d349\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 25-04-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>Xcode 11 introduces a new way to build user interfaces called SwiftUI.<\/p><p>From\u00a0<a href=\"https:\/\/developer.apple.com\/documentation\/swiftui\">https:\/\/developer.apple.com\/documentation\/swiftui:<\/a><\/p><p>SwiftUI provides views, controls, and layout structures for declaring your app&#8217;s user interface. The framework provides event handlers for delivering taps, gestures, and other types of input to your app, and tools to manage the flow of data from your app&#8217;s models down to the views and controls that users will see and interact with.<\/p><p>Many iOS libraries provide views that are UIView subclasses and these must be wrapped before they can be used in a SwiftUI view. This article will describe how to present a\u00a0<a href=\"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/\">TomTom<\/a>\u00a0map view in a SwiftUI app. The sample application provided presents one simple use of this view that you can review and explore. Check the comment blocks in the app for details not covered here.<\/p><h2>Prerequisites<\/h2><h4 style=\"font-family: Sailec, sans-serif;\">Xcode 11<\/h4><p>First, we\u2019ll need to download and set up a few things. Naturally, if we\u2019re doing iOS development on a Mac, we\u2019ll need to download Xcode. You can find more information on that at\u00a0<a href=\"https:\/\/developer.apple.com\/download\/\">https:\/\/developer.apple.com\/download\/<\/a>. At the time of this writing, Xcode 11 is in beta. It\u2019s the first edition of Xcode that supports SwiftUI, which we\u2019ll be using in this project. Those instructions will lead you to install the iOS 13 beta as well.<\/p><h4 style=\"font-family: Sailec, sans-serif;\">TomTom SDK<\/h4><p>Next, we\u2019ll need to obtain the TomTom Maps SDK for iOS. We can find that by going to<a href=\"http:\/\/https\/\/developer.tomtom.com\/\">\u00a0https:\/\/developer.tomtom.com\/<\/a>. Before we can use the SDK in an application we\u2019ll need to have an API key and for that, we\u2019ll need a developer account. So the first step here will be to register by clicking the button at the top right.<\/p><p>Fill in the form on the page that appears and click \u201cRegister\u201d.<\/p><p>After you register you\u2019ll find that you already have \u201cMy New App\u201d on the dashboard. This should be changed to match the name of the app we\u2019re going to build. I\u2019m naming it \u201cSampleiOSApp\u201d.<\/p><p>Now we can get the TomTom Maps SDK. We can find this at\u00a0<a href=\"https:\/\/developer.tomtom.com\/products\/maps-sdk\">https:\/\/developer.tomtom.com\/products\/maps-sdk<\/a>. From the TomTom home page click \u201cProducts\u201d and then look for \u201cMaps SDK (Android, iOS, Web). Once you reach the page you may need to scroll down to find the iOS version.<\/p><p>We\u2019re almost ready to create an app with the Maps SDK. The instructions are at the bottom of the screen, but first, we\u2019re going to take care of step two from that list and go to the SDK downloads page.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48823114431_e746ca1331_o.png\" alt=\"swift Blog1\" \/><\/p><p>What\u2019s this? No package to download and set up! Instead, the SDK is accessed via Cocoapods. If you\u2019re not familiar with Cocoapods, it&#8217;s a dependency manager for Objective-C and Swift development. It&#8217;s similar to npm for Node development, Ruby gems, Nuget for .NET development, and so on.<\/p><p>Cocoapods allows us to create a file called podfile, which will download the SDK and its dependencies. We\u2019ll create and use the podfile in just a few minutes. First, you\u2019ll need to follow the instructions for installing Cocoapods at\u00a0<a href=\"https:\/\/cocoapods.org\/\">https:\/\/cocoapods.org<\/a>.<br \/>(Hint: $ sudo gem install cocoapods).<\/p><h2>Build the App<\/h2><p>So now that we have Xcode, and we have Cocoapods, we can create the app. Start Xcode, click \u201cCreate a new Xcode Project\u201d, and choose the iOS \u201cSingle View App\u201d template.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48822752173_612827c6aa_o.png\" alt=\"Swiftblog\" \/><\/p><p>Next, select the features of the app. We\u2019re going to name the project as we did in the TomTom Edit App screen. Also, select Swift as the language and check the use SwiftUI box.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48823270487_aaeacea309_o.png\" alt=\"swiftblog3\" \/><\/p><p>After we click \u201cNext\u201d, Xcode generates the application for us and our new app contains a single view with the traditional \u201cHello World\u201d. We can go ahead and run the app and view the results in the simulator.<\/p><h2>SDK Setup<\/h2><p>Before we get into building the UI, we\u2019ll take this opportunity to set up the TomTom Maps SDK. Remember that we mentioned that the SDK is downloaded via Cocoapods. We\u2019ll need to set up a file named \u201cpodfile\u201d. This file is used to download or update the application with the latest versions of the libraries. (Note: after we complete the next couple of steps, we\u2019ll be abandoning the project file so we should close it down while we do this.)<\/p><p>To create a pod file we will need the terminal window. Open a terminal window at the folder that contains the xcodeproj file. Enter the following command:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2256dcc elementor-widget elementor-widget-code-highlight\" data-id=\"2256dcc\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>pod init<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d647c8 elementor-widget elementor-widget-text-editor\" data-id=\"2d647c8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>This creates the necessary podfile, which you can open and update with any text editor. Next, we will add the pods that we\u2019ll need. On the\u00a0<a style=\"background-color: #ffffff;\" href=\"https:\/\/developer.tomtom.com\/maps-sdk-ios\/downloads\">TomTom SDK download page<\/a>, we can see all of the pods available:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f9add1 elementor-widget elementor-widget-code-highlight\" data-id=\"9f9add1\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>pod 'TomTomOnlineSDKMaps'\r\npod 'TomTomOnlineSDKSearch'\r\npod 'TomTomOnlineSDKRouting'\r\npod 'TomTomOnlineSDKTraffic'\r\npod 'TomTomOnlineSDKMapsUIExtensions'\r\npod 'TomTomOnlineSDKMapsStaticImage'\r\npod 'TomTomOnlineSDKDriving'\r\npod 'TomTomOnlineSDKGeofencing'<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4462b24 elementor-widget elementor-widget-text-editor\" data-id=\"4462b24\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The one we need from this list is the TomTomOnlineSDKMaps entry. There\u2019s also a support library recommended on the site, so we\u2019ll include that one as well. Update the podfile so it looks like this:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b39691f elementor-widget elementor-widget-code-highlight\" data-id=\"b39691f\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp># Uncomment the next line to define a global platform for your project\r\n\r\n# platform :ios, '9.0'\r\n\r\ntarget 'SampleiOSApp' do\r\n  # Comment the next line if you don't want to use dynamic frameworks\r\n  use_frameworks!\r\n\r\n  # Pods for SampleiOSApp\r\n  pod 'TomTomOnlineSDKMaps'\r\n  pod \u2018TomTomOnlineSDKMapsUIExtensions\u2019\r\nend<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e8f362 elementor-widget elementor-widget-text-editor\" data-id=\"3e8f362\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Save and close the podfile, then switch back to the terminal window and run the install.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-79a7e12 elementor-widget elementor-widget-code-highlight\" data-id=\"79a7e12\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>pod install --repo-update<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-659534a elementor-widget elementor-widget-text-editor\" data-id=\"659534a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>You\u2019ll see a listing of the pods being installed and any dependencies that it finds. If you want to learn more about how Cocoapods works, you can review the instructions at\u00a0<a href=\"https:\/\/guides.cocoapods.org\/using\/using-cocoapods.html\">using-cocoapods.<\/a><br \/>As I mentioned above, the pod setup creates an Xcode workspace and we should now open the workspace instead of the project file.<\/p><p>There\u2019s one last thing we must do before we can actually use the SDK: add the authentication key from the\u00a0<a href=\"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/\">TomTom<\/a>\u00a0site into the info.plist file to authorize the app to use the services. We do this in the info.plist file.<\/p><p>When we created our first app on the TomTom developer website, we were given an API key. Go ahead and navigate back to this page, and copy the key.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48822751998_01fe5599fc_o.png\" alt=\"swiftblog4\" \/><\/p><p>Click info.plist to open it, create a new key called OnlineMap.Key, and paste the API key provided with the application we created on the TomTom website.<\/p><h2>SwiftUI<\/h2><p>With Xcode 11, iOS 13, and Mac OS 10.15, UI development has become much easier and more flexible. We can define views in code and see the changes in the preview window as we type in some cases. We can affect changes in the preview window, and see the resulting code changes in real-time. The screens will take care of the layout in different sizes and orientations to ensure we see the same thing wherever it shows.<\/p><p>When we create the basic application using the template we see the proto-typical \u201cHello World\u201d application. We can find the screen contents in the ContentView.swift file as follows:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a64a7a4 elementor-widget elementor-widget-code-highlight\" data-id=\"a64a7a4\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-swift line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-swift\">\n\t\t\t\t\t<xmp>struct ContentView: View {\r\n    var body: some View {\r\n\tText(\"Hello World\")\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b99f56f elementor-widget elementor-widget-text-editor\" data-id=\"b99f56f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The ContentView is called by the framework via the SceneDelegate. You\u2019ll see in the sample application that this default view is replaced by the LocationList view.<\/p><p>You can modify the content within the &#8220;body&#8221; code block and see the results change in the canvas preview. Use Editor \/ Canvas from the Xcode menu to show the preview.\u00a0<a href=\"https:\/\/developer.apple.com\/tutorials\/swiftui\/creating-and-combining-views\">See swiftui\/creating-and-combining-views<\/a>\u00a0for more details.<\/p><h2>Create a TomTom MapView<\/h2><p>When working with SwiftUI you\u2019ll be creating many views that you can then place on the screen. In most cases this will be another SwiftUI file that you\u2019ll fill with SwiftUI compatible components.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cd949b7 elementor-widget elementor-widget-code-highlight\" data-id=\"cd949b7\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-swift line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-swift\">\n\t\t\t\t\t<xmp>struct MyNewView: View {\r\n   var body: some View {\r\n      SomeFantasticContent\r\n   }\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7faed61 elementor-widget elementor-widget-text-editor\" data-id=\"7faed61\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>In the case of the TomTom map, we want to distinguish that it is a UIView rather than a SwiftUI &#8220;View,&#8221; so we need to provide a class that implements the UIViewRepresentable protocol.<\/p><p>Select \u201cFile \/ New \/ File\u201d from the main Xcode menu and select the \u201cSwift UI View\u201d from the templates.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48823430952_2be08728f3_b.jpg\" alt=\"Swift8\" \/><\/p><p>Enter the name MapView and click Next. When Xcode completes the task you\u2019ll have a new file called MapView.swift with code like this:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1dbc63 elementor-widget elementor-widget-code-highlight\" data-id=\"c1dbc63\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-swift line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-swift\">\n\t\t\t\t\t<xmp>struct MapView: View {\r\n   var body: some View {\r\n       Text(\"Hello World\")\r\n   }\r\n}\r\n\r\nstruct MapView_Preview: PreviewProvider {\r\n   static var previews: some View {\r\n       MapView()\r\n   }\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f18e62a elementor-widget elementor-widget-text-editor\" data-id=\"f18e62a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>Change the View for TomTom Map<\/h2><p>It\u2019s easy to put a TomTom map on a view in SwiftUI. The UIViewRepresentable protocol has two required functions, makeUIView and updateUIView. The first one will return a UIView subclass, and the second one is called by the framework when a change happens that requires updates. The UIView subclass for a TomTom map view is TTMapView. So the view to get a map on a screen will be this:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0445f34 elementor-widget elementor-widget-code-highlight\" data-id=\"0445f34\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-swift line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-swift\">\n\t\t\t\t\t<xmp>Import SwiftUI\r\nimport TomTomOnlineSDKMaps\r\n\r\nstruct MapView: UIViewRepresentable {\r\n    func makeUIView(context: Context) -> TTMapView\r\n    {\r\n        return TTMapView(frame: CGRect.zero)\r\n    }\r\n\t\r\n    func updateUIView(_ uiView: TTMapView, context: UIViewRepresentableContext<MapView>)\r\n    {\r\n        \/\/ TBD: update map if something changes\r\n    }\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2190b5e elementor-widget elementor-widget-text-editor\" data-id=\"2190b5e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>After making these changes we can return to ContentView and add in the MapView above the other content.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4bf0c43 elementor-widget elementor-widget-code-highlight\" data-id=\"4bf0c43\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>struct ContentView: View {\r\nvar location: Location\r\n\t\r\n    var body: some View {\r\n\tVStack(alignment: .leading) {\r\n\t\tMapView()\r\n\t\tText(\"Hello World\")\r\n\t\t\t.font(.title)\r\n\t\t\t.foregroundColor(.green)\r\n\t\t}\r\n\t\t.padding()\r\n\t\t}\r\n    }\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-74cd4fd1 elementor-widget elementor-widget-text-editor\" data-id=\"74cd4fd1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><\/p>\n<pre><span style=\"color: rgb(0, 178, 169); font-family: Sailec, sans-serif; font-size: 2rem;\">Taking it Further<\/span><br><\/pre>\n<p>At this point we&#8217;ve successfully created a bare-bones iOS application using Xcode 11 and SwiftUI for iOS 13 and used the TomTom Maps SDK to embed a map.<\/p>\n<p>We can take this further and provide a list of locations, or use the user&#8217;s current location, and display them on the map:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48822751408_94d8a98819_o-1.png\" alt=\"swiftblog7\"><\/p>\n<p>The sample application that accompanies this article does exactly this. Explore the example app and the comments to see a small example of what you might do with the TomTom map on a SwiftUI screen. Check out the <a href=\"https:\/\/developer.tomtom.com\/maps-sdk-ios\/getting-started-2\">TomTom documentation page<\/a> to see how this can be extended even further: use tiles to display a 2.5D perspective, show live traffic, or play around with the styles to provide a Night Mode to compliment Dark Mode in iOS 13.<\/p>\n<h2>TomTom Sample Application<\/h2>\n<p>You can find a sample application that\u2019s implemented in both Swift and Objective-C on the <a href=\"https:\/\/developer.tomtom.com\/maps-sdk-ios\/downloads\">TomTom SDK downloads page.<\/a> It demonstrates dozens of functions available with the TomTom SDKs. Everything that\u2019s done in this sample app will work on the map inside the SwiftUI wrapper we\u2019ve just created.<\/p>\n<p>A note about building the examples: You\u2019ll have to fill in your own bundle ID for the application target in the SampleiOSApp included with this article. You\u2019ll need to do the same for all four targets included with the TomTom samples.<\/p>\n<p><em>This article was first published on <a href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui\">TomTom&#8217;s blog<\/a>.<br><\/em><\/p>\n<p><em><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\">If you\u2019re interested in developing expert technical content that performs, <\/span><\/span><a class=\"Hyperlink SCXW156001673 BCX2\" href=\"https:\/\/contentlab.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\" data-ccp-charstyle=\"Hyperlink\">let\u2019s have a conversation<\/span><\/span><\/a><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\"> today.<\/span><\/span><\/em><\/p>\n<p><em>&nbsp;<\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Xcode 11 introduces a new way to build user interfaces called SwiftUI. From\u00a0https:\/\/developer.apple.com\/documentation\/swiftui: SwiftUI provides views, controls, and layout structures for declaring your app&#8217;s user interface. The framework provides event handlers for delivering taps, gestures, and other types of input to your app, and tools to manage the flow of data from your app&#8217;s models [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":6794,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[278,18,240],"tags":[306,270,323],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Embedding TomTom Maps in an iOS App with SwiftUI &#183; Technical Content Marketing | ContentLab<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Embedding TomTom Maps in an iOS App with SwiftUI &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"Xcode 11 introduces a new way to build user interfaces called SwiftUI. From\u00a0https:\/\/developer.apple.com\/documentation\/swiftui: SwiftUI provides views, controls, and layout structures for declaring your app&#8217;s user interface. The framework provides event handlers for delivering taps, gestures, and other types of input to your app, and tools to manage the flow of data from your app&#8217;s models [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-18T16:07:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-24T19:00:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/71.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1746\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ContentLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:site\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ContentLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/embedding-tomtom-maps-in-an-ios-app-with-swiftui\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"Embedding TomTom Maps in an iOS App with SwiftUI\",\"datePublished\":\"2019-10-18T16:07:54+00:00\",\"dateModified\":\"2022-02-24T19:00:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/embedding-tomtom-maps-in-an-ios-app-with-swiftui\/\"},\"wordCount\":1640,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/71.png\",\"keywords\":[\"iOS\",\"Mapping\",\"Xcode\"],\"articleSection\":[\"Hands-on Tutorial\",\"Portfolio\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/embedding-tomtom-maps-in-an-ios-app-with-swiftui\/\",\"url\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui\",\"name\":\"Embedding TomTom Maps in an iOS App with SwiftUI &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui#primaryimage\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/71.png\",\"datePublished\":\"2019-10-18T16:07:54+00:00\",\"dateModified\":\"2022-02-24T19:00:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/71.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/71.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Embedding TomTom Maps in an iOS App with SwiftUI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/contentlab.com\/#website\",\"url\":\"https:\/\/contentlab.com\/\",\"name\":\"Technical Content Marketing | ContentLab\",\"description\":\"Technical Content Marketing Done Right.\",\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/contentlab.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/contentlab.com\/#organization\",\"name\":\"ContentLab.io\",\"url\":\"https:\/\/contentlab.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"width\":768,\"height\":768,\"caption\":\"ContentLab.io\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ContentLabIO\",\"https:\/\/www.linkedin.com\/company\/17893315\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\",\"name\":\"ContentLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"caption\":\"ContentLab\"},\"description\":\"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.\",\"sameAs\":[\"https:\/\/contentlab.op\"],\"url\":\"https:\/\/contentlab.com\/author\/contentlab\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Embedding TomTom Maps in an iOS App with SwiftUI &#183; Technical Content Marketing | ContentLab","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui","og_locale":"en_US","og_type":"article","og_title":"Embedding TomTom Maps in an iOS App with SwiftUI &#183; Technical Content Marketing | ContentLab","og_description":"Xcode 11 introduces a new way to build user interfaces called SwiftUI. From\u00a0https:\/\/developer.apple.com\/documentation\/swiftui: SwiftUI provides views, controls, and layout structures for declaring your app&#8217;s user interface. The framework provides event handlers for delivering taps, gestures, and other types of input to your app, and tools to manage the flow of data from your app&#8217;s models [&hellip;]","og_url":"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2019-10-18T16:07:54+00:00","article_modified_time":"2022-02-24T19:00:43+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/71.png","type":"image\/png"}],"author":"ContentLab","twitter_card":"summary_large_image","twitter_creator":"@ContentLabIO","twitter_site":"@ContentLabIO","twitter_misc":{"Written by":"ContentLab","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui#article","isPartOf":{"@id":"https:\/\/contentlab.com\/embedding-tomtom-maps-in-an-ios-app-with-swiftui\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"Embedding TomTom Maps in an iOS App with SwiftUI","datePublished":"2019-10-18T16:07:54+00:00","dateModified":"2022-02-24T19:00:43+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/embedding-tomtom-maps-in-an-ios-app-with-swiftui\/"},"wordCount":1640,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/71.png","keywords":["iOS","Mapping","Xcode"],"articleSection":["Hands-on Tutorial","Portfolio","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/embedding-tomtom-maps-in-an-ios-app-with-swiftui\/","url":"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui","name":"Embedding TomTom Maps in an iOS App with SwiftUI &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui#primaryimage"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/71.png","datePublished":"2019-10-18T16:07:54+00:00","dateModified":"2022-02-24T19:00:43+00:00","breadcrumb":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/71.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/71.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/embedding-tomtom-maps-ios-app-swiftui#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"Embedding TomTom Maps in an iOS App with SwiftUI"}]},{"@type":"WebSite","@id":"https:\/\/contentlab.com\/#website","url":"https:\/\/contentlab.com\/","name":"Technical Content Marketing | ContentLab","description":"Technical Content Marketing Done Right.","publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/contentlab.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/contentlab.com\/#organization","name":"ContentLab.io","url":"https:\/\/contentlab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","width":768,"height":768,"caption":"ContentLab.io"},"image":{"@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ContentLabIO","https:\/\/www.linkedin.com\/company\/17893315\/"]},{"@type":"Person","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532","name":"ContentLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","caption":"ContentLab"},"description":"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.","sameAs":["https:\/\/contentlab.op"],"url":"https:\/\/contentlab.com\/author\/contentlab\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/01\/71.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2942"}],"collection":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/comments?post=2942"}],"version-history":[{"count":6,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2942\/revisions"}],"predecessor-version":[{"id":6072,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2942\/revisions\/6072"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/6794"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=2942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=2942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=2942"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=2942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}