syncfusion_flutter_maps 18.2.44-beta

Syncfusion Flutter Maps is a data visualization library written natively in Dart for creating beautiful and customizable maps from GeoJSON data.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:syncfusion_flutter_maps/maps.dart';
import 'package:syncfusion_flutter_core/core.dart';

void main() {
  // Register your license here
  SyncfusionLicense.registerLicense('ADD YOUR LICENSE KEY HERE');
  return runApp(MapsApp());
}

class MapsApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Maps Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  _MyHomePageState();

  List<Model> data;

  @override
  void initState() {
    data = const <Model>[
      Model('Asia', 'Asia', Color.fromRGBO(60, 120, 255, 1)),
      Model('Africa', 'Africa', Color.fromRGBO(51, 102, 255, 1)),
      Model('Europe', 'EUR', Color.fromRGBO(0, 57, 230, 1)),
      Model('South America', 'SA', Color.fromRGBO(0, 51, 204, 1)),
      Model('Australia', 'Australia', Color.fromRGBO(0, 45, 179, 1)),
      Model('North America', 'NA', Color.fromRGBO(0, 38, 153, 1))
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
          child: Container(
        height: 400,
        child: Padding(
          padding: const EdgeInsets.only(left: 15, right: 15),
          child: SfMaps(
            title: const MapTitle(text: 'World map'),
            layers: <MapLayer>[
              MapShapeLayer(
                delegate: MapShapeLayerDelegate(
                  shapeFile: 'assets/world_map.json',
                  shapeDataField: 'continent',
                  dataCount: data.length,
                  primaryValueMapper: (int index) => data[index].country,
                  dataLabelMapper: (int index) => data[index].code,
                  shapeColorValueMapper: (int index) => data[index].color,
                  shapeTooltipTextMapper: (int index) => data[index].country,
                ),
                enableShapeTooltip: true,
                showDataLabels: true,
                showLegend: true,
                tooltipSettings: const MapTooltipSettings(
                    color: Color.fromRGBO(60, 120, 255, 1),
                    strokeColor: Colors.white),
              ),
            ],
          ),
        ),
      )),
    );
  }
}

class Model {
  const Model(this.country, this.code, this.color);

  final String country;
  final String code;
  final Color color;
}