MapShapeLayer class Null safety

The shape layer in which geographical rendering is done.

The actual geographical rendering is done here using the MapShapeLayer.source. The source can be set as the .json file from an asset bundle, network or from Uint8List as bytes.

The MapShapeSource.shapeDataField property is used to refer the unique field name in the .json file to identify each shapes and map with the respective data in the data source.

By default, the value specified for the MapShapeSource.shapeDataField in the GeoJSON file will be used in the elements like data labels, tooltip, and legend for their respective shapes.

However, it is possible to keep a data source and customize these elements based on the requirement. The value of the MapShapeSource.shapeDataField will be used to map with the respective data returned in MapShapeSource.primaryValueMapper from the data source.

Once the above mapping is done, you can customize the elements using the APIs like MapShapeSource.dataLabelMapper, MapShapeSource.shapeColorMappers, etc.

The snippet below shows how to render the basic world map using the data from .json file.

late MapShapeSource _mapSource;

void initState() {
  _mapSource = MapShapeSource.asset(
     shapeDataField: "name",


Widget build(BuildContext context) {
  return SfMaps(
    layers: [
        source: _mapSource,

See also:

  • source, to provide data for the elements of the SfMaps like data labels, bubbles, tooltip, shape colors, and legend.


MapShapeLayer({Key? key, required MapShapeSource source, MapLoadingBuilder? loadingBuilder, MapShapeLayerController? controller, MapLatLngBounds? initialLatLngBounds, List<MapSublayer>? sublayers, int initialMarkersCount = 0, MapMarkerBuilder? markerBuilder, IndexedWidgetBuilder? shapeTooltipBuilder, IndexedWidgetBuilder? bubbleTooltipBuilder, IndexedWidgetBuilder? markerTooltipBuilder, bool showDataLabels = false, Color? color, Color? strokeColor, double? strokeWidth, MapLegend? legend, MapDataLabelSettings dataLabelSettings = const MapDataLabelSettings(), MapBubbleSettings bubbleSettings = const MapBubbleSettings(), MapSelectionSettings selectionSettings = const MapSelectionSettings(), MapTooltipSettings tooltipSettings = const MapTooltipSettings(), int selectedIndex = -1, MapZoomPanBehavior? zoomPanBehavior, ValueChanged<int>? onSelectionChanged, WillZoomCallback? onWillZoom, WillPanCallback? onWillPan})
Creates a MapShapeLayer.


bubbleSettings MapBubbleSettings
Customizes the appearance of the bubbles. [...]
bubbleTooltipBuilder IndexedWidgetBuilder?
Returns a widget for the bubble tooltip based on the index. [...]
color Color?
Color which is used to paint the shapes.
controller MapShapeLayerController?
Provides option for adding, removing, deleting and updating marker collection. [...]
dataLabelSettings MapDataLabelSettings
Customizes the appearance of the data labels.
hashCode int
The hash code for this object. [...]
@nonVirtual, read-only, inherited
initialLatLngBounds MapLatLngBounds?
Option to set the LatLng bounds initially for the tile or shape layer. [...]
final, inherited
initialMarkersCount int
Option to set markers count initially. It cannot be be updated dynamically. [...]
final, inherited
key Key?
Controls how one widget replaces another widget in the tree. [...]
final, inherited
legend MapLegend?
Shows legend for the bubbles or shapes. [...]
loadingBuilder MapLoadingBuilder?
A builder that specifies the widget to display to the user while the map is still loading. [...]
markerBuilder MapMarkerBuilder?
Returns the MapMarker for the given index. [...]
final, inherited
markerTooltipBuilder IndexedWidgetBuilder?
Returns the widget for the tooltip of the MapMarker. [...]
final, inherited
onSelectionChanged ValueChanged<int>?
Called when the user tapped or clicked on a shape. [...]
onWillPan WillPanCallback?
Called whenever panning is happening. [...]
final, inherited
onWillZoom WillZoomCallback?
Called whenever zooming is happening. [...]
final, inherited
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited
selectedIndex int
Selects the shape in the given index. [...]
selectionSettings MapSelectionSettings
Customizes the appearance of the selected shape. [...]
shapeTooltipBuilder IndexedWidgetBuilder?
Returns a widget for the shape tooltip based on the index. [...]
showDataLabels bool
Shows or hides the data labels. [...]
source MapShapeSource
The source that maps the data source with the shape file and provides data for the elements of the this layer like data labels, bubbles, tooltip, and shape colors. [...]
strokeColor Color?
Color which is used to paint the stroke of the shapes.
strokeWidth double?
Sets the stroke width of the shapes.
sublayers List<MapSublayer>?
Collection of MapShapeSublayer, MapLineLayer, MapPolylineLayer, MapPolygonLayer, MapCircleLayer, and MapArcLayer. [...]
final, inherited
tooltipSettings MapTooltipSettings
Customizes the bubble, marker, and shape tooltip's appearance. [...]
final, inherited
zoomPanBehavior MapZoomPanBehavior?
Enables zooming and panning in MapShapeLayer and MapTileLayer. [...]
final, inherited


build(BuildContext context) Widget
Describes the part of the user interface represented by this widget. [...]
createElement() StatelessElement
Creates a StatelessElement to manage this widget's location in the tree. [...]
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. [...]
toString({DiagnosticLevel minLevel =}) String
A string representation of this object. [...]
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a string representation of this node and its descendants. [...]
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object. [...]
toStringShort() String
A short, textual description of this widget.


operator ==(Object other) bool
The equality operator. [...]
@nonVirtual, inherited