maplibre / flutter-maplibre-gl

Customizable, performant and vendor-free vector and raster maps, flutter wrapper for maplibre-native and maplibre-gl-js (fork of flutter-mapbox-gl/maps)
https://pub.dev/packages/maplibre_gl
Other
226 stars 125 forks source link

[BUG] linePattern on lineLayer not rendering #504

Open nijs9 opened 2 months ago

nijs9 commented 2 months ago

Platforms

android

Version of flutter maplibre_gl

0.20

Bug Description

I'm trying to apply a linePattern to a LineLayer because a lineDasharray doesn't seem to work.

On iOS, the linePattern is rendering OK. On Android I only see a white line without pattern. I can see this in the logs: [JNI]: Error setting property: line-pattern expected a literal expression

Steps to Reproduce

  1. Add a lineLayer
  2. Add a linePattern
  3. Run on Android

Expected Results

See the linePattern on the map.

Actual Results

linePattern not rendering on Android. On iOS no problem.

Code Sample

custom-tracks is a vector source:

Future<void> _addCustomTracksUnpavedLayer() async {
    await mapController.addLineLayer(
      'custom-tracks',
      'custom-tracks-unpaved',
      LineLayerProperties(
        lineColor: RPColors.colorUnpaved,
        lineWidth: const [
          Expressions.interpolate,
          ["linear"],
          [Expressions.zoom],
          10,
          1.2,
          15,
          1.8
        ],
        linePattern: 'unpaved-pattern',
      ),
      belowLayerId: isDarkMode ? darkModeBelowLayerId : lightModeBelowLayerId,
      sourceLayer: 'tracks_data_$flavor',
      minzoom: 7,
      filter: [
        'all',
        ['==', 'terrain', 'unpaved'],
        ['!=', 'onlylf', 1]
      ],
    );
  }

unpaved-pattern is added to the map in this way:

addImageFromAsset(
          'unpaved-pattern', 'assets/mapicons/unpaved-pattern.png')

Future<void> addImageFromAsset(String name, String assetName) async {
    final bytes = await rootBundle.load(assetName);
    final list = bytes.buffer.asUint8List();
    return mapController.addImage(name, list);
  }
mikefaust-jm commented 2 months ago

I just had the same problem. The fix was to put the asset name inside this expression:

linePattern: [Expressions.image, 'unpaved-pattern']
nijs9 commented 2 months ago

@mikefaust-jm Thank you for sharing! This fixed the issue.