Map styles | Mobile SDK | Urbi Documentation
Android SDK

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.

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 Android SDK instruction.

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

  4. Connect the style using the File() method and specify the style object as the styleFuture parameter:

    // Setting a style in the map settings
    val mapContainer = findViewById<LinearLayout>(R.id.map_container)
    val mapOptions = MapOptions().apply {
        styleFile = File.fromAsset(sdkContext, "custom-styles.2gis")
    }
    
    // Creating a map with the specified settings
    mapView = MapView(this, mapOptions)
    mapContainer.addView(mapView)
    

    You can specify File() using different constructors:

    styleFile = File("custom-styles.2gis")
    
    styleFile = File.fromAsset(sdkContext, "custom-styles.2gis")
    
    styleFile = File.fromString("custom-styles.2gis")
    

To change the style of the created map, use StyleBuilder:

// Uploading a new map style
val newStyle = StyleBuilder(sdkContext).loadStyle(File.fromAsset(sdkContext, "custom-styles.2gis"))

// Changing the map style after uploading
newStyle.onResult { map.style = it }

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

You can specify themes when creating a map using the setTheme() method:

// Setting a style in the map settings
val mapContainer = findViewById<LinearLayout>(R.id.map_container)
val mapOptions = MapOptions().apply {
    // Switching between themes
    setTheme(theme = MapTheme("day", Color(255,0,0)))
}

// Creating a map with the specified settings
mapView = MapView(this, mapOptions)
mapContainer.addView(mapView)

You can change the theme after creating a map using the setTheme() method:

mapView.setTheme(MapTheme.defaultDarkTheme)

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:

      Adding a global 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 Android SDK instruction.

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

    map.attributes.setAttributeValue("parkingOn", AttributeValue(true))