Maps: [Android] Image in PointAnnotation can't be shown on Android

Created on 13 Oct 2019 · 24Comments · Source: react-native-mapbox-gl/maps

To Reproduce
Should be starting from 7.0.5 Release
<MapboxGL.PointAnnotation ...> <View style={{height: 30, width: 21, backgroundColor: '#000'}}> <Image source={require('../../images/map/school.png')} /> </View> <MapboxGL.Callout title='xxx' /> </MapboxGL.PointAnnotation>

Screenshots
Screen Shot 2019-10-14 at 10 42 44 AM

Versions (please complete the following information):

Platfrom: Android
Device: Asus Zenfone 5
OS: Android 6
SDK Version 28
React Native Version 0.59

Source

winseyli

👍3 👀2

Most helpful comment

Workaround is to wrap <Image/> with <Text/>. Or as @RichardLindhout wrote to use SVG instead.
Source: https://github.com/react-native-community/react-native-maps/issues/431#issuecomment-524321467

const HackMarker = ({ children }) =>
    Platform.select({
        ios: children,
        android: (
            <Text
                style={{
                    lineHeight: 88, // there is some weird gap, add 40+ pixels
                    backgroundColor: '#dcdcde',
                }}>
                {children}
            </Text>
        ),
    })

Use like this

<MapboxGL.PointAnnotation
    coordinate={[0,0]}
    id="marker">
    <HackMarker>
        <Image source={marker} />
    </HackMarker>
</MapboxGL.PointAnnotation>

RobertSasak on 19 Dec 2019

👍9 🚀3 😄3 ❤2

All 24 comments

I'm having the same issue on Android, React Native 0.61.2, Mapbox 7.0.6. (It works fine on iOS.)

Note that the Image view is invisible as well, not just the source input. For example,

<Image style={{ width: 40, height: 40, backgroundColor: 'blue' }} />

is totally invisible, while

<View style={{ width: 40, height: 40, backgroundColor: 'blue' }} />

displays correctly.

naftalibeder on 14 Oct 2019

@winseyli I realized this might be a different issue - for me icons aren't black boxes, they're completely invisible.

On your Android emulator, go to the three-dots menu, and navigate to Settings > Advanced > OpenGL ES Renderer. Choose SwiftShader and restart the emulator. Does that work?

naftalibeder on 14 Oct 2019

👍1

My Android is a real device not simulator so I think it is not the case

winseyli on 15 Oct 2019

Ok, good point! Then yes, this is a bug, and I believe it's the same issue I'm experiencing.

naftalibeder on 15 Oct 2019

It's a known issue (issue 274), however, if you just want to display a png, you can use SymbolLayer :

<MapboxGL.SymbolLayer
          id="youId"
          style={{
            iconImage: yourImage,
            iconSize: 0.1,
            iconRotationAlignment: 'map',
            iconAllowOverlap: true,
          }}
        />

I can be wrong, but i remember that this way will be (or is) deprecated. New styles are something like that

<MapboxGL.Images images={{ example: marker, assets: ['pin'] }} />,
<MapboxGL.ShapeSource
    id="yourId"
    shape={yourFeatureCollection}
>
<MapboxGL.SymbolLayer
    id="exampleIconName"
    style={styles.icon}
 />
</MapboxGL.ShapeSource>

with this styles :

{
    iconImage: ['get', 'icon'],
    iconSize: [
      'match',
      ['get', 'icon'],
      'example',
      0.1,
      /* default */ 1,
    ],
  }

I don't think that it work with callout, maybe you can do something similar with onPress props on ShapeSource at least temporary.

ethaqnix on 22 Oct 2019

Can SymbolLayer work with callout after PointAnnotation deprecated? Callout is needed!!

winseyli on 23 Oct 2019

👍2

Guys did you find the solution on it? if YES please guide.

subodhsri1 on 30 Oct 2019

👀6

I am experiencing a similar issue with Point Annotations, in that my annotations are appearing, but they are showing up behind my map and a shape source layer. Unsure what is happening.

tholhubner on 7 Nov 2019

For me this does not work on Android while it does work on iOS

<Mapbox.PointAnnotation
      coordinate={toCoordinates({ longitude, latitude })}
      anchor={{ y: 1, x: 0.5 }}
      id={id}
      pointerEvents="none"
    >
      <Image
        id={id}
        source={source}
        style={{ width, height }}
        pointerEvents="none"
      />
    </Mapbox.PointAnnotation>

RichardLindhout on 14 Nov 2019

👎1

It's a strange bug since Vector or something else just work fine!

RichardLindhout on 15 Nov 2019

https://github.com/react-native-community/react-native-maps/issues/2083

RichardLindhout on 15 Nov 2019

Ok, I think I will use react-native-svg instead of an image for now. That does work!

RichardLindhout on 15 Nov 2019

👍1

@RichardLindhout Do I understand it correctly that you just replaced <Image/> with <Svg/> inside of PointAnnotation? Can you please post a short example?

RobertSasak on 18 Dec 2019

