diff --git a/.github/workflows/webdev_build_publish_gh_pages.yml b/.github/workflows/webdev_build_publish_gh_pages.yml index a05fd4b..0913116 100644 --- a/.github/workflows/webdev_build_publish_gh_pages.yml +++ b/.github/workflows/webdev_build_publish_gh_pages.yml @@ -15,7 +15,7 @@ jobs: - uses: actions/checkout@v1 - run: pub global activate webdev - run: pub get - - run: pub global run webdev build --no-release --output example:build + - run: pub global run webdev build --output example:build - run: | cd build git init diff --git a/example/data_driven_circle_colors/index.dart b/example/data_driven_circle_colors/index.dart index ed633ba..6143f96 100644 --- a/example/data_driven_circle_colors/index.dart +++ b/example/data_driven_circle_colors/index.dart @@ -1,3 +1,6 @@ +import 'dart:js'; + +import 'package:js/js.dart'; import 'package:mapbox_gl_dart/mapbox_gl_dart.dart'; void main() { @@ -13,7 +16,7 @@ void main() { ), ); - map.on('load', () { + map.on('load', allowInterop((_) { /* Sample feature from the `examples.8fgz4egr` tileset: { "type": "Feature", @@ -34,13 +37,13 @@ void main() { sourceLayer: 'sf2010', paint: CirclePaint( // make circles larger as the user zooms from z12 to z22 - circleRadius: StyleFunction( - base: 1.75, - stops: [ + circleRadius: { + 'base': 1.75, + 'stops': [ [12, 2], [22, 180] ], - ), + }, // color circles by ethnicity, using a match expression // https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match circleColor: [ @@ -59,6 +62,6 @@ void main() { ), ); - map.addLayer(layer); - }); + map.addLayer(layer.toJs()); + })); } diff --git a/example/drag_a_marker/index.dart b/example/drag_a_marker/index.dart index 17c7596..2207a4f 100644 --- a/example/drag_a_marker/index.dart +++ b/example/drag_a_marker/index.dart @@ -1,5 +1,6 @@ import 'dart:html'; +import 'package:js/js.dart'; import 'package:mapbox_gl_dart/mapbox_gl_dart.dart'; Marker marker; @@ -25,10 +26,10 @@ void main() { ), ).setLngLat(LngLat(0, 0)).addTo(map); - marker.on('dragend', onDragEnd); + marker.on('dragend', allowInterop(onDragEnd)); } -void onDragEnd() { +void onDragEnd(_) { var lngLat = marker.getLngLat(); coordinates.style.display = 'block'; coordinates.innerHtml = diff --git a/example/popup_on_click/index.dart b/example/popup_on_click/index.dart index 2349e29..e267598 100644 --- a/example/popup_on_click/index.dart +++ b/example/popup_on_click/index.dart @@ -1,3 +1,4 @@ +import 'package:js/js.dart'; import 'package:mapbox_gl_dart/mapbox_gl_dart.dart'; void main() { @@ -13,150 +14,141 @@ void main() { ), ); - map.on('load', () { + map.on('load', allowInterop((_) { // Add a layer showing the places. var layer = SymbolLayer( id: 'places', - //type: 'symbol', source: GeoJsonSource( - type: 'geojson', - data: FeatureCollection(type: 'FeatureCollection', features: [ - Feature( - type: 'Feature', - properties: Properties( - description: - 'Make it Mount Pleasant

Make it Mount Pleasant is a handmade and vintage market and afternoon of live entertainment and kids activities. 12:00-6:00 p.m.

', - icon: 'theatre', - ), - geometry: Geometry( - type: 'Point', - coordinates: [-77.038659, 38.931567], - ), - ), - Feature( - type: 'Feature', - properties: Properties( - description: - 'Mad Men Season Five Finale Watch Party

Head to Lounge 201 (201 Massachusetts Avenue NE) Sunday for a Mad Men Season Five Finale Watch Party, complete with 60s costume contest, Mad Men trivia, and retro food and drink. 8:00-11:00 p.m. \$10 general admission, \$20 admission and two hour open bar.

', - icon: 'theatre', - ), - geometry: Geometry( - type: 'Point', - coordinates: [-77.003168, 38.894651], - ), - ), - Feature( - type: 'Feature', - properties: Properties( - description: - 'Big Backyard Beach Bash and Wine Fest

EatBar (2761 Washington Boulevard Arlington VA) is throwing a Big Backyard Beach Bash and Wine Fest on Saturday, serving up conch fritters, fish tacos and crab sliders, and Red Apron hot dogs. 12:00-3:00 p.m. \$25.grill hot dogs.

', - icon: 'bar', - ), - geometry: Geometry( - type: 'Point', - coordinates: [-77.090372, 38.881189], - ), - ), - Feature( - type: 'Feature', - properties: Properties( - description: - 'Ballston Arts & Crafts Market

The Ballston Arts & Crafts Market sets up shop next to the Ballston metro this Saturday for the first of five dates this summer. Nearly 35 artists and crafters will be on hand selling their wares. 10:00-4:00 p.m.

', - icon: 'art-gallery', - ), - geometry: Geometry( - type: 'Point', - coordinates: [-77.111561, 38.882342], - ), - ), - Feature( - type: 'Feature', - properties: Properties( - description: - 'Seersucker Bike Ride and Social

Feeling dandy? Get fancy, grab your bike, and take part in this year\'s Seersucker Social bike ride from Dandies and Quaintrelles. After the ride enjoy a lawn party at Hillwood with jazz, cocktails, paper hat-making, and more. 11:00-7:00 p.m.

', - icon: 'bicycle', - ), - geometry: Geometry( - type: 'Point', - coordinates: [-77.052477, 38.943951], - ), - ), - Feature( - type: 'Feature', - properties: Properties( - description: - 'Capital Pride Parade

The annual Capital Pride Parade makes its way through Dupont this Saturday. 4:30 p.m. Free.

', - icon: 'rocket', - ), - geometry: Geometry( - type: 'Point', - coordinates: [-77.043444, 38.909664], - ), - ), - Feature( - type: 'Feature', - properties: Properties( - description: - 'Muhsinah

Jazz-influenced hip hop artist Muhsinah plays the Black Cat (1811 14th Street NW) tonight with Exit Clov and Gods’illa. 9:00 p.m. \$12.

', - icon: 'music', - ), - geometry: Geometry( - type: 'Point', - coordinates: [-77.031706, 38.914581], - ), - ), - Feature( - type: 'Feature', - properties: Properties( - description: - 'A Little Night Music

The Arlington Players\' production of Stephen Sondheim\'s A Little Night Music comes to the Kogod Cradle at The Mead Center for American Theater (1101 6th Street SW) this weekend and next. 8:00 p.m.

', - icon: 'music', - ), - geometry: Geometry( - type: 'Point', - coordinates: [-77.020945, 38.878241], - ), - ), - Feature( - type: 'Feature', - properties: Properties( - description: - 'Truckeroo

Truckeroo brings dozens of food trucks, live music, and games to half and M Street SE (across from Navy Yard Metro Station) today from 11:00 a.m. to 11:00 p.m.

', - icon: 'music', - ), - geometry: Geometry( - type: 'Point', - coordinates: [-77.007481, 38.876516], - ), - ) - ]), + data: FeatureCollection( + features: [ + Feature( + properties: Properties( + description: + 'Make it Mount Pleasant

Make it Mount Pleasant is a handmade and vintage market and afternoon of live entertainment and kids activities. 12:00-6:00 p.m.

', + icon: 'theatre', + ), + geometry: Geometry( + type: 'Point', + coordinates: [-77.038659, 38.931567], + ), + ), + Feature( + properties: Properties( + description: + 'Mad Men Season Five Finale Watch Party

Head to Lounge 201 (201 Massachusetts Avenue NE) Sunday for a Mad Men Season Five Finale Watch Party, complete with 60s costume contest, Mad Men trivia, and retro food and drink. 8:00-11:00 p.m. \$10 general admission, \$20 admission and two hour open bar.

', + icon: 'theatre', + ), + geometry: Geometry( + type: 'Point', + coordinates: [-77.003168, 38.894651], + ), + ), + Feature( + properties: Properties( + description: + 'Big Backyard Beach Bash and Wine Fest

EatBar (2761 Washington Boulevard Arlington VA) is throwing a Big Backyard Beach Bash and Wine Fest on Saturday, serving up conch fritters, fish tacos and crab sliders, and Red Apron hot dogs. 12:00-3:00 p.m. \$25.grill hot dogs.

', + icon: 'bar', + ), + geometry: Geometry( + type: 'Point', + coordinates: [-77.090372, 38.881189], + ), + ), + Feature( + properties: Properties( + description: + 'Ballston Arts & Crafts Market

The Ballston Arts & Crafts Market sets up shop next to the Ballston metro this Saturday for the first of five dates this summer. Nearly 35 artists and crafters will be on hand selling their wares. 10:00-4:00 p.m.

', + icon: 'art-gallery', + ), + geometry: Geometry( + type: 'Point', + coordinates: [-77.111561, 38.882342], + ), + ), + Feature( + properties: Properties( + description: + 'Seersucker Bike Ride and Social

Feeling dandy? Get fancy, grab your bike, and take part in this year\'s Seersucker Social bike ride from Dandies and Quaintrelles. After the ride enjoy a lawn party at Hillwood with jazz, cocktails, paper hat-making, and more. 11:00-7:00 p.m.

', + icon: 'bicycle', + ), + geometry: Geometry( + type: 'Point', + coordinates: [-77.052477, 38.943951], + ), + ), + Feature( + properties: Properties( + description: + 'Capital Pride Parade

The annual Capital Pride Parade makes its way through Dupont this Saturday. 4:30 p.m. Free.

', + icon: 'rocket', + ), + geometry: Geometry( + type: 'Point', + coordinates: [-77.043444, 38.909664], + ), + ), + Feature( + properties: Properties( + description: + 'Muhsinah

Jazz-influenced hip hop artist Muhsinah plays the Black Cat (1811 14th Street NW) tonight with Exit Clov and Gods’illa. 9:00 p.m. \$12.

', + icon: 'music', + ), + geometry: Geometry( + type: 'Point', + coordinates: [-77.031706, 38.914581], + ), + ), + Feature( + properties: Properties( + description: + 'A Little Night Music

The Arlington Players\' production of Stephen Sondheim\'s A Little Night Music comes to the Kogod Cradle at The Mead Center for American Theater (1101 6th Street SW) this weekend and next. 8:00 p.m.

', + icon: 'music', + ), + geometry: Geometry( + type: 'Point', + coordinates: [-77.020945, 38.878241], + ), + ), + Feature( + properties: Properties( + description: + 'Truckeroo

Truckeroo brings dozens of food trucks, live music, and games to half and M Street SE (across from Navy Yard Metro Station) today from 11:00 a.m. to 11:00 p.m.

', + icon: 'music', + ), + geometry: Geometry( + type: 'Point', + coordinates: [-77.007481, 38.876516], + ), + ) + ], + ), ), layout: Layout( iconImage: '{icon}-15', iconAllowOverlap: true, ), ); - map.addLayer(layer); + map.addLayer(layer.toJs()); // When a click event occurs on a feature in the places layer, open a popup at the // location of the feature, with description HTML from its properties. - map.on('click', 'places', (e) { + map.on('click', 'places', allowInterop((e) { var coordinates = e.features[0].geometry.coordinates; var description = e.features[0].properties.description; Popup() .setLngLat(LngLat(coordinates[0], coordinates[1])) .setHTML(description) .addTo(map); - }); + })); // Change the cursor to a pointer when the mouse is over the places layer. - map.on('mouseenter', 'places', (_) { + map.on('mouseenter', 'places', allowInterop((_) { map.getCanvas().style.cursor = 'pointer'; - }); + })); // Change it back to a pointer when it leaves. - map.on('mouseleave', 'places', (_) { + map.on('mouseleave', 'places', allowInterop((_) { map.getCanvas().style.cursor = ''; - }); - }); + })); + })); } diff --git a/example/popup_on_hover/index.dart b/example/popup_on_hover/index.dart index b1bdca1..a9b2bdb 100644 --- a/example/popup_on_hover/index.dart +++ b/example/popup_on_hover/index.dart @@ -1,3 +1,6 @@ +import 'dart:js'; + +import 'package:js/js.dart'; import 'package:mapbox_gl_dart/mapbox_gl_dart.dart'; void main() { @@ -13,130 +16,122 @@ void main() { ), ); - map.on('load', () { + map.on('load', allowInterop((_) { // Add a layer showing the places. var layer = SymbolLayer( id: 'places', //type: 'symbol', source: GeoJsonSource( - type: 'geojson', - data: FeatureCollection(type: 'FeatureCollection', features: [ - Feature( - type: 'Feature', - properties: Properties( - description: - 'Make it Mount Pleasant

Make it Mount Pleasant is a handmade and vintage market and afternoon of live entertainment and kids activities. 12:00-6:00 p.m.

', - icon: 'theatre', - ), - geometry: Geometry( - type: 'Point', - coordinates: [-77.038659, 38.931567], - ), - ), - Feature( - type: 'Feature', - properties: Properties( - description: - 'Mad Men Season Five Finale Watch Party

Head to Lounge 201 (201 Massachusetts Avenue NE) Sunday for a Mad Men Season Five Finale Watch Party, complete with 60s costume contest, Mad Men trivia, and retro food and drink. 8:00-11:00 p.m. \$10 general admission, \$20 admission and two hour open bar.

', - icon: 'theatre', - ), - geometry: Geometry( - type: 'Point', - coordinates: [-77.003168, 38.894651], - ), - ), - Feature( - type: 'Feature', - properties: Properties( - description: - 'Big Backyard Beach Bash and Wine Fest

EatBar (2761 Washington Boulevard Arlington VA) is throwing a Big Backyard Beach Bash and Wine Fest on Saturday, serving up conch fritters, fish tacos and crab sliders, and Red Apron hot dogs. 12:00-3:00 p.m. \$25.grill hot dogs.

', - icon: 'bar', - ), - geometry: Geometry( - type: 'Point', - coordinates: [-77.090372, 38.881189], - ), - ), - Feature( - type: 'Feature', - properties: Properties( - description: - 'Ballston Arts & Crafts Market

The Ballston Arts & Crafts Market sets up shop next to the Ballston metro this Saturday for the first of five dates this summer. Nearly 35 artists and crafters will be on hand selling their wares. 10:00-4:00 p.m.

', - icon: 'art-gallery', - ), - geometry: Geometry( - type: 'Point', - coordinates: [-77.111561, 38.882342], - ), - ), - Feature( - type: 'Feature', - properties: Properties( - description: - 'Seersucker Bike Ride and Social

Feeling dandy? Get fancy, grab your bike, and take part in this year\'s Seersucker Social bike ride from Dandies and Quaintrelles. After the ride enjoy a lawn party at Hillwood with jazz, cocktails, paper hat-making, and more. 11:00-7:00 p.m.

', - icon: 'bicycle', - ), - geometry: Geometry( - type: 'Point', - coordinates: [-77.052477, 38.943951], - ), - ), - Feature( - type: 'Feature', - properties: Properties( - description: - 'Capital Pride Parade

The annual Capital Pride Parade makes its way through Dupont this Saturday. 4:30 p.m. Free.

', - icon: 'rocket', - ), - geometry: Geometry( - type: 'Point', - coordinates: [-77.043444, 38.909664], - ), - ), - Feature( - type: 'Feature', - properties: Properties( - description: - 'Muhsinah

Jazz-influenced hip hop artist Muhsinah plays the Black Cat (1811 14th Street NW) tonight with Exit Clov and Gods’illa. 9:00 p.m. \$12.

', - icon: 'music', - ), - geometry: Geometry( - type: 'Point', - coordinates: [-77.031706, 38.914581], - ), - ), - Feature( - type: 'Feature', - properties: Properties( - description: - 'A Little Night Music

The Arlington Players\' production of Stephen Sondheim\'s A Little Night Music comes to the Kogod Cradle at The Mead Center for American Theater (1101 6th Street SW) this weekend and next. 8:00 p.m.

', - icon: 'music', - ), - geometry: Geometry( - type: 'Point', - coordinates: [-77.020945, 38.878241], - ), - ), - Feature( - type: 'Feature', - properties: Properties( - description: - 'Truckeroo

Truckeroo brings dozens of food trucks, live music, and games to half and M Street SE (across from Navy Yard Metro Station) today from 11:00 a.m. to 11:00 p.m.

', - icon: 'music', - ), - geometry: Geometry( - type: 'Point', - coordinates: [-77.007481, 38.876516], - ), - ) - ]), + data: FeatureCollection( + features: [ + Feature( + properties: Properties( + description: + 'Make it Mount Pleasant

Make it Mount Pleasant is a handmade and vintage market and afternoon of live entertainment and kids activities. 12:00-6:00 p.m.

', + icon: 'theatre', + ), + geometry: Geometry( + type: 'Point', + coordinates: [-77.038659, 38.931567], + ), + ), + Feature( + properties: Properties( + description: + 'Mad Men Season Five Finale Watch Party

Head to Lounge 201 (201 Massachusetts Avenue NE) Sunday for a Mad Men Season Five Finale Watch Party, complete with 60s costume contest, Mad Men trivia, and retro food and drink. 8:00-11:00 p.m. \$10 general admission, \$20 admission and two hour open bar.

', + icon: 'theatre', + ), + geometry: Geometry( + type: 'Point', + coordinates: [-77.003168, 38.894651], + ), + ), + Feature( + properties: Properties( + description: + 'Big Backyard Beach Bash and Wine Fest

EatBar (2761 Washington Boulevard Arlington VA) is throwing a Big Backyard Beach Bash and Wine Fest on Saturday, serving up conch fritters, fish tacos and crab sliders, and Red Apron hot dogs. 12:00-3:00 p.m. \$25.grill hot dogs.

', + icon: 'bar', + ), + geometry: Geometry( + type: 'Point', + coordinates: [-77.090372, 38.881189], + ), + ), + Feature( + properties: Properties( + description: + 'Ballston Arts & Crafts Market

The Ballston Arts & Crafts Market sets up shop next to the Ballston metro this Saturday for the first of five dates this summer. Nearly 35 artists and crafters will be on hand selling their wares. 10:00-4:00 p.m.

', + icon: 'art-gallery', + ), + geometry: Geometry( + type: 'Point', + coordinates: [-77.111561, 38.882342], + ), + ), + Feature( + properties: Properties( + description: + 'Seersucker Bike Ride and Social

Feeling dandy? Get fancy, grab your bike, and take part in this year\'s Seersucker Social bike ride from Dandies and Quaintrelles. After the ride enjoy a lawn party at Hillwood with jazz, cocktails, paper hat-making, and more. 11:00-7:00 p.m.

', + icon: 'bicycle', + ), + geometry: Geometry( + type: 'Point', + coordinates: [-77.052477, 38.943951], + ), + ), + Feature( + properties: Properties( + description: + 'Capital Pride Parade

The annual Capital Pride Parade makes its way through Dupont this Saturday. 4:30 p.m. Free.

', + icon: 'rocket', + ), + geometry: Geometry( + type: 'Point', + coordinates: [-77.043444, 38.909664], + ), + ), + Feature( + properties: Properties( + description: + 'Muhsinah

Jazz-influenced hip hop artist Muhsinah plays the Black Cat (1811 14th Street NW) tonight with Exit Clov and Gods’illa. 9:00 p.m. \$12.

', + icon: 'music', + ), + geometry: Geometry( + type: 'Point', + coordinates: [-77.031706, 38.914581], + ), + ), + Feature( + properties: Properties( + description: + 'A Little Night Music

The Arlington Players\' production of Stephen Sondheim\'s A Little Night Music comes to the Kogod Cradle at The Mead Center for American Theater (1101 6th Street SW) this weekend and next. 8:00 p.m.

', + icon: 'music', + ), + geometry: Geometry( + type: 'Point', + coordinates: [-77.020945, 38.878241], + ), + ), + Feature( + properties: Properties( + description: + 'Truckeroo

Truckeroo brings dozens of food trucks, live music, and games to half and M Street SE (across from Navy Yard Metro Station) today from 11:00 a.m. to 11:00 p.m.

', + icon: 'music', + ), + geometry: Geometry( + type: 'Point', + coordinates: [-77.007481, 38.876516], + ), + ) + ], + ), ), layout: Layout( iconImage: '{icon}-15', iconAllowOverlap: true, ), ); - map.addLayer(layer); + map.addLayer(layer.toJs()); // Create a popup, but don't add it to the map yet. var popup = Popup( @@ -145,8 +140,7 @@ void main() { closeOnClick: false, ), ); - - map.on('mouseenter', 'places', (e) { + map.on('mouseenter', 'places', allowInterop((e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; @@ -166,11 +160,11 @@ void main() { .setLngLat(LngLat(coordinates[0], coordinates[1])) .setHTML(description) .addTo(map); - }); + })); - map.on('mouseleave', 'places', (_) { + map.on('mouseleave', 'places', allowInterop((_) { map.getCanvas().style.cursor = ''; popup.remove(); - }); - }); + })); + })); } diff --git a/lib/mapbox_gl_dart.dart b/lib/mapbox_gl_dart.dart index 9de67c7..7e134bd 100644 --- a/lib/mapbox_gl_dart.dart +++ b/lib/mapbox_gl_dart.dart @@ -6,6 +6,7 @@ library mapboxgl; export 'src/geo/lng_lat.dart'; export 'src/geo/lng_lat_bounds.dart'; export 'src/index.dart'; +export 'src/interop/geojson_interop.dart'; export 'src/style/evaluation_parameters.dart'; export 'src/style/layers/circle_layer.dart'; export 'src/style/layers/layout.dart'; diff --git a/lib/src/interop/geojson_interop.dart b/lib/src/interop/geojson_interop.dart new file mode 100644 index 0000000..bf163b6 --- /dev/null +++ b/lib/src/interop/geojson_interop.dart @@ -0,0 +1,36 @@ +@JS('mapboxgl') +library mapboxgl.interop.geojson_interop; + +import 'package:js/js.dart'; + +@JS() +@anonymous +class FeatureJsImpl { + String type; + GeometryJsImpl geometry; + PropertiesJsImpl properties; + String source; + external factory FeatureJsImpl({String source}); +} + +@JS() +@anonymous +class GeometryJsImpl { + String type; + List coordinates; + external factory GeometryJsImpl({ + String type, + List coordinates, + }); +} + +@JS() +@anonymous +class PropertiesJsImpl { + String description; + String icon; + external factory PropertiesJsImpl({ + String description, + String icon, + }); +} diff --git a/lib/src/style/layers/circle_layer.dart b/lib/src/style/layers/circle_layer.dart index c989ba9..8427ed6 100644 --- a/lib/src/style/layers/circle_layer.dart +++ b/lib/src/style/layers/circle_layer.dart @@ -1,46 +1,48 @@ -@JS('mapboxgl') library mapboxgl.style.layers.circle_layer; -import 'package:js/js.dart'; +import 'package:js/js_util.dart'; import 'package:mapbox_gl_dart/mapbox_gl_dart.dart'; class CircleLayer { - @JS('type') - external set _type(String t); - @JS('id') - external set _id(String t); - @JS('source') - external set _source(Source t); - @JS('paint') - external set _paint(dynamic t); - @JS('source-layer') - external set _sourceLayer(dynamic t); + String type; + String id; + Source source; + dynamic paint; + dynamic sourceLayer; CircleLayer({ - String id, - Source source, - dynamic paint, - String sourceLayer, + this.id, + this.source, + this.paint, + this.sourceLayer, }) { - this._type = 'circle'; - this._id = id; - this._source = source; - this._paint = paint; - this._sourceLayer = sourceLayer; + type = 'circle'; + } + + dynamic toJs() { + return jsify({ + 'id': id, + 'type': type, + 'source': source.toDict(), + 'source-layer': sourceLayer, + 'paint': paint.toDict(), + }); } } class CirclePaint { - @JS('circle-radius') - external set _circleRadius(dynamic t); - @JS('circle-color') - external set _circleColor(dynamic t); + dynamic circleRadius; + dynamic circleColor; CirclePaint({ - dynamic circleRadius, - dynamic circleColor, - }) { - this._circleRadius = circleRadius; - this._circleColor = circleColor; + this.circleRadius, + this.circleColor, + }); + + dynamic toDict() { + return { + 'circle-radius': this.circleRadius, + 'circle-color': this.circleColor, + }; } } diff --git a/lib/src/style/layers/layout.dart b/lib/src/style/layers/layout.dart index 145f6dd..ae09b4d 100644 --- a/lib/src/style/layers/layout.dart +++ b/lib/src/style/layers/layout.dart @@ -1,20 +1,18 @@ -@JS('mapboxgl') library mapboxgl.style.layers.layout; -import 'package:js/js.dart'; - class Layout { - @JS('icon-image') - external set iconImage(String text); - - @JS('icon-allow-overlap') - external set iconAllowOverlap(bool text); + String iconImage; + bool iconAllowOverlap; Layout({ - String iconImage, - bool iconAllowOverlap, - }) { - this.iconImage = iconImage; - this.iconAllowOverlap = iconAllowOverlap; + this.iconImage, + this.iconAllowOverlap, + }); + + dynamic toDict() { + return { + 'icon-image': iconImage, + 'icon-allow-overlap': iconAllowOverlap, + }; } } diff --git a/lib/src/style/layers/symbol_layer.dart b/lib/src/style/layers/symbol_layer.dart index baca7bd..88cff87 100644 --- a/lib/src/style/layers/symbol_layer.dart +++ b/lib/src/style/layers/symbol_layer.dart @@ -1,27 +1,32 @@ -@JS('mapboxgl') library mapboxgl.style.layers.symbol_layer; -import 'package:js/js.dart'; +import 'package:js/js_util.dart'; import 'package:mapbox_gl_dart/mapbox_gl_dart.dart'; class SymbolLayer { - @JS('type') - external set _type(String t); - @JS('id') - external set _id(String t); - @JS('source') - external set _source(GeoJsonSource t); - @JS('layout') - external set _layout(Layout t); + String type; + String id; + GeoJsonSource source; + Layout layout; SymbolLayer({ - String id, - GeoJsonSource source, - Layout layout, + this.id, + this.source, + this.layout, }) { - this._type = 'symbol'; - this._id = id; - this._source = source; - this._layout = layout; + this.type = 'symbol'; + } + + dynamic toDict() { + return { + 'id': id, + 'type': type, + 'source': source.toDict(), + 'layout': layout.toDict(), + }; + } + + dynamic toJs() { + return jsify(toDict()); } } diff --git a/lib/src/style/sources/geojson_source.dart b/lib/src/style/sources/geojson_source.dart index ddcfc7c..bddcd96 100644 --- a/lib/src/style/sources/geojson_source.dart +++ b/lib/src/style/sources/geojson_source.dart @@ -1,51 +1,96 @@ -@JS('mapboxgl') library mapboxgl.style.sources.geojson_source; -import 'package:js/js.dart'; +import 'package:js/js_util.dart'; import 'package:mapbox_gl_dart/mapbox_gl_dart.dart'; -@JS() -@anonymous class GeoJsonSource implements Source { - external factory GeoJsonSource({ - String type, - FeatureCollection data, - }); + String type; + FeatureCollection data; + + GeoJsonSource({ + this.data, + }) { + this.type = 'geojson'; + } + + @override + toDict() { + return { + 'type': type, + 'data': data.toDict(), + }; + } + + @override + toJs() { + return jsify(toDict()); + } } -@JS() -@anonymous class FeatureCollection { - external factory FeatureCollection({ - String type, - List features, - }); + String type; + List features; + FeatureCollection({ + this.features, + }) { + this.type = 'FeatureCollection'; + } + + dynamic toDict() { + return { + 'type': type, + 'features': features.map((f) => f.toDict()).toList(), + }; + } } -@JS() -@anonymous class Feature { - external factory Feature({ - String type, - Properties properties, - Geometry geometry, - }); + String type; + Properties properties; + Geometry geometry; + String source; + Feature({ + this.properties, + this.geometry, + }) { + this.type = 'Feature'; + } + + dynamic toDict() { + return { + 'type': type, + 'properties': properties.toDict(), + 'geometry': geometry.toDict(), + }; + } } -@JS() -@anonymous class Geometry { - external factory Geometry({ - String type, - List coordinates, + String type; + List coordinates; + Geometry({ + this.type, + this.coordinates, }); + dynamic toDict() { + return { + 'type': type, + 'coordinates': coordinates, + }; + } } -@JS() -@anonymous class Properties { - external factory Properties({ - String description, - String icon, + String description; + String icon; + Properties({ + this.icon, + this.description, }); + dynamic toDict() { + return { + 'icon': icon, + 'description': description, + }; + } } diff --git a/lib/src/style/sources/source.dart b/lib/src/style/sources/source.dart index c5e9ad5..1fd7a53 100644 --- a/lib/src/style/sources/source.dart +++ b/lib/src/style/sources/source.dart @@ -1,6 +1,6 @@ -@JS('mapboxgl') library mapboxgl.style.sources.source; -import 'package:js/js.dart'; - -abstract class Source {} +abstract class Source { + Map toDict(); + dynamic toJs(); +} diff --git a/lib/src/style/sources/vector_source.dart b/lib/src/style/sources/vector_source.dart index b4d0af4..1284918 100644 --- a/lib/src/style/sources/vector_source.dart +++ b/lib/src/style/sources/vector_source.dart @@ -1,20 +1,28 @@ -@JS('mapboxgl') library mapboxgl.style.sources.vector_source; -import 'package:js/js.dart'; +import 'package:js/js_util.dart'; import 'package:mapbox_gl_dart/mapbox_gl_dart.dart'; class VectorSource implements Source { - @JS('type') - external set _type(String t); - - @JS('url') - external set _url(String t); + String type; + String url; VectorSource({ - String url, + this.url, }) { - _type = 'vector'; - _url = url; + this.type = 'vector'; + } + + @override + toDict() { + return { + 'type': type, + 'url': url, + }; + } + + @override + toJs() { + return jsify(toDict()); } } diff --git a/lib/src/util/evented.dart b/lib/src/util/evented.dart index 0dfb5d0..c43eb1f 100644 --- a/lib/src/util/evented.dart +++ b/lib/src/util/evented.dart @@ -4,14 +4,17 @@ library mapboxgl.util.evented; import 'package:js/js.dart'; import 'package:mapbox_gl_dart/mapbox_gl_dart.dart'; -typedef Listener = dynamic Function(dynamic object); +typedef Listener = dynamic Function(Event object); @JS() @anonymous class Event { String type; + LngLat lngLat; + List features; - external factory Event({String type, dynamic data}); + external factory Event( + {String type, LngLat lngLat, List features}); } @JS()