Symbol Style Layer

late final MapController _controller;

@override
Widget build(BuildContext context) {
  return MapLibreMap(
      options: MapOptions(initCamera: .position(center: Geographic(lon: 9.17, lat: 47.68), zoom: 7)),
      onMapCreated: (controller) => _controller = controller,
      onStyleLoaded: (style) async {
        // load the image data
        final response = await http.get(Uri.parse(StyleLayersSymbolPage.imageUrl));
        final bytes = response.bodyBytes;

        // add the image to the map
        await style.addImage('marker', bytes);

        // add some points as GeoJSON source to the map
        await style.sources.add(
          const GeoJsonSource.data(
            id: 'points',
            data: _geoJsonString,
          ),
        );

        // display the image on the map
        await style.layers.add(
          SymbolStyleLayer(
            id: 'images',
            sourceId: 'points',
            iconImage: const .literal('marker'),
            iconSize: const .literal(0.08),
            iconAnchor: const .literal(IconAnchor.bottom),
          ),
        );
      }
  );
}