Maps: [Android] Marker not showing in android

Created on 25 Sep 2019  路  9Comments  路  Source: react-native-mapbox-gl/maps

Describe the bug

it's working fine in ios but marker didn't show in android. I have placed 'example.png' in drawable & assets directory. Only map shows without any marker.

source code

style={{ flex: 1 }}
zoomEnabled={true}
>
zoomLevel={9}
centerCoordinate={[72.87, 19.07]}
/>

    <MapboxGL.Images
      images={{ assets:['example'] }}
    />

    <MapboxGL.ShapeSource
      id="my-position"
      shape={point}

    >
      <MapboxGL.SymbolLayer
        id="my-position"
        minZoomLevel={1}
        style={styles.fivestar}
      />

    </MapboxGL.ShapeSource>
  </MapboxGL.MapView>

** Expected behavior
Should show marker.

** Versions :

Platfrom: Android
Device: Emulator
OS: Android 9
SDK Version: 28
React Native Version 0.60.5
react-native-mapbox-gl/maps version: 7.0.6

Most helpful comment

You are using the old styles, now you have to use

const styles = {
  icon: {
    iconAllowOverlap: true,
    iconImage: ['get', 'icon'],

    iconSize: [
      'match',
      ['get', 'icon'],
      'example',
      0.1, /* size of 10% */
      /* default */ 1,
    ],
  },
}

and Images look's like that :
<MapboxGL.Images key="markerKey" images={{ example: myMarker, assets: ['pin'] }} />

PS : PointAnnotation is deprecated

All 9 comments

Same issue.

Can you show styles.fivestar ?

const styles = {
fivestar: {
iconImage: '{icon}',
iconAllowOverlap: true,
iconIgnorePlacement: true,
iconSize: 0.8,
},
};

I also have the same issue with <MapboxGL.PointAnnotation ... />

Try using the image component.

You are using the old styles, now you have to use

const styles = {
  icon: {
    iconAllowOverlap: true,
    iconImage: ['get', 'icon'],

    iconSize: [
      'match',
      ['get', 'icon'],
      'example',
      0.1, /* size of 10% */
      /* default */ 1,
    ],
  },
}

and Images look's like that :
<MapboxGL.Images key="markerKey" images={{ example: myMarker, assets: ['pin'] }} />

PS : PointAnnotation is deprecated

Try using the image component.

Actually I have dynamic text on each marker, that's why i'm using PointAnnotation.

You are using the old styles, now you have to use

const styles = {
  icon: {
    iconAllowOverlap: true,
    iconImage: ['get', 'icon'],

    iconSize: [
      'match',
      ['get', 'icon'],
      'example',
      0.1, /* size of 10% */
      /* default */ 1,
    ],
  },
}

and Images look's like that :
<MapboxGL.Images key="markerKey" images={{ example: myMarker, assets: ['pin'] }} />

PS : PointAnnotation is deprecated

That solved my problem, thanks !

Working Fine in Android & IOS. Thanks for the support.

Was this page helpful?
0 / 5 - 0 ratings