System Overview

Lewotobi is a hosted, geospatial SaaS platform designed specifically for dive centers. We provide a fully managed mapping engine that replaces static images or complex Google Maps API implementations.

  • Architecture Delivered via a secure, isolated <iframe> that handles all WebGL rendering. No heavy JavaScript bundles or third-party dependencies are added to your parent site's build.
  • Data Flow Your client manages coordinates, dive sites, and map styles via the Lewotobi Dashboard. Updates are pushed globally to our edge CDN and reflect on your site instantly without code changes.

Widget API Reference

The Lewotobi Widget is controlled via HTML attributes on the container element. All attributes are strict strings.

AttributeRequiredDescription
classYesMust be exactly lewotobi-embed-map.
data-idYesYour UUID Shop ID found in Settings.
styleRecommendedCSS styles for dimensions. We recommend width: 100%; height: 600px;.
data-demoNoSet to true to enable demo overlays (used for testing).

Smart Theming: The map follows your style settings, not the source shop's. The widget automatically syncs with your Style Settings in the Lewotobi Dashboard to apply your preferred map colors.

Container Styling

The widget is responsive by default. On Desktop, it fills the dimensions of your container. On Mobile (screens narrower than 768px), it automatically enforces a 1:1 Square Aspect Ratio for the best touch experience.

style.css
/* Recommended Container Styles */ .lewotobi-embed-map { width: 100%; height: 600px; /* Desktop Height */ border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } /* Note: Mobile height is auto-calculated */ /* to be equal to the width (Square) */

Best Practices

  • Use border-radius to match your brand's design language.
  • Apply overflow: hidden to ensure the map corners clip correctly.
  • Ensure the container width is at least 300px for usability.

Important Requirement

On mobile devices, the widget will ignore your height property and force a square layout to maximize screen real estate. Please ensure your layout can accommodate this dynamic height change on smaller screens.

Mobile Interaction

To prevent "scroll jacking" (where a user gets stuck inside the map while scrolling the page), the widget implements a Scroll Protection Curtain on mobile devices.

Scroll Protection

The map is initially covered by a transparent layer. Users can scroll over the map without interacting with it.

Lightbox Mode

When a user taps the map, it enters Lightbox Mode, expanding to fullscreen for an immersive exploration experience.