mapkit_js
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.
Libraries
- mapkit_js
- Dart implementation of Apple's MapKitJS. Embedding Apple Maps on the Web.