How to visualize the shp files in Flutter Maps?

1 min read

In Syncfusion® Flutter Maps, you can visualize SHP files after converting them to GeoJSON format. This conversion requires a shape package with both SHP and DBF files.

Step 1: Go to https://mapshaper.org/

Step 2: Drop the shape package files in the dropdown box. A new dialog box will appear. Click the Import button.

Step 3: The uploaded shape will be displayed on screen. Click the Export button in the top right corner. In the export menu that appears, select the GeoJSON radio button and press Export.

Step 4: Add and refer this downloaded JSON file in the Flutter application as mentioned in this link.

Note: The website mentioned above is used for demonstration purposes only. We kindly request you to check the licensing terms and conditions before using it.

late MapShapeSource _mapSource;
 
@override
  void initState() {
  _mapSource = MapShapeSource.asset(
    'assets/australia.json',
    shapeDataField: 'STATE_NAME',
  );
  super.initState();
}
 
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SfMaps(
      layers: [
        MapShapeLayer(
          source: _mapSource,
        ),
      ],
    ),
  );
}

Screenshot

Map

Description automatically generated

Check the below links for more features in shape layer.

Live samples,

Conclusion

I hope you enjoyed learning about how to visualize SHP files in Flutter Maps.

You can refer to our Flutter Maps feature tour page to learn about other groundbreaking features, documentation, and configuration specifications. You can also explore our Flutter Maps example to understand how to create and manipulate map data.

For current customers, you can access our components from the License and Downloads page. If you're new to Syncfusion®, you can try our 30-day free trial to explore our other controls.

If you have any queries or need clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to visualize the shp files in Flutter Maps?

Screenshot

Access denied