Option to give a color to the map layer itself

[Tim]

Hi,

I have been searching for a way to color the map itself (around the shapes).

I have provided my SfMaps with a SfMapsTheme + SfMapsThemeData, but I can't find a way to color the map itself around the edges of the shapes itself.

See attachment for what I want to color: https://pasteboard.co/JXvpk9I.png

The parameters: brightness, layerColor sound like they should take care of this. However, these are the only two which don't change in appearance when my map is rendered (Map stays white and changing brightness to Brightness.light doesn't change anything as well.) 

SfMapsTheme(
    data: SfMapsThemeData(
        brightness: Brightness.dark,
        layerColor: Colors.grey,
        layerStrokeColor: Colors.grey,
        layerStrokeWidth: 1,
        shapeHoverColor: Colors.black,
        shapeHoverStrokeColor: Colors.black,
        shapeHoverStrokeWidth: 5,
        selectionColor: Colors.yellow,
        selectionStrokeWidth: 5,
        toggledItemColor: Colors.black,
        toggledItemStrokeWidth: 5
    ),
    child: SfMaps(

Kind regards, Tim.

[Lakshmi Radha Krishnan]

Hi Tim,    

  

Greetings from Syncfusion. 

   

The SfMapThemeData.brightness property is used to change only the layer color and layer stroke color of the map based on the theme mode. If you want to apply theme color around the shape, you can wrap the SfMaps widget to the ColoredBox and apply the theme color to it.    

  

Code snippet: 

  

 

late MapShapeSource _source;
bool? _isDarkTheme = false;
@override
void initState() {
_source = MapShapeSource.asset(
'assets/australia.json',
shapeDataField: 'name',
);
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Color around the shape')),
body: Center(
child: Column(
children: [
Container(
width: 250,
child: CheckboxListTile(
value: _isDarkTheme,
title: Text('Enable dark theme'),
onChanged: (bool? newValue) {
setState(() {
_isDarkTheme = newValue;
});
},
),
),
Expanded(
child: ColoredBox(
color: _isDarkTheme! ? Colors.black : Colors.white,
child: Padding(
padding: const EdgeInsets.only(left: 15.0),
child: SfMapsTheme(
data: SfMapsThemeData(
layerColor: Colors.teal,
layerStrokeColor: Colors.grey,
layerStrokeWidth: 1,
shapeHoverColor: Colors.black,
shapeHoverStrokeColor: Colors.black,
shapeHoverStrokeWidth: 5,
selectionColor: Colors.yellow,
selectionStrokeWidth: 5,
toggledItemColor: Colors.black,
toggledItemStrokeWidth: 5),
child: SfMaps(
layers: [
MapShapeLayer(
source: _source,
),
],
),
),
),
),
),
SizedBox(height: 20),
],
),
),
);
}

 

  

Light theme:   

   

 
 
  

   

Dark theme:   

   

   

   

Kindly inform us if you need further assistance on this.  

  

Regards,   

Lakshmi R.