API	Description
CustomMapStyleOptions	Custom style parameters.
setCustomMapStyle(customMapStyleOptions: mapCommon.CustomMapStyleOptions): Promise<void>	Sets the map style to a custom style.

Specifying a style ID: Use Petal Maps Studio to manage map styles, and specify a style ID to apply the corresponding style to your map. You can create new styles or import existing styles to Petal Maps Studio. Once a map style is released, it will be applied to all apps that use it.
Configuring style properties: Change the map style by passing customized JSON. For details about the JSON definition, please refer to Style Reference.

[h2]Specifying a Style ID

Import required modules.

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback, BusinessError } from '@kit.BasicServicesKit';

Create a style ID.

a. Sign in to Petal Maps Studio.

b. Click Create map to create a custom map style.

c. Click Import to import a JSON file.

d. Modify the style in the editor.

e. Click SAVE to generate a preview ID that can be used to test the style effect. The preview ID of a style will be regenerated when you edit the style. Click PUBLISH to generate a style ID, which is unique and never changes once the style is published.

Map Kit provides two methods to specify style IDs.

Specify a style ID after a map is created.

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback, BusinessError } from '@kit.BasicServicesKit';

Set the style ID during map initialization.

@Entry
@Component
struct MapStyleDemo {
  // ...
  private TAG = 'MapStyleDemo';
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;

  aboutToAppear(): void {
    // Map initialization parameters.
    this.mapOptions = {
      position: {
        target: {
          latitude: 31.984410259206815,
          longitude: 118.76625379397866
        },
        zoom: 15
      }
    };
    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        // Style customization parameters. Replace styleId with your own style ID or preview ID. The style ID or preview ID can be created on Petal Maps Studio.
        let param: mapCommon.CustomMapStyleOptions = {
          styleId: 'XXX'
        };
        // Set a custom style.
        await this.mapController.setCustomMapStyle(param).then(() => {
          console.info(this.TAG + `setCustomMapStyle OK`);
        }).catch((error: BusinessError) => {
          console.error(this.TAG + `Failed in getting CustomMapStyle, code is: ${error.code}, message is
          ${error.message}`);
        })
      } else {
        console.error(`Failed to initialize the map. Code: ${err.code}; message: ${err.message}`);
      }
    };
  }

  build() {
    // ...
      Stack() {
        // Call the MapComponent component to initialize the map.
        Column() {
          MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback });
        }.width('100%')
      }.height('100%')

      // ...
  }
}

The following figure shows the effect after the style ID is set.

Click to enlarge

[h2]Configuring Style Properties

Import required modules.

import { MapComponent, mapCommon, map } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';

Configure style properties.

@Entry
@Component
struct MapStyleDemo {
  // ...
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;

  aboutToAppear(): void {
    // Map initialization parameters.
    this.mapOptions = {
      position: {
        target: {
          latitude: 31.984410259206815,
          longitude: 118.76625379397866
        },
        zoom: 15
      }
    };
    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        // Style customization parameters.
        let param: mapCommon.CustomMapStyleOptions = {
          styleContent: `[{
                   'mapFeature': 'landcover.natural',
                   'options': 'geometry.fill',
                   'paint': {
                       'color': '#8FBC8F'
                   }},
                   {
                  'mapFeature': 'water',
                  'options': 'geometry.fill',
                  'paint': {
                      'color': '#4682B4'
                  }}]`
        };
        // Set a custom style.
        await this.mapController.setCustomMapStyle(param);
      } else {
        console.error(`Failed to initialize the map. Code: ${err.code}; message: ${err.message}`);
      }
    };
  }

  build() {
    // ...
      Stack() {
        // Call the MapComponent component to initialize the map.
        Column() {
          MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback });
        }.width('100%')
      }.height('100%')

      // ...
  }
}

Click to enlarge

[h2]Style Reference

The JSON file defines the map style using the following elements:

mapFeature: map elements.
options: element options.
- geometry.fill: geometric filling.
- geometry.stroke: geometric stroke.
- geometry.icon: geometric icon.
- labels.text.fill: text filling.
- labels.text.stroke: text stroke.
paint: drawing attributes.
- color: color in hexadecimal format, for example, #FFFF00.
- weight: stroke width. The value is an integer ranging from 1 to 24. The default value is 1. A value larger than 1 indicates a wider stroke.
- icon-type: icon type. Currently, the options include night, simple, and standard.
visibility: visibility. The default value is true.
- true: visible
- false: invisible

