Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Image marker as SymbolLayer in ShapeSource does not appear on long press event #3424

Open
ako977 opened this issue Mar 15, 2024 · 0 comments
Labels
bug 🪲 Something isn't working

Comments

@ako977
Copy link

ako977 commented Mar 15, 2024

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:

  1. set shape of ShapeSource component with feature collection and one feature with coordinate
  2. no image (Android asset image) appears on the map

Expected behavior

  1. set shape of ShapeSource component with feature collection and one feature with coordinate
  2. 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

@ako977 ako977 added the bug 🪲 Something isn't working label Mar 15, 2024
@github-actions github-actions bot reopened this Mar 15, 2024
@ako977 ako977 changed the title [Bug]: [Bug]: Image marker as SymbolLayer in ShapeSource does not appear on long press event Mar 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🪲 Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant