Android Getting Started

At this time version 6 of the Mappedin SDK is available exclusively for Web (TypeScript & JavaScript). Mappedin SDK for Android 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 Android at this time.

It is possible to use the version 6 Mappedin SDK within a WebView in a native Android 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 enables the required WebView features and populates the WebView with inline HTML that initializes the WebView 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 within the app's assets folder and load from there.

package com.mappedin.demo.v6inawebview

import android.annotation.SuppressLint
import android.os.Bundle
import android.webkit.WebView
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

class MainActivity : AppCompatActivity() {
    @SuppressLint("SetJavaScriptEnabled")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(R.layout.activity_main)
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }

        // Create a WebView with the required features enabled.
        // The layout contains a WebView with the id mappedinWebView.
        val mappedinWebView: WebView = findViewById(R.id.mappedinWebView)
        mappedinWebView.settings.javaScriptEnabled = true
        mappedinWebView.settings.setGeolocationEnabled(true)
        mappedinWebView.settings.databaseEnabled = true
        mappedinWebView.settings.domStorageEnabled = true
        mappedinWebView.settings.mixedContentMode = 0

        // Content to be loaded in the WebView. It's recommended to place this content in a
        // file in the assets folder and load from there. This example includes it inline
        // to provide sample code within a single class.
        val htmlData = """
            <!DOCTYPE html>
            <html lang="en">
              <head>
                <meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <link
                  href="https://cdn.jsdelivr.net/npm/@mappedin/mappedin-js@6.0.1-alpha.4/lib/index.css"
                  rel="stylesheet"
                />

                <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: "660c0c6e7c0c4fe5b4cc484c",
                  };

                  const mapData = await getMapData(options);
                  const mapView = await show3dMap(
                    document.getElementById("mappedin-map"),
                    mapData
                  );
                </script>
              </body>
            </html>
        """.trimIndent()
        mappedinWebView.loadData(htmlData, "text/html", "UTF-8")

    }
}

Android Getting Started

Sign up for developer updates

For more information