Syncfusion offers various tools for data visualization, including a wide range of chart libraries and other visualization components. You can use these tools to visualize virtually any type of data, including maps. For more information, refer to the Syncfusion documentation :https://help.syncfusion.com/flutter/maps/overview
Below is the demonstration of using maps
Long story short just putting it out here for anyone who could benefit from this and save their precious time. :)
Disclaimer:
Please note that using this project requires compliance with Syncfusion's licensing terms. You must obtain either a Community License or a commercial license. For details, refer to Syncfusion’s license agreement.
you can watch the tutorial here: https://youtu.be/1n-_ApOKKuY
link to the geojson file used in the code:https://gist.githubusercontent.com/AKSH-NY/7909581ca1a46f5f5b05fec0f3cbb602/raw/815f2c4abfdd7f5b79b78aa6e1fe0792505075be/world_map.json
Feel free to add more geojson files in the replies, it could be of help to the community.
Here is the code. Customize as you need.
// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/structs/index.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
import 'package:syncfusion_flutter_maps/maps.dart';
import 'package:syncfusion_flutter_core/theme.dart';
class MapcustomChart extends StatefulWidget {
const MapcustomChart({
super.key,
this.width,
this.height,
required this.inputData,
});
final double? width;
final double? height;
final List<SampleMapDataStruct> inputData;
@override
State<MapcustomChart> createState() => _MapcustomChartState();
}
class _MapcustomChartState extends State<MapcustomChart> {
late MapShapeSource _shapeSource;
late List<MapColorMapper> _colorMappers;
@override
void initState() {
_colorMappers = widget.inputData.map((item) {
return MapColorMapper(
value: item.valueRep.toString(),
color: Colors.blueGrey.shade900,
text: item.countryname,
);
}).toList();
_shapeSource = MapShapeSource.network(
'https://gist.githubusercontent.com/AKSH-NY/7909581ca1a46f5f5b05fec0f3cbb602/raw/815f2c4abfdd7f5b79b78aa6e1fe0792505075be/world_map.json',
shapeDataField: 'name',
dataCount: widget.inputData.length,
primaryValueMapper: (int index) => widget.inputData[index].countryname,
dataLabelMapper: (int index) =>
widget.inputData[index].valueRep.toString(),
shapeColorValueMapper: (int index) =>
widget.inputData[index].valueRep.toString(),
shapeColorMappers: _colorMappers,
);
super.initState();
}
@override
Widget build(BuildContext context) {
return Container(
width: widget.width,
height: widget.height,
color: Colors.black87,
child: Column(
children: [
Text(
'Map Presentation Demo',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.normal,
color: Colors.grey.shade50,
),
),
Expanded(
child: SfMapsTheme(
data: SfMapsThemeData(
layerStrokeColor: Colors.limeAccent,
layerStrokeWidth: 1,
layerColor: Colors.grey.shade900,
shapeHoverColor: Colors.indigo.shade900,
shapeHoverStrokeColor: Colors.limeAccent,
shapeHoverStrokeWidth: 2,
),
child: SfMaps(
layers: [
MapShapeLayer(
source: _shapeSource,
showDataLabels: true,
dataLabelSettings: MapDataLabelSettings(
textStyle: TextStyle(
fontSize: 10,
color: Colors.white,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
fontFamily: 'Roboto',
),
),
zoomPanBehavior: MapZoomPanBehavior(
enablePanning: true,
enablePinching: true,
minZoomLevel: 3,
maxZoomLevel: 15,
zoomLevel: 5,
focalLatLng: MapLatLng(27.1751, 78.0421),
toolbarSettings: MapToolbarSettings(
position: MapToolbarPosition.bottomRight,
),
),
tooltipSettings: MapTooltipSettings(
color: Colors.grey.shade900,
strokeColor: Colors.limeAccent,
strokeWidth: 1,
),
shapeTooltipBuilder: (BuildContext context, int index) {
return Container(
width: 150,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.grey.shade900,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Colors.grey.shade900,
width: 1,
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
widget.inputData[index].countryname,
style: TextStyle(
color: Colors.white,
fontSize: 10,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
fontFamily: 'Roboto',
),
),
const Icon(
Icons.place,
color: Colors.white,
size: 16,
),
],
),
const Divider(
color: Colors.white,
height: 10,
thickness: 1.2,
),
Text(
'Value : ' +
widget.inputData[index].valueRep
.toString(),
style: TextStyle(
color: Colors.white,
fontSize: 14,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
fontFamily: 'Roboto',
),
),
]));
}),
],
),
),
),
],
),
);
}
}