Use the HMS Core map service to customize the map style and make an exclusive personalized map for your application

Developers in different industries have very different needs for displaying map styles. For example, logistics applications hope that the map style is simpler, focusing on city distribution and express delivery routes; the map colors in AR game applications need to be adapted to the game UI to make it more cool; the map style in scenic area navigation applications should be The characteristics of the scenic spots are combined, and the key scenic spots are highlighted.

Custom map styles can better meet the display needs of developers in different industries for map styles. Developers can freely create the most suitable map styles by comprehensively considering factors such as the usage scenarios of their own products, brand colors and other factors.

HMS Core map service (Map Kit) provides the ability to customize map styles. Developers can customize the display of map styles by changing the style options in Petal Maps Studio, and change the visualization of functions such as roads, parks, businesses, and other points of interest. show. Provides seven categories and hundreds of map elements for style editing, allowing developers to freely edit personalized maps. At the same time, the developer only needs to edit the map once, and the map can be applied to various terminals (Android/iOS/Web), which greatly improves the development efficiency.

Integration steps

1. Generate style ID

1. Log in to Petal Maps Studio and click "Create map" to create a custom style.

2. Import the JSON style file and click "Import".

3. Modify the style in the editor.

4. Click "SAVE" to generate a preview ID, and test the style effect through the preview ID. Click "PUBLISH" to publish the generated style ID. The style ID is a unique ID and will not change once published.

Second, each platform code implementation steps

The map service provides two ways to set custom map styles:

• Set Style File: Manually define map style changes by embedding a JSON style declaration file.

• Set Style ID: Create a new style on Petal Maps Studio, or import an existing style definition. Once a style is published, apps that use this style will automatically apply the new style, no update version is required.

1. The first method: set the style file

Create a new style file mapstyle_road.json

 [
    {
        "mapFeature": "road.highway.city",
        "options": "all",
        "paint": {
            "color": "#7569ce"
        }
    },
    {
        "mapFeature": "road.highway.country",
        "options": "all",
        "paint": {
            "color": "#7271c6"
        }
    },
    {
        "mapFeature": "road.province",
        "options": "all",
        "paint": {
            "color": "#6c6ae2"
        }
    },
    {
        "mapFeature": "road.city-arterial",
        "options": "geometry.fill",
        "paint": {
            "color": "#be9bca"
        }
    },
    {
        "mapFeature": "transit.railway",
        "options": "all",
        "paint": {
            "color": "#b2e6b2"
        }
    }
]

1.1 Android settings style file

(1) Add the JSON file mapstyle_road.json to the res/raw directory

(2) Use the loadRawResourceStyle() method to load it as a MapStyleOptions object, and then pass the object to the HuaweiMap.setMapStyle() method.

 private HuaweiMap hMap;
MapStyleOptions styleOptions = MapStyleOptions.loadRawResourceStyle(this, R.raw.mapstyle_road);
hMap.setMapStyle(styleOptions);

1.2 iOS setting style file

(1) Define a JSON file mapstyle_road.json in the project directory

(2) Pass the file path to the setMapStyle method

 // 读取样式文件的路径
NSString *path = [NSBundle.mainBundle pathForResource:name ofType:@"json"];
// 调用设置方法
[self.mapView setMapStyle:path];

1.3 JavaScript setting style file

 map.setStyle("mapstyle_road.json");

2. Second method: set preview ID or style ID

2.1 Android set style ID

The Android SDK provides two ways to set the preview ID or style ID: before creating the map and after creating the map.

(1) Use a custom style after creating the map.

Set the custom style by calling the setStyleId and previewId methods of HuaweiMap.

 private HuaweiMap hMap;
String styleIdStr = edtStyleId.getText().toString();           //创建地图后设置样式ID
// String previewIdStr = edtPreviewId.getText().toString();   //在创建地图后设置预览ID
if (TextUtils.isEmpty(styleIdStr)) {
    Toast.makeText(this, "Please make sure the style ID is edited", Toast.LENGTH_SHORT).show();
    return;
}
if (null != hMap) {
    hMap.setStyleId("859320508888914176");
    //   hMap.previewId("888359570022864384");
}

(2) Change the existing style before creating the map

Set a custom style by calling the styleId and previewId methods of HuaweiMapOptions. When styleId and previewId are set at the same time, styleId is used first.

 FragmentManager fragmentManager = getSupportFragmentManager();
mSupportMapFragment = (SupportMapFragment) fragmentManager.findFragmentByTag("support_map_fragment");

if (mSupportMapFragment == null) {
    HuaweiMapOptions huaweiMapOptions = new HuaweiMapOptions();
    // please replace "styleId" with style ID field value in
    huaweiMapOptions.styleId("styleId");       //在创建地图前设置样式ID
    // please replace "previewId" with preview ID field value in
    huaweiMapOptions.previewId("previewId");    //在创建地图前设置预览ID
    mSupportMapFragment = SupportMapFragment.newInstance(huaweiMapOptions);
    FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
    fragmentTransaction.add(R.id.map_container_layout, mSupportMapFragment, "support_map_fragment");
    fragmentTransaction.commit();
}

mSupportMapFragment.getMapAsync(this);
mSupportMapFragment.onAttach(this);

2.2 The iOS SDK provides 1 way to set the preview ID or style ID: after the map is created.

To use a custom style after creating a map, please call the setMapStyleID: and setMapPreviewID: methods of HMapView to set it.

 /**
* @brief 改变底图样式
* @param styleID值为在官网配置的自定义样式列表中ID
* @return 是否设置成功
*/
- (BOOL)setMapStyleID:(NSString*)styleID;
/**
* @brief 改变底图样式
* @param previewID值为在官网配置的自定义样式列表中预览ID
* @return 是否设置成功
*/
- (BOOL)setMapPreviewID:(NSString*)previewID;

2.3 JavaScript provides two ways to set the preview ID or style ID: before the map is loaded and after the map is loaded

(1) Use the specified custom style when loading the map for the first time

When creating a map and importing a Huawei Maps API file, add the styleId or previewId parameter. When both styleId and previewId are passed in, styleId is used first. Note that the key has to be URL transcoded.

 <script src="https://mapapi.cloud.huawei.com/mapjs/v1/api/js?callback=initMap&key=API KEY&styleId=styleId"></script>

(2) Change the existing style after loading the map

 // 设置样式ID
map.setStyleId(String styleId)
// 设置预览ID
map.setPreviewId(String previewId)

Learn more details>>

Visit the official website of the Map Service Developer Alliance

Get the map service development guidance document

Visit the official website of Huawei Developer Alliance
Get development guidance documents
Huawei Mobile Services Open Source Warehouse Address: GitHub , Gitee

Follow us to know the latest technical information of HMS Core for the first time~