Only one map shown despite multiple mapsource added
Hi Sao,
We would like to inform you that in SfMaps, the multiple layers given to the layers property will be rendered one above another, and this is the current behavior. As a result, only the last added layer is visible. However, to render multiple layers in SfMaps, you can use the subLayers property in both MapTileLayer and MapShapeLayer according to your needs.
We have prepared a sample by rendering the MapShapeLayer with the world map and rendering India as a MapShapeSubLayer, as shown in the code snippet below.
|
class _MyHomePageState extends State<MyHomePage> { late MapShapeSource _shapeSource; late MapShapeSource _subLayerSource;
@override void initState() { _shapeSource = const MapShapeSource.asset( 'assets/world_map.json', shapeDataField: 'name', ); _subLayerSource = const MapShapeSource.asset( 'assets/india.json', shapeDataField: 'name', ); super.initState(); }
@override Widget build(BuildContext context) { return Scaffold( body: Padding( padding: const EdgeInsets.all(10), child: SfMaps( layers: [ MapShapeLayer( source: _shapeSource, color: Colors.blueAccent.shade100, sublayers: [ MapShapeSublayer( source: _subLayerSource, color: Colors.cyanAccent.shade100, ), ], ), ], ), ), ); } } |
Snapshot:
Also shared the User Guide documentation below regarding the subLayers in the SfMaps for your reference.
UG: https://help.syncfusion.com/flutter/maps/shape-sublayer
If you have further queries, please get back to us.
Regards,
Hari Hara Sudhan. K.
