longdo-map-flutter

Longdo Map — Flutter SDK (longdo_maps_api3_flutter)

Official getting-started: https://map.longdo.com/docs3/flutter/getting-start Package: https://pub.dev/packages/longdo_maps_api3_flutter Native API reference: https://api.longdo.com/map3/doc-native.html Get a free API key: https://map.longdo.com/console/

Key mental model: longdo_maps_api3_flutter is a thin wrapper that hosts the Longdo Map JavaScript API v3 inside a WebView. You don't get Dart classes for every map feature — instead you call JS API methods by name and construct JS objects from Dart. So the patterns in the longdo-map-js skill (marker options, events, layers, overlays) are the source of truth for what's available; this skill is about the Dart ⇄ JS bridge.

Add the dependency

# pubspec.yaml
dependencies:
  longdo_maps_api3_flutter: ^1.12.0

The plugin pulls in webview_flutter and package_info_plus. Because it's WebView-based, the app needs internet access at runtime:

• Android: ensure <uses-permission android:name="android.permission.INTERNET"/> is in AndroidManifest.xml (Flutter's default debug manifest has it).
• iOS: the WebView loads over HTTPS, so no extra ATS exceptions are needed for the default Longdo tiles.

Verify the current minimum SDK / platform setup against the official getting-started page — native requirements can change between SDK versions.

The map widget

LongdoMapWidget is driven through a GlobalKey<LongdoMapState> — you use the key's currentState to call into the map after it's ready.

import 'package:flutter/material.dart';
import 'package:longdo_maps_api3_flutter/longdo_maps_api3_flutter.dart';

class MapScreen extends StatefulWidget {
  const MapScreen({super.key});
  @override
  State<MapScreen> createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  final map = GlobalKey<LongdoMapState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: LongdoMapWidget(
          apiKey: "YOUR_API_KEY",   // inject from --dart-define / config, not hard-coded
          key: map,
          // map options forwarded to the JS longdo.Map constructor:
          options: const {
            "zoom": 14,
            "location": {"lon": 100.5018, "lat": 13.7563},
            "lastView": false,
          },
          // JS events you want surfaced back to Dart:
          eventName: [
            IJavascriptChannel(
              name: "ready",
              onMessageReceived: (message) => _onReady(),
            ),
            IJavascriptChannel(
              name: "overlayClick",
              onMessageReceived: (message) {
                // message carries the clicked overlay's data as a JSON string
                debugPrint("overlayClick: ${message}");
              },
            ),
          ],
        ),
      ),
    );
  }

  void _onReady() {
    // add a marker once the map's JS side has loaded
    final marker = Longdo.LongdoObject(
      "Marker",
      args: [
        {"lon": 100.5018, "lat": 13.7563},
        {"title": "Bangkok", "detail": "Hello from Flutter"},
      ],
    );
    map.currentState?.call("Overlays.add", args: [marker]);
  }
}