const HackMarker = ({ children }) =>
    Platform.select({
        ios: children,
        android: (
            <Text
                style={{
                    lineHeight: 88, // there is some weird gap, add 40+ pixels
                    backgroundColor: '#dcdcde',
                }}>
                {children}
            </Text>
        ),
    })

Use like this

<MapboxGL.PointAnnotation
    coordinate={[0,0]}
    id="marker">
    <HackMarker>
        <Image source={marker} />
    </HackMarker>
</MapboxGL.PointAnnotation>

RobertSasak on 19 Dec 2019

👍9 🚀3 😄3 ❤2

@RobertSasak Which version of mapbox do you have installed?

momirkostic on 24 Dec 2019

I use this fork https://github.com/RichardLindhout/maps

RobertSasak on 24 Dec 2019

👍2

Workaround is to wrap <Image/> with <Text/>. Or as @RichardLindhout wrote to use SVG instead.
Source: react-native-community/react-native-maps#431 (comment)

const HackMarker = ({ children }) =>
    Platform.select({
        ios: children,
        android: (
            <Text
                style={{
                    lineHeight: 88, // there is some weird gap, add 40+ pixels
                    backgroundColor: '#dcdcde',
                }}>
                {children}
            </Text>
        ),
    })

Use like this

<MapboxGL.PointAnnotation
    coordinate={[0,0]}
    id="marker">
    <HackMarker>
        <Image source={marker} />
    </HackMarker>
</MapboxGL.PointAnnotation>

Ty. Having this issue too. Will try this solution.

lrpinto on 30 Jan 2020

👍3

It seems to be caused by https://github.com/react-native-mapbox-gl/maps/blob/179d35b736fd9dfc38e6728810576d06482694fe/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/annotation/RCTMGLPointAnnotation.java#L124

https://github.com/react-native-mapbox-gl/maps/blob/179d35b736fd9dfc38e6728810576d06482694fe/android/rctmgl/src/main/java/com/mapbox/rctmgl/utils/BitmapUtils.java#L96-L109

A workaround is using MarkerView. as that should render views as is

mfazekas on 19 Feb 2020

It seems to be caused by

https://github.com/react-native-mapbox-gl/maps/blob/179d35b736fd9dfc38e6728810576d06482694fe/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/annotation/RCTMGLPointAnnotation.java#L124

https://github.com/react-native-mapbox-gl/maps/blob/179d35b736fd9dfc38e6728810576d06482694fe/android/rctmgl/src/main/java/com/mapbox/rctmgl/utils/BitmapUtils.java#L96-L109

A workaround is using MarkerView. as that should render views as is

Hi Thank you for looking into this. My point annotations are still rendering under the symbol layers. I was even thinking whether it would be possible to wrap the native component in a ViewGroup and bringToFront them... but I am certainly more keen with trying the MarkerView then adventuring on the native code :) keen to give it a go thanks again for awesome project

lrpinto on 20 Feb 2020

Faced this issue too on android. My code:

<MapboxGL.PointAnnotation
          coordinate={this.state.location}
          title='Current'>

 <View style={{height:80,width:40, backgroundColor:'transparent',alignItems:'center'}}>
     <View style={{width:40, height:40, backgroundColor:'#000000', borderRadius:40/2}}>
          <Image
               style={{width:25,height:25}}
               source={require('@assets/image.png')}
           />
     </View>
     <View style={{width:2, height:20, backgroundColor:'#000000'}}/>
 </View>

</MapboxGL.PointAnnotation>

nzrin on 25 Feb 2020

I am experiencing a similar issue with Point Annotations on Android, react Native 0.62.2,mapbox-gl 8.1.0-beta.1
Screenshot_2020-05-28-14-13-24

<MapboxGL.MapView style={{flex: 1}}>

          <MapboxGL.Camera centerCoordinate={[77.56, 28.67]} zoomLevel={10} />

          <MapboxGL.PointAnnotation
            id="marker "

            coordinate={[77.56, 28.67]}
            title="hello"

            ref={(ref) => (this.annotationRef = ref)}>

            <View
              style={{
                width: ANNOTATION_SIZE,
                height: ANNOTATION_SIZE,
                alignItems: 'center',
                justifyContent: 'center',

                backgroundColor: 'white',
                borderRadius: ANNOTATION_SIZE / 2,
                borderWidth: StyleSheet.hairlineWidth,
                borderColor: 'rgba(0, 0, 0, 0.45)',
                overflow: 'hidden',
              }}>
              <Image
                source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
                style={{width: ANNOTATION_SIZE, height: ANNOTATION_SIZE}}
                onLoad={() => this.annotationRef.refresh()}
              />
            </View>
            <MapboxGL.Callout title="This is a sample" />
          </MapboxGL.PointAnnotation>
        </MapboxGL.MapView>

shashank1501 on 28 May 2020

<MapboxGL.PointAnnotation id={'your-id'} coordinate={[]}>
 <MapboxGL.Callout title='your-title'/> 
   <View style={yourStyle}>
      <Text  style={yourStyle}>
          {<Image source={{uri: 'https://api.adorable.io/avatars/400/[email protected]'}} style={{width, height}}/>}
       </Text>
   </View>
</MapboxGL.PointAnnotation>