Dart JS 0.6 interrop with Leafletjs resulting in type error

Issue

I am trying to use LeafletJS from Dart using the js 0.6.0 interrop library. I have created the following Dart file to map the construction of a basic Leaflet map.

@JS("L")
library leaflet;

import "dart:html";
import "package:js/js.dart";

@JS("map")
class LeafletMap {
   external factory LeafletMap(Element element);
}

I then use these classes in my main.dart

import 'dart:html';
import 'package:charm/leaflet.dart';

main() {
   var e = querySelector("#map");
   var m = new LeafletMap(e);
}

This would be equivalent to the Javascript below which would create and display a map with default configuration.

var map = L.map('map');

The HTML looks like the following and includes the leaflet.js javascript file.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>

  <script src="main.dart" type="application/dart"></script>
  <script src="packages/browser/dart.js"></script>
</head>
<body>
  <div id="map"></div>
</body>
</html>

The following error is displayed in the browser console:

Uncaught TypeError: L.map is not a function

However, if I use the console directly in the browser, L.map exists as a function. Not sure if I’m using the JS interrop library correctly and would appreciate any pointers.

Solution

You face an known issue that is basically about collisions with minified dart2js names.

Answered By – Alexandre Ardhuin

Answer Checked By – Timothy Miller (FlutterFixes Admin)

Issue

Solution

Leave a Reply Cancel reply