pub pub2 pub3

Map Chart

  • Displays GeoJSON geometries
  • Multi resolution with geometry simplification
  • Highly customizable
  • Interactable
  • Pure Flutter (no WebView/JavaScript)

mapchart

Get started

A simplified GeoJSON will be used in the examples to demonstrate the different possibilities of themes. This GeoJSON has only 4 features with the following properties:

NameSeqRnd
"Einstein"1"73"
"Newton"2"92"
"Galileu"3"10"
"Darwin"4"52"
"Pasteur"5"77"
"Faraday"6"32"
"Arquimedes"7"87"
"Tesla"8"17"
"Lavoisier"9"49"
"Kepler"10"32"
"Turing"11"93"

To view the full content, use this link.

The following examples will assume that GeoJSON has already been loaded into a String.

Reading GeoJSON from String

No properties are loaded, only the geometries.

    MapChartDataSource dataSource =
        await MapChartDataSource.geoJSON(geojson: geojson);
Creating the Widget
    MapChart map = MapChart(dataSource: dataSource);

getstarted

Reading GeoJSON properties

The keys argument defines which properties must be loaded. The parseToNumber argument defines which properties will have numeric values in quotes parsed to numbers.

    MapChartDataSource dataSource = await MapChartDataSource.geoJSON(
        geojson: geojson, keys: ['Seq', 'Rnd'], parseToNumber: ['Rnd']);

Changing the default colors

    MapChart map = MapChart(
        dataSource: dataSource,
        theme: MapChartTheme(
            color: Colors.yellow,
            contourColor: Colors.red,
            hoverColor: Colors.orange));

defaultcolors

Color by property value

Sets a color for each property value in GeoJSON. If a color is not set, the default color is used.

Mapping the property key
    MapChartDataSource dataSource =
        await MapChartDataSource.geoJSON(geojson: geojson, keys: ['Seq']);
Setting the colors for the property values
    MapChartTheme theme =
        MapChartTheme.value(contourColor: Colors.white, key: 'Seq', colors: {
      2: Colors.green,
      4: Colors.red,
      6: Colors.orange,
      8: Colors.blue
    }, hoverColors: {
      2: Colors.green[900]!,
      4: Colors.red[900]!,
      6: Colors.orange[900]!,
      8: Colors.blue[900]!
    });

    MapChart map = MapChart(dataSource: dataSource, theme: theme);

colorbyvalue

Color by rule

The feature color is obtained from the first rule that returns a non-null color. If all rules return a null color, the default color is used.

Mapping the property key
    MapChartDataSource dataSource = await MapChartDataSource.geoJSON(
        geojson: geojson, keys: ['Name', 'Seq']);
Setting the rules
    MapChartTheme theme = MapChartTheme.rule(
        contourColor: Colors.white,
        hoverColor: Colors.grey[700]!,
        colorRules: [
          (feature) {
            String? value = feature.getValue('Name');
            return value == 'Faraday' ? Colors.red : null;
          },
          (feature) {
            double? value = feature.getDoubleValue('Seq');
            return value != null && value < 3 ? Colors.green : null;
          },
          (feature) {
            double? value = feature.getDoubleValue('Seq');
            return value != null && value > 9 ? Colors.blue : null;
          }
        ]);

    MapChart map = MapChart(dataSource: dataSource, theme: theme);

colorbyrule

Gradient

The gradient is created given the colors and limit values of the chosen property. The property must have numeric values.

Auto min/max values

Uses the min and max values read from data source.

    MapChartDataSource dataSource =
        await MapChartDataSource.geoJSON(geojson: geojson, keys: ['Seq']);
    MapChartTheme theme = MapChartTheme.gradient(
        dataSource: dataSource,
        contourColor: Colors.white,
        key: 'Seq',
        colors: [Colors.blue, Colors.yellow, Colors.red]);

    MapChart map = MapChart(dataSource: dataSource, theme: theme);

gradientauto

Setting min or max values manually

If the min value is set, all lower values will be displayed using the first gradient color. If the max value is set, all higher values will be displayed using the last gradient color.

    MapChartDataSource dataSource =
        await MapChartDataSource.geoJSON(geojson: geojson, keys: ['Seq']);
    MapChartTheme theme = MapChartTheme.gradient(
        contourColor: Colors.white,
        key: 'Seq',
        min: 3,
        max: 9,
        colors: [Colors.blue, Colors.yellow, Colors.red]);

    MapChart map = MapChart(dataSource: dataSource, theme: theme);

gradientminmax

Contour

Thickness

    MapChart map = MapChart(
        dataSource: dataSource, theme: MapChartTheme(contourThickness: 3));

contourthickness

Hover contour color

    MapChart map = MapChart(
        dataSource: dataSource,
        theme: MapChartTheme(hoverContourColor: Colors.red));

contourhovercolor

Hover

Listener

    MapChart map = MapChart(
        dataSource: dataSource,
        theme: MapChartTheme(hoverColor: Colors.grey[700]),
        hoverListener: (MapFeature? feature) {
          if (feature != null) {
            int id = feature.id;
            print('Hover - Feature id: $id');
          }
        });

Rule

Enabling hover by property value
    MapChartDataSource dataSource =
        await MapChartDataSource.geoJSON(geojson: geojson, keys: ['Seq']);
    // coloring only the 'Darwin' feature
    MapChartTheme theme = MapChartTheme.value(
        key: 'Seq', colors: {4: Colors.green}, hoverColor: Colors.green[900]!);

    // enabling hover only for the 'Darwin' feature
    MapChart map = MapChart(
      dataSource: dataSource,
      theme: theme,
      hoverRule: (feature) {
        return feature.getValue('Seq') == 4;
      },
    );

hoverbyvalue

Click listener

    MapChart map = MapChart(
        dataSource: dataSource,
        theme: MapChartTheme(hoverColor: Colors.grey[800]!),
        clickListener: (feature) {
          print(feature.id);
        });

Agenda for the next few days

  • More theming features.
  • Legend.
  • Release the final version (1.0.0). The API may have some small changes.

Libraries

mapchart