map.data.addGeoJson doesn't work

[igvnv]

I'm trying to add GeoJSON on map but have an error: EXCEPTION: InvalidValueError: not a Feature or FeatureCollection

GeoJSON is correct and works properly with Google Maps sample (https://developers.google.com/maps/documentation/javascript/examples/layer-data-dragndrop)

My code:

class AppComponent implements OnInit {
  void ngOnInit() {
    final mapOptions = MapOptions()
      ..zoom = 8
      ..center = LatLng(-34.397, 150.644);

    GMap map = GMap(document.getElementById('map-canvas'), mapOptions);

    map.data.addGeoJson({ "type": "FeatureCollection",
      "features": [
        { "type": "Feature",
          "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
          "properties": {"prop0": "value0"}
        },
        { "type": "Feature",
          "geometry": {
            "type": "LineString",
            "coordinates": [
              [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
            ]
          },
          "properties": {
            "prop0": "value0",
            "prop1": 0.0
          }
        },
        { "type": "Feature",
          "geometry": {
            "type": "Polygon",
            "coordinates": [
              [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
              [100.0, 1.0], [100.0, 0.0] ]
            ]
          },
          "properties": {
            "prop0": "value0",
            "prop1": {"this": "that"}
          }
        }
      ]
    });
  }
}

Dart Angular 5, Dart version is 2.0.0-dev.69.5

[a14n]

In the last version of google_maps dart package you cannot directly use a map as parameter of map.data.addGeoJson. You need to wrap your map with JsObject.jsify:

class AppComponent implements OnInit {
  void ngOnInit() {
    final mapOptions = MapOptions()
      ..zoom = 8
      ..center = LatLng(-34.397, 150.644);

    GMap map = GMap(document.getElementById('map-canvas'), mapOptions);

    map.data.addGeoJson(JsObject.jsify({ "type": "FeatureCollection",
      "features": [
        { "type": "Feature",
          "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
          "properties": {"prop0": "value0"}
        },
        { "type": "Feature",
          "geometry": {
            "type": "LineString",
            "coordinates": [
              [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
            ]
          },
          "properties": {
            "prop0": "value0",
            "prop1": 0.0
          }
        },
        { "type": "Feature",
          "geometry": {
            "type": "Polygon",
            "coordinates": [
              [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
              [100.0, 1.0], [100.0, 0.0] ]
            ]
          },
          "properties": {
            "prop0": "value0",
            "prop1": {"this": "that"}
          }
        }
      ]
    }));
  }
}

Does it work for you?

[igvnv]

Yes, it's work! Thank you a lot.

It will be great if you add it to examples.

[a14n]

It's already there ;)

https://github.com/a14n/dart-google-maps/blob/15af255348536c458624b61a73de695ccb0c3b17/example/06-layers/layer-data-dragndrop/page.dart#L27