Skip to content

Commit 8bb0cdf

Browse files
stevemunkstevemunk
committed
Added back a couple articles.
1 parent 10ff764 commit 8bb0cdf

File tree

3 files changed

+158
-201
lines changed

3 files changed

+158
-201
lines changed

‎articles/azure-maps/ios-sdk-migration-guide.md

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
---
2+
title: The Azure Maps iOS SDK migration guide
3+
titleSuffix: Microsoft Azure Maps
4+
description: Find out how to migrate your Azure Maps iOS SDK applications to the Web SDK using a WebView.
5+
author: sinnypan
6+
ms.author: sipa
7+
ms.date: 03/31/2025
8+
ms.topic: how-to
9+
ms.service: azure-maps
10+
ms.subservice: ios-sdk
11+
---
12+
13+
# The Azure Maps iOS SDK migration guide
14+
15+
Migrating from the Azure Maps iOS SDK to the Web SDK in a WebView involves transitioning your existing map view from a native implementation to a web-based map using the Azure Maps Web SDK. This guide shows you how to migrate your code and features from the iOS SDK to the Web SDK.
16+
17+
> [!NOTE]
18+
>
19+
> **Azure Maps iOS SDK retirement**
20+
>
21+
> The Azure Maps Native SDK for iOS is now retired and no longer supported. Use this guide to migrate to the Azure Maps Web SDK.
22+
23+
## Prerequisites
24+
25+
To use the Map Control in a web page, you must have one of the following prerequisites:
26+
27+
* An [Azure Maps account].
28+
* A [subscription key] or Microsoft Entra credentials. For more information, see [authentication options].
29+
30+
## Create a WebView
31+
32+
Add a WebView if your iOS application doesn't have one. Do so by adding the `WKWebView` to your storyboard or programmatically in your Swift code. Be sure it's configured to occupy the desired area of your layout.
33+
34+
```swift
35+
import UIKit
36+
import WebKit
37+
38+
class ViewController: UIViewController, WKNavigationDelegate {
39+
40+
var webView: WKWebView!
41+
42+
override func viewDidLoad() {
43+
super.viewDidLoad()
44+
45+
// Create WKWebView instance
46+
webView = WKWebView(frame: view.bounds)
47+
webView.navigationDelegate = self
48+
view.addSubview(webView)
49+
50+
// Load local HTML file
51+
loadLocalHTMLFile()
52+
}
53+
54+
func loadLocalHTMLFile() {
55+
if let htmlPath = Bundle.main.path(forResource: "map", ofType: "html") {
56+
do {
57+
let htmlString = try String(contentsOfFile: htmlPath, encoding: .utf8)
58+
webView.loadHTMLString(htmlString, baseURL: Bundle.main.bundleURL)
59+
} catch {
60+
print("Error loading HTML file: \(error)")
61+
}
62+
} else {
63+
print("HTML file not found.")
64+
}
65+
}
66+
}
67+
```
68+
69+
## Set up a map with Azure Maps Web SDK
70+
71+
In your HTML file, initialize a map with your subscription key. Replace `<YOUR_SUBSCRIPTION_KEY>` with your actual key.
72+
73+
```html
74+
<!DOCTYPE html>
75+
<html>
76+
<head>
77+
<title>Azure Maps</title>
78+
<meta charset="utf-8" />
79+
<meta name="viewport" content="width=device-width, initial-scale=1" />
80+
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
81+
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css"/>
82+
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
83+
<style>
84+
html,
85+
body,
86+
#map {
87+
margin: 0;
88+
height: 100%;
89+
width: 100%;
90+
}
91+
body {
92+
display: flex;
93+
flex-direction: column;
94+
}
95+
main {
96+
flex: 1 1 auto;
97+
}
98+
</style>
99+
<script type="text/javascript">
100+
// Create an instance of the map control.
101+
function InitMap() {
102+
var map = new atlas.Map("map", {
103+
center: [-122.33, 47.6],
104+
zoom: 12,
105+
authOptions: {
106+
authType: "subscriptionKey",
107+
subscriptionKey: "<YOUR_SUBSCRIPTION_KEY>"
108+
}
109+
});
110+
111+
// Wait until the map resources are ready.
112+
map.events.add("ready", function () {
113+
// Resize the map to fill the container.
114+
map.resize();
115+
});
116+
}
117+
</script>
118+
</head>
119+
<body onload="InitMap()">
120+
<main>
121+
<div id="map"></div>
122+
</main>
123+
</body>
124+
</html>
125+
```
126+
127+
Save and run the app. A map should be shown within a WebView. Add any features or functionalities that you want to use from the Web SDK. You can refer to the [Azure Maps Documentation] and the [Azure Maps Samples] for more use cases.
128+
129+
:::image type="content" source="./media/ios-sdk-migration-guide/maps-ios.png" alt-text="A screenshot of a map in a WebView.":::
130+
131+
## Communication between native code and WebView (optional)
132+
133+
To enable communication between your iOS application and the WebView, you can use the `WKScriptMessageHandler` protocol provided by the `WKWebView` class. It allows you to establish a bridge for communication between JavaScript running in the WebView and your Swift code. For more information, see [WKScriptMessageHandler] in the iOS WebKit documentation.
134+
135+
## Clean Up Native Map Implementation
136+
137+
Remove code related to the native Azure Maps iOS SDK from your project, including dependencies and initialization code related to `azure-maps-ios-sdk-distribution`.
138+
139+
## Testing
140+
141+
Test your application thoroughly to ensure that the migration was successful. Check for issues related to map functionality, user interactions, and performance.
142+
143+
## Next steps
144+
145+
Learn how to add maps to web and mobile applications using the Map Control client-side JavaScript library in Azure Maps:
146+
147+
> [!div class="nextstepaction"]
148+
> [Use the Azure Maps map control]
149+
150+
[Azure Maps account]: quick-demo-map-app.md#create-an-azure-maps-account
151+
[subscription key]: quick-demo-map-app.md#get-the-subscription-key-for-your-account
152+
[authentication options]: /javascript/api/azure-maps-control/atlas.authenticationoptions
153+
[Azure Maps Documentation]: how-to-use-map-control.md
154+
[Azure Maps Samples]: https://samples.azuremaps.com/
155+
[WKScriptMessageHandler]: https://developer.apple.com/documentation/webkit/wkscriptmessagehandler
156+
[Use the Azure Maps map control]: how-to-use-map-control.md
157+
158+

‎articles/azure-maps/media/android-sdk-migration-guide/maps-android.png

1.98 MB
Loading

‎articles/azure-maps/quick-ios-app.md

Lines changed: 0 additions & 201 deletions
This file was deleted.

0 commit comments

Comments
 (0)