HMSMarker does not render children components as the icon

[megaacheyounes]

Hi guys,

Let me start with an example: using react-native-maps I can render components as the icon of the marker, as shown in this example.

export default function RNDevsMarker() {
  return (
    <Marker>
      <View style={styles.markerIconContainer}>
        <View style={styles.markerBg}>
          <Image
            style={styles.markerImage}
            source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
          />
          <View style={styles.markerTextContainer}>
            <Text style={styles.markerText}>React native</Text>
            <Text style={styles.markerText}>234 developers interested</Text>
          </View>
        </View>
        <View style={styles.arrowDown} />
      </View>
    </Marker>
  );
}

const styles = StyleSheet.create({
  markerIconContainer: { backgroundColor: 'transparent', width: 250 },
  arrowDown: {
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 8,
    borderRightWidth: 8,
    borderBottomWidth: 16,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: '#A020F0',
    alignSelf: 'center',
    transform: [{ rotate: '180deg' }],
  },
  markerBg: {
    flexDirection: 'row',
    backgroundColor: '#A020F0',
    borderRadius: 50,
    paddingHorizontal: 5,
    paddingVertical: 5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  markerTextContainer: {
    flexDirection: 'column',
    marginLeft: 5,
    marginRight: 5,
    flexGrow: 1,
    textAlign: 'center',
  },
  markerText: {
    marginTop: 0,
    fontSize: 14,
    fontWeight: 'bold',
    textAlign: 'center',
    color: 'white',
  },
  markerImage: {
    height: 40,
    width: 40,
    borderRadius: 50,
  },
});

when running the app, we get this marker <RNDevsMarker/> drawn on Google Maps <Map/> as shown here:

but when I try to do the same with <HMSMarker/> , Huawei Map <HMSMap/> renders the default marker and ignores all children components inside <HMSMarker/>!

Currently the only way that you provide to customize HMSMarker is by using the attribute icon, which is not convenient when we want to render complex or dynamic markers.

what I want is described here:

Children components can be added within a Marker and rendered content will replace the marker symbol. This is a way of creating custom markers and allowing use of native SVGs, example:

<Marker ...>
<View style={{backgroundColor: "red", padding: 10}}>
<Text>this will be the markers symbol/icon</Text>
</View>
</Marker>

Please let me know if there's a way to get this to work like google maps, or consider this a Feature Request and implement it :)

Thanks!

[i01000101]

Hi @megaacheyounes

The React Native Map Plugin of HMS Core is a wrapper of native Huawei Map SDK and mimics its properties and usage in classes such as HMSMarker. Unfortunately for the time being, rendering children components inside HMSMarker is not a feature for the RN Map Plugin.

You can use title and snippet props to show related information when the marker is clicked to serve your purpose.

For detailed information, you may also check the official documentations to see what you can do with HMSMarker.

The feature requests similar to this one is valuable for us, thus we will definetly consider to develop it in our future releases. Meanwhile you may also submit a ticket online for feature requests to native SDKs.

Thank you for your interest in our plugins.