!! May be unstable and have bad performance !! Custom Flutter Widgets on top of a Mapbox Map (package mapbox_gl). Exposes builders to reactively build widgets based on screen position, zoom, bearing, and tilt.
mapbox_widget_layer.mov
Heavily inspired by the example here: flutter-mapbox-gl/maps > custom markers
- Install mapbox_gl
- Create a new widget with a
Stack
widget that contains aMapboxMap
and theMapboxWidgetLayer
There are three options for widget rendering:
-
MapboxItemBuilder
– exposes all attributes to manually control rendering of the widget:screenPosition
zoom
,bearing
, andtilt
in abuilder
-closure to reactively build widgets according to the exposed attributes. Example usage:MapboxItemBuilder( builder: (context, screenPosition) { debugPrint('${screenPosition.screenPosition}'); debugPrint('${screenPosition.zoom}'); debugPrint('${screenPosition.bearing}'); debugPrint('${screenPosition.tilt}'); return Container( height: 100, width: 100, color: Colors.blue[200], child: const Center(child: Text('builder')), ); }, size: const Size(100, 100), coordinate: const LatLng(49.457647152564334, 11.076190602176172), ),
-
MapboxItem
– does not expose options to customize rendering. Example usage:MapboxItem( child: Container( height: 100, width: 100, color: Colors.red[200], child: const Center(child: Text('item')), ), size: const Size(100, 100), coordinate: const LatLng(49.45800162760231, 11.076150534247994), ),
-
MapboxAutoTransformItem
– auto-adjusts rendering, based on thezoom
,bearing
, andtilt
. Allows for manual control of thezoomBase
(zoom level at which the scale of the widget should match thesize
in pixels), andzoomExpFactor
, which is the exponential base for the interpolation between zoom levels. Example usage:MapboxAutoTransformItem( child: Container( height: 100, width: 100, color: Colors.green[200], child: const Center(child: Text('auto')), ), size: const Size(100, 100), coordinate: const LatLng(49.45750295375467, 11.076125061775054), ),