Yatmo in a WebView, Capacitor, Ionic or Cordova app

No SDK, no native map dependency: the iframe plugin loaded in a WebView gives you the exact web experience (map, summary panel, scores, swipeable tabs) in an afternoon. Hybrid frameworks keep using the JavaScript plugin as on the web.

When to choose it

• Your app already renders listing pages in a WebView, or is built with Capacitor, Ionic or Cordova.
• You want the summary panel, scores or tabs as they exist on the web, without rebuilding them natively.
• You want to ship this week and evaluate the native SDKs later.

The URL

Everything is configured through the iframe plugin parameters. For a phone, mode=map-top or mode=summary-tabs usually fit better than the side-by-side overlay:

https://map.yatmo.com/plugin.html?licenseKey=YOUR_FRONTEND_KEY&country=BE&language=FR
    &latitude=50.8520525&longitude=4.3442926&mode=map-top&zoom=15&accentColor=%23428BFF

iOS: WKWebView

import WebKit

let config = WKWebViewConfiguration()
config.allowsInlineMediaPlayback = true
let web = WKWebView(frame: view.bounds, configuration: config)
web.scrollView.bounces = false
web.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(web)

var components = URLComponents(string: "https://map.yatmo.com/plugin.html")!
components.queryItems = [
    .init(name: "licenseKey", value: "YOUR_FRONTEND_KEY"),
    .init(name: "country", value: "BE"), .init(name: "language", value: "FR"),
    .init(name: "latitude", value: "50.8520525"), .init(name: "longitude", value: "4.3442926"),
    .init(name: "mode", value: "map-top"), .init(name: "zoom", value: "15")
]
web.load(URLRequest(url: components.url!))

The iOS SDK ships this as YatmoWebView if you prefer not to build the URL yourself.

Android: WebView

val web = WebView(this)
web.settings.javaScriptEnabled = true
web.settings.domStorageEnabled = true
web.webViewClient = WebViewClient()          // keep navigation inside the WebView
container.addView(web)

val url = Uri.parse("https://map.yatmo.com/plugin.html").buildUpon()
    .appendQueryParameter("licenseKey", "YOUR_FRONTEND_KEY")
    .appendQueryParameter("country", "BE").appendQueryParameter("language", "FR")
    .appendQueryParameter("latitude", "50.8520525").appendQueryParameter("longitude", "4.3442926")
    .appendQueryParameter("mode", "map-top").appendQueryParameter("zoom", "15")
    .build().toString()
web.loadUrl(url)

Hardware acceleration must stay enabled (it is by default) for the vector map to render smoothly. The Android SDK ships this as YatmoWebView.

Capacitor, Ionic, Cordova

Your app is a web page: use the JavaScript Map plugin, the Summary plugin or the iframe exactly as documented for websites. Nothing changes in the snippet:

<div id="yatmo-map" style="height: 320px"></div>
<script>
  yatmoConfig = {
    licenseKey: 'YOUR_FRONTEND_KEY', country: 'BE', language: 'FR',
    container: 'yatmo-map', center: [4.3442926, 50.8520525], zoom: 15
  };
</script>
<script src="https://map.yatmo.com/map_v3.js"></script>

Load the script from map.yatmo.com at runtime rather than bundling it, so your app receives plugin updates without a store release. If your framework builds a strict Content Security Policy, allow https://*.yatmo.com and the Yatmo CDN hosts for script-src, connect-src, img-src and frame-src.

Authentication

A WebView behaves like a browser: requests from plugin.html carry the Origin https://map.yatmo.com, which the API accepts, and requests from a Capacitor or Ionic app carry capacitor://localhost or http://localhost, which the API accepts as a local origin. So your frontend key works out of the box, with no app id to register. If you also use a native SDK in the same app and registered app ids, the WebView keeps working: the app id rule only applies to requests that carry no Origin.

Trade-offs

• Gestures: a map inside a scrolling page competes with the page scroll. Give the WebView its own screen, or a fixed height with mode=map-top.
• Performance: fine on any device from the last five years; the native SDKs are still smoother on long sessions and cheaper on memory.
• Look and feel: web controls, web fonts. The native SDKs let you draw your own popups and sheets.
• Offline: neither path works offline; the native SDKs fail more gracefully (map stays, POIs return when the network does).

Related: Iframe plugin · iOS SDK · Android SDK · Overview.