Huawei HMS maps not working on Ionic Capacitor runtime

Issue

I have followed this guide to add Huawei HMS maps to my IONIC capacitor runtime app. https://github.com/HMS-Core/hms-cordova-plugin/tree/master/cordova-plugin-hms-map/example/ionic

This app has google-services.json and huawei agconnect-services.json.

In project build.gradle I'm using

[...]
classpath 'com.huawei.agconnect:agcp:1.5.2.300'

capacitor.build.gradle

dependencies {
    [...]
    implementation "com.huawei.hms:base:5.2.0.300"
    implementation "com.huawei.hms:maps:6.0.1.304"
}

Here are the npm libs

npm install @hmscore/cordova-plugin-hms-map@latest
npm install @ionic-native/core @hmscore/ionic-native-hms-map@latest

Set the appropriate sha2 figerprint in the Huawei developer console. App build.gradle.

    signingConfigs {
        config {
            storeFile file('huawei.jks')
            storePassword '*****'
            keyAlias 'mapshowcase'
            keyPassword '*****'
        }
    }

dependencies {
    [...]
    implementation 'com.huawei.agconnect:agconnect-core:1.5.2.300'
}

     async initMap() {
            const mapOptions = {
                mapType: MapType.MAP_TYPE_TERRAIN,
                cameraPosition: {
                    target: {lat: 40.7587658, lng: 30.3146964},
                    zoom: 2
                }
            };
    
            this.hmsMap.requestPermission();
            this.map = await this.hmsMap.getMap('map', mapOptions, {marginTop: 50});
            this.addListener();
            this.map.setMyLocationEnabled(true);
            this.map.getUiSettings().setMyLocationButtonEnabled(true);
            this.map.getProjection().getVisibleRegion().then(vr => console.log(JSON.stringify(vr)));
            this.map.getProjection().toScreenLocation({lat: 12, lng: 43}).then(point => console.log(JSON.stringify(point)));
            this.map.getProjection().fromScreenLocation({x: 300, y: 600}).then(latLng => console.log(JSON.stringify(latLng)));
        }

Testing on a Huawei Harmony OS phone, but geting this error.

E/HmsMapKit_ErrorTraceLogPusher_4: cache error trace log : ErrorTraceLogDTO{ scenario = ACCESS_SERVICE_ERROR', message='5 : Unknown Code - 5'}
    com.huawei.hms.maps.foundation.client.mac: * * *n*n*w* *o*e*-*5
        at com.huawei.hms.maps.foundation.client.mac$maa.b(Unknown Source:25)
        at com.huawei.hms.maps.foundation.client.mab.a(Unknown Source:20)
        at com.huawei.hms.maps.foundation.client.mab.c(Unknown Source:80)
        at com.huawei.hms.maps.foundation.client.mab.a(Unknown Source:88)
        at com.huawei.hms.maps.provider.client.tile.maa.a(Unknown Source:1)
        at com.huawei.hms.maps.provider.client.tile.maa.lambda$gI3f4RyIuh0G4Qoia5V0XosFnEE(Unknown Source:0)
        at com.huawei.hms.maps.provider.client.tile.-$$Lambda$maa$gI3f4RyIuh0G4Qoia5V0XosFnEE.call(Unknown Source:6)
        at com.huawei.hms.maps.foundation.client.mab$maa.a(Unknown Source:3)
        at com.huawei.hms.maps.provider.client.tile.maa.c(Unknown Source:23)
        at com.huawei.hms.maps.provider.client.tile.maa.a(Unknown Source:4)
        at com.huawei.hms.maps.provider.cache.mag.a(Unknown Source:63)
        at com.huawei.hms.maps.provider.cache.mag$mac.startUrlRequest(Unknown Source:2)
        at com.huawei.map.MapController.startUrlRequest(Unknown Source:28)

Fo far I have not found any solution or details about such error on internet. Any help is appreciated.

Update 1 Looks like the map is properly constructed:

I/Capacitor/Console: File: http://localhost/ - Line 6588 - Msg: Huawei map constructed with the div id map :: and the props 1

But the target map div stays in blank and when I tap on it I'm able to see the clicks being logged.

addListener() {
        const log = document.getElementById('log');
        this.map.on(MapEvent.ON_MAP_CLICK, (latLng) => {
            log.innerHTML = '<br>' + 'Map_Click:' + latLng.lat + '<-->' + latLng.lng + log.innerHTML;
        });
        this.map.on(MapEvent.ON_MAP_LONG_CLICK, (latLng) => {
            log.innerHTML = '<br>' + 'Map_Long_Click:' + latLng.lat + '<-->' + latLng.lng + log.innerHTML;
        });
}

Update 2 The issue is with the transparency of the parent div of the map div. The plugin does not set the background transparent to all its parent nodes automatically on map init.

Solution

The issue was solved by setting all map div's parent ion-content nodes'css value when map has to be shown and remove it when map page is destroyed.

global.scss

    --ion-background-color: var(--map-background, white);
    
    .background-transparent {
      --map-background: transparent !important;
    }

Map.page.ts

ionViewDidEnter(){
    document.body.classList.toggle('background-transparent', true);
}

ionViewWillLeave(){
    document.body.classList.toggle('background-transparent', false);
}

Answered By - user2209957