I wants to load multiple geo json data in flutter_map, i have tried to load multiple geo json data then my phone completely lag and freezed

Question

Here is a description of the issue I'm facing when trying to load multiple GeoJSON files into a flutter_map:

I have a Flutter application that displays an interactive map using the flutter_map package. This map needs to visualize geographic data from multiple GeoJSON files containing things like country borders, city locations, river shapes, etc.

My current approach is to load each GeoJSON file separately using the geojsonVm package and add the resulting polygons, lines, etc to layers in the flutter_map.

The problem is that when I try to load more than a few GeoJSON files in this way, the app performance suffers severely. As I add more layers from additional GeoJSON files, the frame rate drops drastically, interaction gets laggy, and ultimately the app freeze and become completely unresponsive.

I suspect this is because I'm not loading and rendering the geospatial data efficiently. Simply converting each GeoJSON individually and overlaying the layers causes too much overhead. There are likely 100s of thousands of geographic coordinates being processed from all the files.

Ideally, I need a way to:

• Efficiently load multiple GeoJSON files and combine the data
• Render the combined geographic shapes/lines polyline, points performantly in the flutter_map
• Allow interacting with the data layers smoothly without freezing

Potential solutions could be:

• Pre-processing the GeoJSON files into a combined format
• Using a tile rendering system
• Optimizing the layer rendering in flutter_map
• Streaming the data in chunks instead of all upfront

I'm looking for the right approach to handle large geospatial datasets in Flutter maps efficiently. Any guidance on best practices or examples would be appreciated! Let me know if any other details would help diagnose the performance issue.

i tried -

WidgetsBinding.instance.addPostFrameCallback((_) async {
  final serviceLineData = await rootBundle.loadString('assets/ServiceLine.json');
  final serviceLineGeoJson = json.decode(serviceLineData);

  // Create a GeoJSONVT index for Service Line GeoJSON data
  serviceLineGeoJsonIndex = await geoJSON.createIndex(
    null,
    geoJsonMap: serviceLineGeoJson,
    tileSize: 256, // Adjust as needed
  );

  setState(() {});
});

GeoJSONWidget( drawClusters: false, drawFeatures: true, index: serviceLineGeoJsonIndex, options: GeoJSONOptions( featuresHaveSameStyle: false, overallStyleFunc: (TileFeature feature) { var paint = Paint() ..style = PaintingStyle.stroke ..color = Colors.blue ..strokeWidth = 5 ..isAntiAlias = false; if (feature.type == 3) { // lineString ///paint.style = PaintingStyle.fill; } return paint; }, pointWidgetFunc: (TileFeature feature) { //return const Text("Point!", style: TextStyle(fontSize: 10)); return const Icon(Icons.airplanemode_on); }, pointStyle: (TileFeature feature) { return Paint(); }, pointFunc: (TileFeature feature, Canvas canvas) { if (CustomImages.imageLoaded) { canvas.drawImage(CustomImages.plane, const Offset(0.0, 0.0), Paint()); } },

                      ///clusterFunc: () { return Text("Cluster"); },
                      ///lineStringFunc: () { if(CustomImages.imageLoaded) return CustomImages.plane;}
                      lineStringStyle: (feature) {
                        return Paint()
                          ..style = PaintingStyle.stroke
                          ..color = Colors.red
                          ..strokeWidth = 2
                          ..isAntiAlias = true;
                      },
                      polygonFunc: null,
                      polygonStyle: (feature) {
                        var paint = Paint()
                          ..style = PaintingStyle.fill
                          ..color = Colors.red
                          ..strokeWidth = 5
                          ..isAntiAlias = true;

                        if (feature.tags != null &&
                            "${feature.tags['NAME']}_${feature.tags['COUNTY']}" == featureSelected) {
                          paint.strokeWidth = 15;
                          return paint;
                        }
                        paint.color = Colors.lightBlueAccent;
                        paint.isAntiAlias = false;
                        return paint;
                      }),
                ),
                GeoJSONWidget(
                  index: highlightedIndex,
                  drawFeatures: true,
                  options: GeoJSONOptions(polygonStyle: (feature) {
                    return Paint()
                      ..style = PaintingStyle.stroke
                      ..color = Colors.yellow
                      ..strokeWidth = 8
                      ..isAntiAlias = true;
                  }),
                ),
                GeoJSONWidget(
                  index: highlightedIndex,
                  drawFeatures: true,
                  options: GeoJSONOptions(polygonStyle: (feature) {
                    return Paint()
                      ..style = PaintingStyle.stroke
                      ..color = Colors.purple
                      ..strokeWidth = 5
                      ..isAntiAlias = true;
                  }),
                ),