The following tables describe the map elements that can be modified.

The options for icon-type include standard, night, and simple.

All

The value All indicates a collection of all categories. The supported capability scope is the same as that in all other tables. Only the visibility attribute can be adjusted for All.

Administrative

Element Type (Feature type)	Geometry Fill Color (Geometry. fill. color)	Geometry Fill Width (Geometry. fill. weight)	Geometry Stroke Color (Geometry. stroke. color)	Geometry Stroke Weight (Geometry. stroke. weight)	Icon Type (Icon. icon-type)
Capital	-	-	-	-
Country					-
District (District/County)	-	-	-	-
Locality (Rural areas and towns)	-	-	-	-
Major-city (Tier 1–4 cities)	-	-	-	-
Province					-

Landcover

Feature Type (Feature type)	Geometry Stroke Color (Geometry. stroke. color)	Label Fill Color (Labels. fill. color)	Text Size (Labels. fill. weight)	Label Stroke Color (Labels. stroke. color)	Label Stroke Weight (Labels. stroke. weight)
Attraction (Playgrounds, zoos, and botanical gardens)	-
Business (Shopping centers and business districts)	-
College (Schools)	-
Hospital	-
Human-made (Habitation areas, communities, industrial areas, and prisons)
Human-made (Buildings)		-	-	-	-
Natural (Lands, islands, beaches, and glaciers)	-
Parkland (Forests, parks, wastelands, and golf courses)	-

Poi

Feature Type (Feature type)	Label Fill Color (Labels. fill. color)	Text Size (Labels. fill. weight)	Label Stroke Color (Labels. stroke. color)	Label Stroke Weight (Labels. stroke. weight)	Icon Type (Icon. icon-type)
Airport
Automotive (Auto repair shops, charging piles, and car wash stations)
Beauty (Beauty centers)
Business (Companies and business buildings)
Eating&drinking (Restaurants and fast food outlets)
Health-care (Hospitals, clinics, and pharmacies)
Leisure (Leisure and entertainment venues)
Lodging (Hotels and accommodations)
Miscellaneous (Natural features)
Natural (Mountains and forests)
Public-service (Hospitals, clinics, and pharmacies)
Railway
Shopping (Shopping centers and markets)
Sports-outdoor (Outdoor sports, mountain climbing, and cycling)
Tourism (Tourist attractions, historical relics, and churches)

Road

Feature Type (Feature type)	Geometry Fill Color (Geometry. fill. color)	Geometry Fill Width (Geometry. fill. weight)	Geometry Stroke Color (Geometry. stroke. color)	Geometry Stroke Weight (Geometry. stroke. weight)	Label Fill Color (Labels. fill. color)	Text Size (Labels. fill. weight)	Label Stroke Color (Labels. stroke. color)	Label Stroke Weight (Labels. stroke. weight)	Icon Type (Icon. icon-type)
City-arterial (City arterial roads)
Highway (Urban expressways)
Minor-road (Urban branch roads)									-
National (National highways)
Province (Provincial highways)
Sidewalk									-

Trafficinfo

Feature Type (Feature type)	Geometry Fill Color (Geometry. fill. color)	Label Fill Color (Labels. fill. color)	Text Size (Labels. fill. weight)
Closed (Closed roads)

Feature Type

(Feature type)

Geometry Fill Color

(Geometry.

fill.

color)

Label Fill Color

(Labels.

fill.

color)

Text Size

(Labels.

fill.

weight)

Closed

(Closed roads)

Transit

Feature Type (Feature type)	Geometry Fill Color (Geometry. fill. color)	Geometry Fill Width (Geometry. fill. weight)	Geometry Stroke Color (Geometry. stroke. color)	Geometry Stroke Weight (Geometry. stroke. weight)	Label Fill Color (Labels. fill. color)	Text Size (Labels. fill. weight)	Label Stroke Color (Labels. stroke. color)	Label Stroke Weight (Labels. stroke. weight)	Icon Type (Icon. icon-type)
Airport		-	-	-
Airport Runway					-	-	-	-	-
Airport Runway Taxiway (Airport runways and taxiways)					-	-	-	-	-
Bus	-	-	-	-
Ferry-line		-	-	-					-
Ferry-terminal Ports		-	-	-
Other (Taxis and entrances and exits)	-	-	-	-
Rail-station (Railway stations and high-speed railway stations)		-	-	-
Railway (Railway lines and high-speed railway lines)					-	-	-	-	-
Subway
Traffic_light	-	-	-	-	-	-	-	-