[Bug]: Image marker as SymbolLayer in ShapeSource does not appear on long press event
Nobody has claimed this yet.
- Dominant language
- Kotlin
- Stars
- 2.9k
- Forks
- 947
- Avg merge
- 6d 37m
- Merged PRs (30d)
- 1
Description
Mapbox Implementation
Mapbox
Mapbox Version
default
React Native Version
0.72.4
Platform
Android
@rnmapbox/maps version
10.1.13
Standalone component to reproduce
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>
)
}
Observed behavior and steps to reproduce
When long pressing on the map I get the coordinates data, but when I set the shape property of ShapeSource with the FeatureCollection and the desired image, I get no image appearing on the screen.
Please note that I have tried using an imported or required image and also an asset image that is pre configured in Android. I know the asset image is loaded because when I do not use the correct asset image name, I get the error: "Mapbox error cound not get native drawable with name..."
Steps to Reproduce:
- set shape of ShapeSource component with feature collection and one feature with coordinate
- no image (Android asset image) appears on the map
Expected behavior
- set shape of ShapeSource component with feature collection and one feature with coordinate
- image (Android asset image) appears on the map at the coordinate specified in the feature
Notes / preliminary analysis
No response
Additional links and references
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the standalone React Native reproduction, focusing on MapView's onLongPress handler and the ShapeSource, SymbolLayer, and Images entry points on Android. Trace how the FeatureCollection and native asset image are applied after the long press, then verify that the marker appears at the reported coordinate without recreating the source or crashing.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, javascript, react-native
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100