"setStyleLayerProperty" doesn't work on Android

[mabilinab]

Hi, It seems that in many situations, the setStyleLayerProperty doesn't work and return the following error:

PlatformException (PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.mapbox_maps_flutter.StyleManager.setStyleLayerProperty"., null, null))

This happens especially on Android.

Here's a code to reproduce:

import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';


void main() async {
    // Load the .env file before running the app
  await dotenv.load();

  //Setting the public access token to the mapbox SDK
  String ACCESS_TOKEN = dotenv.env['MAPBOX_SDK_KEY'] ?? '';
  MapboxOptions.setAccessToken(ACCESS_TOKEN);
  runApp( MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mapbox Route Overview',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RouteOverviewMap(),
    );
  }
}



// functions that create the different maps
class RouteOverviewMap extends StatefulWidget {
  @override
  _RouteOverviewMapState createState() => _RouteOverviewMapState();
}

class _RouteOverviewMapState extends State<RouteOverviewMap> {
  late MapboxMap _mapboxMap;

  // Map creation function
  void _onMapCreated(MapboxMap mapboxMap) async {
    _mapboxMap = mapboxMap;

    print("//// Triggering showPolylineGeoJson");
    await _showPolylineGeoJson(
        mapboxMap,
        _geoJsonValue,
        "route-source",
        "route-layer",
        const Color.fromARGB(248, 108, 108, 108).value);

    final String lineWidthExpression = '''
        ["interpolate", ["exponential", 1.5], ["zoom"],
        10.0, ["*", 2.0, 1.0],
        13.0, ["*", 4.0, 1.0],
        16.0, ["*", 9.0, 1.0],
        19.0, ["*", 19.0, 1.0],
        20.0, ["*", 25.0, 1.0],
        ]
        '''
        .trim()
        .replaceAll("\n", "");

    print("//// Now adding styleLayer");

    await mapboxMap.style.setStyleLayerProperty(
        "route-layer", "line-width", lineWidthExpression);
    
  }

  @override
  Widget build(BuildContext context) {
    //First retrieving up-to date route data
    
    //final originPoint = convertPositionToMapboxPoint(_routeParkingData!.target);
    final center = Point(coordinates: Position(2.314066, 48.884049));
    
    return MapWidget(
      onMapCreated: _onMapCreated,
      cameraOptions: CameraOptions(center: center, zoom: 14.0),
    );
  }
}

