mapkit_js 0.3.0

Dart implementation of Apple's MapKitJS. Embedding Apple Maps on the Web.

mapkit_js

English, 日本語

This is a Dart implementation of Apple's MapKitJS that allows you to embed Apple Maps into your web pages. See Apple's page for more detailed explanation. https://developer.apple.com/documentation/mapkitjs

Getting started

import 'dart:js_interop';
import 'package:mapkit_js/mapkit_js.dart' as mapkit;

void main() async {
  // You need to prepare TokenID.
  // https://developer.apple.com/documentation/mapkitjs/creating_a_maps_identifier_and_a_private_key
  const tokenID = String.fromEnvironment('TokenID');
  // Load MapKitJS Script
  await mapkit.loadMapKitJS(tokenID);
  // Initializes MapKit JS
  mapkit.init(mapkit.MapKitInitOptions(
      authorizationCallback: (JSFunction done) {
    // done() to return the token
    done.callAsFunction(null, tokenID.toJS);
    // Wait until library loading is complete
    Future.doWhile(() async {
      if (mapkit.loadedLibraries.toDart.isEmpty) {
        await Future.delayed(Duration(milliseconds: 100));
        return true;
      }
      return false;
    }).whenComplete(() {
      // Creates a map
      final map = mapkit.Map('map'.toJS, null);
      map.addEventListener(
          'region-change-end',
          (JSAny e) {
            print(map.center);
          }.toJS,
          null);
      map.addEventListener(
          'single-tap',
          (JSAny e) {
            map.setCenterAnimated(mapkit.Coordinate(37.415, -122.048333), true);
          }.toJS,
          null);
    });
  }.toJS));
}

TokenID

To use MapKitJS, you need to issue a TokenID.
Please refer to the following link to obtain a TokenID.

https://developer.apple.com/documentation/mapkitjs/creating_a_maps_identifier_and_a_private_key

If you put the TokenID in build.yaml as follows, you can get the value with String.fromEnvironment in Dart.

global_options:
  build_web_compilers|ddc:
    options:
      environment:
        TokenID: <YOUR_TOKEN>

  const tokenID = String.fromEnvironment('TokenID');

Build

I have also created a tool to automatically generate the api. The following command will generate mapkit_js_api.dart.

dart tool/main.dart

Additional information

I have done very little testing. If you would like to help me, I would appreciate it if you could give me a PR.