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")
}
}

© 2024 Mappedin Inc.

All Rights Reserved.

Sign up for developer updates

Get early access to release notes, major version changes, version migration guides, and our developer focused blog posts.

Loading...

For more information

Read the Developer Blog

Explore the Playground

Talk to Sales

Maps for Good 🤍