String _geoJsonValue =
    '''{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.314066,48.884049],[2.314019,48.884085],[2.313144,48.88476],[2.313295,48.88484],[2.313462,48.884928],[2.3139,48.884601]]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.3139,48.884601],[2.314338,48.884273],[2.314389,48.884235],[2.314258,48.884159],[2.314066,48.884049],[2.313723,48.883843],[2.313647,48.883806],[2.313544,48.883745],[2.313131,48.883501],[2.313045,48.883451],[2.312806,48.88331],[2.312739,48.88327],[2.312642,48.883341],[2.312352,48.883554]]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.312352,48.883554],[2.312061,48.883767],[2.311994,48.883817],[2.311655,48.884141]]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.311655,48.884141],[2.311316,48.884464],[2.310939,48.884822],[2.310755,48.884974],[2.310703,48.885019],[2.310802,48.885076],[2.310889,48.885126],[2.310951,48.885169],[2.3118,48.885757]]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.3118,48.885757],[2.312648,48.886344],[2.313026,48.886601],[2.313083,48.886639],[2.312981,48.886678],[2.312692,48.886868],[2.312627,48.886925],[2.312746,48.886962],[2.313067,48.887062],[2.313344,48.887148],[2.31363,48.887244],[2.313761,48.887275],[2.313887,48.887196],[2.313796,48.887124],[2.313808,48.887073],[2.313812,48.887048],[2.313954,48.886383],[2.313964,48.886339],[2.314014,48.886103],[2.314027,48.886043],[2.314046,48.885995],[2.314325,48.885443],[2.314549,48.88499]]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.314549,48.88499],[2.314774,48.884537],[2.314801,48.884489],[2.314757,48.88446],[2.314572,48.884345],[2.314614,48.884305],[2.31514,48.883816]]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.31514,48.883816],[2.315665,48.883327],[2.315699,48.883295],[2.316643,48.883712],[2.316699,48.883737],[2.316658,48.883775],[2.316156,48.88425],[2.316073,48.884328],[2.315535,48.884836],[2.315485,48.884888],[2.315434,48.884936],[2.31481,48.885519]]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.31481,48.885519],[2.314187,48.886101],[2.314163,48.886114],[2.314138,48.886119],[2.314089,48.886116],[2.314014,48.886103],[2.31389,48.886145],[2.313733,48.886258],[2.313662,48.886302],[2.313173,48.886607],[2.313083,48.886639],[2.312981,48.886678],[2.312692,48.886868],[2.312627,48.886925],[2.312746,48.886962],[2.313067,48.887062],[2.313344,48.887148],[2.31363,48.887244],[2.313761,48.887275],[2.313887,48.887196],[2.313967,48.887176],[2.314006,48.88714],[2.315087,48.886252]]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.315087,48.886252],[2.316168,48.885363],[2.316219,48.885322],[2.31626,48.885272],[2.316644,48.884894]]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.316644,48.884894],[2.316655,48.884883],[2.317029,48.884516],[2.317202,48.884331],[2.317331,48.88421],[2.317837,48.883737],[2.317893,48.88376],[2.318393,48.883972],[2.318506,48.88402],[2.318456,48.884066],[2.318384,48.884137],[2.317859,48.884651],[2.31713,48.885358],[2.316866,48.885615],[2.316816,48.885664],[2.316732,48.885615],[2.316283,48.885355],[2.316219,48.885322],[2.316132,48.885266],[2.315836,48.885093]]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.315836,48.885093],[2.315539,48.88492],[2.315485,48.884888],[2.315422,48.884853],[2.314801,48.884489],[2.314757,48.88446],[2.314572,48.884345],[2.314488,48.884295],[2.314389,48.884235],[2.314258,48.884159],[2.314228,48.884142]]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.314228,48.884142],[2.314066,48.884049],[2.313723,48.883843],[2.313647,48.883806],[2.313544,48.883745],[2.313131,48.883501],[2.313045,48.883451],[2.312806,48.88331],[2.312739,48.88327],[2.312642,48.883341],[2.312061,48.883767],[2.311994,48.883817],[2.312076,48.883872],[2.312215,48.88396],[2.311812,48.884238]]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.311812,48.884238],[2.311409,48.884516],[2.310939,48.884822],[2.310755,48.884974],[2.310703,48.885019],[2.310802,48.885076],[2.310889,48.885126],[2.310953,48.885093],[2.312163,48.884518]]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.312163,48.884518],[2.313373,48.883943],[2.313508,48.883878],[2.313569,48.883844],[2.313647,48.883806],[2.313544,48.883745],[2.313131,48.883501],[2.313045,48.883451],[2.312806,48.88331],[2.312739,48.88327],[2.312625,48.883175],[2.3126,48.883153],[2.312449,48.883014],[2.312252,48.882826]]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.312252,48.882826],[2.311883,48.882474],[2.311834,48.882428],[2.311733,48.882474],[2.311171,48.882728]]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.311171,48.882728],[2.310609,48.882981],[2.310415,48.883069],[2.309743,48.883376],[2.309697,48.883385],[2.309663,48.883388],[2.309624,48.883388],[2.309582,48.883383],[2.309557,48.883378],[2.309523,48.883369],[2.309496,48.883355],[2.309611,48.88326],[2.310052,48.882898],[2.310384,48.882627],[2.310887,48.882517],[2.311566,48.882367],[2.311612,48.882358],[2.311736,48.882332],[2.311871,48.882303],[2.311904,48.882297],[2.312495,48.882171]]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.312495,48.882171],[2.313122,48.882038],[2.313544,48.881948],[2.31369,48.882033],[2.314024,48.882226],[2.314104,48.882273],[2.314049,48.882314],[2.313452,48.88275]]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.313452,48.88275],[2.312855,48.883186],[2.312739,48.88327],[2.312642,48.883341],[2.312061,48.883767],[2.311994,48.883817],[2.312076,48.883872],[2.312215,48.88396],[2.312301,48.883908],[2.31264,48.8837]]}},{"type":"Feature","geometry":{"type":"LineString","coordinates":[[2.31264,48.8837],[2.31298,48.883491],[2.313045,48.883451],[2.312806,48.88331],[2.312739,48.88327],[2.312507,48.88325],[2.311522,48.883165]]}}]}''';


//Function to put a polyline on a mapbox map
Future<void> _showPolylineGeoJson(
    MapboxMap mapboxMap,
    String data,
    String sourceId,
    String layerId,
    int color) async {
  try {
    //Creating the source
    await mapboxMap.style.addSource(GeoJsonSource(id: sourceId, data: data));
    //Adding the layer using the source
    await mapboxMap.style.styleSourceExists(sourceId).then((value) async {
      print("//// styleSourceExists returned value $value");
      await mapboxMap.style.addLayer(LineLayer(
        id: layerId,
        sourceId: sourceId,
        lineColor: color,
        lineBorderColor: color,
        lineWidth: 5.0,
      ));
    });
  } catch (e) {
    print('///// Error adding polyline: $e');
    // You could also show an error message to the user here
  }
}