iOS Getting Started

At this time, version 6 of the Mappedin SDK is available exclusively for Web (TypeScript & JavaScript). Mappedin SDK for iOS version 5 is available for Enterprise customers with Enterprise tier maps. Maps created using the Mappedin Editor at the Free, Plus or Pro tiers must use SDK version 6 or higher as these maps are not supported in earlier versions of the SDK. Therefore Free, Plus or Pro tier are unable to use the Mappedin SDK for iOS at this time.

It is possible to use the version 6 Mappedin SDK within a WKWebView in a native iOS app. This approach enables an application to leverage the TypeScript/JavaScript Mappedin APIs to display a map.

The following code sample illustrates a class that populates the WKWebView with inline HTML that initializes and displays a map. For simplicity, the HTML is included inline in this example. In a production app, it is recommended to store the HTML and TypeScript content in separate files and load from there.

import UIKit
import WebKit

class ViewController: UIViewController {

    @IBOutlet weak var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        webView.loadHTMLString("""
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://cdn.jsdelivr.net/npm/@mappedin/mappedin-js@6.0.1-alpha.4/lib/index.css"
      rel="stylesheet"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
      }
      #mappedin-map {
        height: 100%;
        width: 100%;
        position: relative;
      }
    </style>
    <title>Mappedin Web SDK v6 Getting Started with JSDelivr</title>
  </head>
  <body>
    <div id="mappedin-map"></div>
    <script type="module">
      import {
        getMapData,
        show3dMap,
      } from "https://cdn.jsdelivr.net/npm/@mappedin/mappedin-js@6.0.1-alpha.4/lib/esm/index.js";

      const options = {
        key: "65ca6d27d53f21f234ae6395",
        secret: "0b25fc24d564c644443663d0b4d083605090d349975d0983fc96e06a5b1934dd",
        mapId: "65c0ff7430b94e3fabd5bb8c",
      };

      const mapData = await getMapData(options);
      const mapView = await show3dMap(
        document.getElementById("mappedin-map"),
        mapData
      );
    </script>
  </body>
</html>
""", baseURL: nil)

    }

}

iOS Getting Started

Sign up for developer updates

For more information