Line Layer

The LineLayer is either used by the map style or can be added to the map programmatically to symbolize data on the map.

Basic Usage

late final MapController _controller;

@override
Widget build(BuildContext context) {
  return MapLibreMap(
      options: MapOptions(center: Position(9.17, 47.68)),
      onMapCreated: (controller) => _controller = controller,
      onStyleLoaded: () async {
        final geojsonLine = await rootBundle.loadString('assets/geojson/path.json');
        await _controller.addSource(
          GeoJsonSource(id: 'Path', data: geojsonLine),
        );
        await _controller.addLayer(
          const LineLayer(
            id: 'geojson-line',
            sourceId: 'Path',
            paint: {'line-color': '#F00', 'line-width': 3},
          ),
        );
      }
  );
}

Check out the example app to learn more.

Style & Layout

Use the paint property to change the style and the layout property to change the behavior on the map.

Read the Paint & Layout chapter to learn more on this topic.