CODEWITHSUNDEEP
react-nativemapboxrnmapbox-maps
ako977
ako977

Reputation: 792

RNMapbox library is not displaying custom marker image on "Long Press" event

Using the "LongPress" event, I am trying to set map pin images at the long pressed longitude/latitude on the RNMapbox map. When I long press on an area, I have console logged to confirm that I am indeed getting the longitude/latitude, but visually I see no map pin appear the coordinate.

Environment:

React Native version: 0.72.4 Android API 34 @rnmapbox/maps version 10.1.13

Example component code:

import React, { View } from 'react';
import Mapbox from '@rnmapbox/maps';

Mapbox.setAccessToken('<access token>')

export default function ExampleMap () {
const [mapPinFeatures, setMapPinFeatures] = React.useState(null)
const [mapKey, setMapKey] = React.useState(Date.now())
const map = React.useRef(null)
const camera = React.useRef(null)

function onLongPress (data) {
   setMapPinFeatures({
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        id: 'collection',
        properties: {},
        geometry: {
          type: 'Point',
          coordinates: data.coordinates
        }
      }]
  })

  // Need to do this or changing the feature without re-rendering the ShapeSource causes Android version to crash
  setMapKey(Date.now())
}

  return (
<View style={{ flex: 1, width: '100%' }}>
      <Mapbox.MapView
        ref={(ref) => { map.current = ref }}
        styleURL={Mapbox.StyleURL.Light}
        style={{ flex: 1, width: '100%' }}
        zoomEnabled
        pitchEnabled={false}
        logoEnabled={false}
        scaleBarEnabled={false}
        onLongPress={onLongPress}
      >
        <Mapbox.Camera
          ref={(ref) => { camera.current = ref }}
          animationMode="moveTo"
          defaultSettings={{ zoomLevel: 13, centerCoordinate: [-0.1996, 5.5837] }}
        />
        {mapPinFeatures
          ? (
            <Mapbox.ShapeSource key={mapKey} shape={mapPinFeatures}>
              <Mapbox.SymbolLayer
                id={'pin'}
                style={{ iconImage: 'map_marker_start', iconAllowOverlap: false }}
              />
              <Mapbox.Images
               nativeAssetImages={['map_marker_start']}
             />
            </Mapbox.ShapeSource>
            )
          : null}
      </Mapbox.MapView>
</View>
  )
}

I have tried using required/imported images and even Android asset images (as in the code example below). I know the asset images exist because when I change the name of the asset image, I correctly get the error: "I get the error: "Mapbox error cound not get native drawable with name..."

I also believe I correctly followed an example for custom images as described here: https://rnmapbox.github.io/docs/examples/SymbolCircleLayer/CustomIcon

Has anyone encountered this before and know how to solve it?

Upvotes: 0

Views: 427

Answers (1)

ako977
ako977

Reputation: 792

Although I cannot seem to make the solution work with Mapbox.Images, I believe I have found a workaround. I decided to use PointAnnotation and React Native Image component to render custom marker images. Example:

<Mapbox.PointAnnotation
  draggable
  ref={(ref) => {
    pointAnnotationRefs.current[pin.id] = ref
  }}
  id={pin.id}
  coordinate={pin.coordinates}>
  <View>
    <Image
     source={require(<image source>)}
     style={{ width: 40, height: 40 }}
     // Prevent rendering bitmap at unknown animation state
     fadeDuration={0}
     onLoad={() => {
       pointAnnotationRefs?.current?.[pin.id]?.refresh()
     }}
    />
  </View>
</Mapbox.PointAnnotation>

The important other thing to note here is that you need to refresh the PointAnnotation rendering when the image has loaded (Android seems to be ok without this, but I had a lot of problems in iOS with rendering the image without this)

Upvotes: 0

Related Questions