Map styles

You can change the look of the map and its objects by applying styles. Styles are the rules of displaying map data that define in which order and in which form to draw it.

Connecting a style to a map

You can connect styles from the Style editor to a map added to a mobile application. The Style editor allows you to configure the rendering of any map components.

To connect a style from the Style editor:

1. Create your map style using the Style editor: see the Creating a style instruction. You can use prepared style templates.

2. Export the style: see the Connecting a style for Flutter SDK instruction.

3. Move the downloaded style to the project with the mobile application.

4. Connect the style using the loadStyle method and specify the style object as the style parameter:

   Future<void> _initializeMapOptions() async {
   // Asynchronous loading of the map style from file
   final style = await sdk.StyleBuilder(_sdkContext)
   .loadStyle(sdk.File('style.2gis'))
   .value;
   // Creating MapOptions with the loaded style
   final mapOptions = sdk.MapOptions(style: style);
   }
   // Now MapOptions can be passed to MapWidget
   sdk.MapWidget(
       sdkContext: sdkContext,
       mapOptions: mapOptions,
       controller: mapWidgetController,
   );
   

Switching a theme

Map styles can contain multiple themes (for example, day and night) that you can switch between in the runtime without loading an additional style.

When creating a map

You can specify themes when creating a map using the appearance parameter in MapAppearance:

final sdk.AutomaticAppearance appearance;
appearance = const sdk.AutomaticAppearance(
    sdk.MapTheme.defaultDayTheme(),
    sdk.MapTheme.defaultNightTheme(),
);
final options = sdk.MapOptions(appearance:appearance);

After creating a map

You can change the theme after creating a map using the appearance parameter in MapWidgetController:

final sdk.AutomaticAppearance appearance;
appearance = const sdk.AutomaticAppearance(
    sdk.MapTheme.defaultDayTheme(),
    sdk.MapTheme.defaultNightTheme(),
);
mapWidgetController.appearance = appearance;

Managing style layers

You can dynamically enable or disable the display of a style layer on the map. To enable a layer (for example, a layer with parking lots):

1. Initialize a global variable:

   1. Open the Style editor.

   2. In the My styles block, open a card of the required style.

   3. In the Layers section, select the layer you want to enable.

   4. In the Data (JSON) block, edit the JSON file and add the required global variable (global). For example, for the parking lots layer, it is the parkingOn variable:

      

      A global variable can be used in multiple layers, but only within one style.

2. Export and connect the style: see the Connecting a style for Flutter SDK instruction.

3. Set the attribute to true using the setAttributeValue() method. For example, to enable the parking lots layer:

   map.attributes.setAttributeValue("parkingOn", sdk.AttributeValue.boolean(true));