Skip to content

Circle Style Layer

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

Circle Style Layer

Basic Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
late final MapController _controller;

@override
Widget build(BuildContext context) {
  return MapLibreMap(
      options: MapOptions(center: Geographic(lon: 9.17, lat: 47.68)),
      onMapCreated: (controller) => _controller = controller,
      onStyleLoaded: (style) async {
        // add the source
        const earthquakes = GeoJsonSource(
          id: _sourceId,
          data:
          'https://maplibre.org/maplibre-gl-js/docs/assets/earthquakes.geojson',
        );
        await style.addSource(earthquakes);

        // add the source with a layer on the map
        const layer = CircleStyleLayer(id: _layerId, sourceId: _sourceId);
        await style.addLayer(layer);
      }
  );
}

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.