View Geojson on flutter_map

Question

I want to display Geojson data on a map to draw polygons and points I used Flutter_map library: ^4.0.0

I tried converting from geojson to latlng and did not find a way The libraries that should help me are very old

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [longitude, latitude]
      },
      "properties": {
        "name": "point name",
        "description": "point desc"
      }
    }
  ]
}

Answer 1

Here is an example code, which you may change according to your needs:

I use these 3 package:

• flutter_map
• geojson
• latlong2

Sample Result

The example code

• When app loaded, it shows map markers
• Click on each marker to show its label

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:geojson/geojson.dart';
import 'package:latlong2/latlong.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App!!',
      theme: ThemeData(
        colorSchemeSeed: Colors.indigo,
        useMaterial3: true,
        brightness: Brightness.light,
      ),
      darkTheme: ThemeData(
        colorSchemeSeed: Colors.blue,
        useMaterial3: true,
        brightness: Brightness.dark,
      ),
      home: const MyHomePage(title: 'Flutter Example App'),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}): super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  List<GeoJsonFeature<dynamic>>? data;

  @override
    void initState() {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        loadGeoJsonFeatureFromGeoJson().whenComplete(() {
          setState(() {
            print('Completed');
          });
        });
      });
      super.initState();
    }

  @override
  Widget build(BuildContext context) {

    List<Polyline> _polylines = [];
    List<Marker> _markers = [];
    
    if (data != null) { 
      data!.forEach((data) {
        if (data.type == GeoJsonFeatureType.line) {
          GeoJsonLine line = data.geometry;
          final poly = Polyline(points: line.geoSerie!.toLatLng(), color: Colors.blue, strokeWidth: 5);
          _polylines.add(poly);
          // lines.add(data.geometry);
        } else if (data.type == GeoJsonFeatureType.point) {
          GeoJsonPoint point = data.geometry;
          final marker = Marker(
            point: point.geoPoint.toLatLng()!, 
            width: 20, 
            height: 20, 
            builder: (context) => Tooltip(
              message: data.properties?['STATIONNAME'] ?? '',
              triggerMode: TooltipTriggerMode.tap,
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.deepPurple,
                  borderRadius: BorderRadius.circular(99),
                ),
              ),
            ),
          );
          _markers.add(marker);
        }
        // Add more features
      });

    }

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: FlutterMap(
          options: MapOptions(
            center: LatLng(38.897283, -77.021918),
            zoom: 12,
          ),
          children: [
            TileLayer(
              urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
              subdomains: const <String>['a', 'b', 'c',], 
            ),
            MarkerLayer(markers: _markers),
            // PolylineLayer(polylines: _polylines),
          ],
        ),
      ),
    );
  }

  Future<List<GeoJsonFeature>?> loadGeoJsonFeatureFromGeoJson() async {
    try {
      String geoJsonBikeLocation = '''
        {
          "type": "FeatureCollection",
          "features": [
              {
                  "type": "Feature",
                  "properties": {
                      "OBJECTID": 1,
                      "LOCATIONID": 3,
                      "STATIONNAME": "Foggy Bottom",
                      "BIKECOUNT": 9,
                      "ADDRESS": "23rd St & I St",
                      "QUADRANT": "NW",
                      "WEB_URL": "https://www.smartbikedc.com/",
                      "PHONE": "1-800-899-4449"
                  },
                  "geometry": {
                      "type": "Point",
                      "coordinates": [
                          -77.05012628095922,
                          38.901405158996035
                      ]
                  }
              },
              {
                  "type": "Feature",
                  "properties": {
                      "OBJECTID": 2,
                      "LOCATIONID": 1,
                      "STATIONNAME": "Dupont Circle",
                      "BIKECOUNT": 15,
                      "ADDRESS": "Massachusetts Ave & Dupont Cir",
                      "QUADRANT": "NW",
                      "WEB_URL": "https://www.smartbikedc.com/",
                      "PHONE": "1-800-899-4449"
                  },
                  "geometry": {
                      "type": "Point",
                      "coordinates": [
                          -77.04434905357506,
                          38.91018149756077
                      ]
                  }
              },
              {
                  "type": "Feature",
                  "properties": {
                      "OBJECTID": 3,
                      "LOCATIONID": 4,
                      "STATIONNAME": "Gallery Place",
                      "BIKECOUNT": 15,
                      "ADDRESS": "7th St & F St",
                      "QUADRANT": "NW",
                      "WEB_URL": "https://www.smartbikedc.com/",
                      "PHONE": "1-800-899-4449"
                  },
                  "geometry": {
                      "type": "Point",
                      "coordinates": [
                          -77.02191815762689,
                          38.89728344626466
                      ]
                  }
              },
              {
                  "type": "Feature",
                  "properties": {
                      "OBJECTID": 4,
                      "LOCATIONID": 7,
                      "STATIONNAME": "McPherson Square",
                      "BIKECOUNT": 8,
                      "ADDRESS": "14th St & H St",
                      "QUADRANT": "NW",
                      "WEB_URL": "https://www.smartbikedc.com/",
                      "PHONE": "1-800-899-4449"
                  },
                  "geometry": {
                      "type": "Point",
                      "coordinates": [
                          -77.03240717405485,
                          38.90078499892696
                      ]
                  }
              },
              {
                  "type": "Feature",
                  "properties": {
                      "OBJECTID": 5,
                      "LOCATIONID": 9,
                      "STATIONNAME": "Reeves Center",
                      "BIKECOUNT": 12,
                      "ADDRESS": "14th St & U St",
                      "QUADRANT": "NW",
                      "WEB_URL": "https://www.smartbikedc.com/",
                      "PHONE": "1-800-899-4449"
                  },
                  "geometry": {
                      "type": "Point",
                      "coordinates": [
                          -77.03248214713554,
                          38.917373230883015
                      ]
                  }
              },
              {
                  "type": "Feature",
                  "properties": {
                      "OBJECTID": 6,
                      "LOCATIONID": 10,
                      "STATIONNAME": "Shaw",
                      "BIKECOUNT": 15,
                      "ADDRESS": "7th St & T St",
                      "QUADRANT": "NW",
                      "WEB_URL": "https://www.smartbikedc.com/",
                      "PHONE": "1-800-899-4449"
                  },
                  "geometry": {
                      "type": "Point",
                      "coordinates": [
                          -77.02191245663357,
                          38.91598834308168
                      ]
                  }
              },
              {
                  "type": "Feature",
                  "properties": {
                      "OBJECTID": 7,
                      "LOCATIONID": 8,
                      "STATIONNAME": "Metro Center",
                      "BIKECOUNT": 8,
                      "ADDRESS": "12th St & G St",
                      "QUADRANT": "NW",
                      "WEB_URL": "https://www.smartbikedc.com/",
                      "PHONE": "1-800-899-4449"
                  },
                  "geometry": {
                      "type": "Point",
                      "coordinates": [
                          -77.02848392960873,
                          38.8987482181005
                      ]
                  }
              },
              {
                  "type": "Feature",
                  "properties": {
                      "OBJECTID": 8,
                      "LOCATIONID": 5,
                      "STATIONNAME": "Judiciary Square",
                      "BIKECOUNT": 8,
                      "ADDRESS": "4th St & E St",
                      "QUADRANT": "NW",
                      "WEB_URL": "https://www.smartbikedc.com/",
                      "PHONE": "1-800-899-4449"
                  },
                  "geometry": {
                      "type": "Point",
                      "coordinates": [
                          -77.01540042306134,
                          38.89574098950278
                      ]
                  }
              },
              {
                  "type": "Feature",
                  "properties": {
                      "OBJECTID": 9,
                      "LOCATIONID": 6,
                      "STATIONNAME": "Logan Circle",
                      "BIKECOUNT": 12,
                      "ADDRESS": "14th St & Rhode Island Ave",
                      "QUADRANT": "NW",
                      "WEB_URL": "https://www.smartbikedc.com/",
                      "PHONE": "1-800-899-4449"
                  },
                  "geometry": {
                      "type": "Point",
                      "coordinates": [
                          -77.03219558571061,
                          38.90855656831227
                      ]
                  }
              },
              {
                  "type": "Feature",
                  "properties": {
                      "OBJECTID": 10,
                      "LOCATIONID": 2,
                      "STATIONNAME": "Farragut Square",
                      "BIKECOUNT": 15,
                      "ADDRESS": "17th St & K St",
                      "QUADRANT": "NW",
                      "WEB_URL": "https://www.smartbikedc.com/",
                      "PHONE": "1-800-899-4449"
                  },
                  "geometry": {
                      "type": "Point",
                      "coordinates": [
                          -77.03788324789845,
                          38.90220976421636
                      ]
                  }
              }
          ]
      }
      ''';

      final geojson = GeoJson();
      await geojson.parse(geoJsonBikeLocation);

      data = geojson.features;
    } catch (e) {
      print(e.toString);
      rethrow;
    }
    return data;

  }

}