[Improvement] Marker component

Hi there,

Just a question/recommandation/idea of improvement: because I struggle quite a lot to try and put a simple marker on my map, and it looks so complicated for such a basic feature (why would I need a GeoJSON ?), why not create an abstraction of it and create a MapboxGL.Marker component such as the react-native-maps/marker ?

[arnaudambro]

So thanks to all your help I could build a proper components to show custom markers, see the code below. My only big issue is: it doesn’t update when a new marker is dynamically added, even with the trick to set a key prop on ShapeSource updating properly. I think I tried a lot of times but I can’t still figure out what is wrong there…

import React from 'react';
import MapboxGL from '@react-native-mapbox-gl/maps';
import { View } from 'react-native';
import styles from './markerStyles';

const getFeatureId = ({ properties: { _id } }) => _id;
const getDataId = data => data._id
const createFeature = data => ({
  // https://github.com/react-native-mapbox-gl/maps/blob/master/docs/ShapeSource.md -> shapeSource prop
  // https://geojson.org
  // this has a geoJSON shape
  type: 'Feature',
  properties: {
    _id: data._id,
    whatever: 'you want'
  },
  geometry: {
    type: 'Point',
    coordinates: data.coordinates, // [lat, long]
  }
})

class MyMarkers extends React.Component {


  onPress = (e) => {
    const feature = e.nativeEvent.payload;
    const dataId = getFeatureId(feature)
    console.log({ feature, dataId })
    // TODO
  }

  render() {

    const { datas } = this.props;

    const features = datas.map(createFeature)

    return (
      <MapboxGL.ShapeSource
        id='markersShape'
        shape={{ type: 'FeatureCollection', features }}
        onPress={this.onPress}
      >
        {datas.map(data => (
          <MapboxGL.SymbolLayer
            id={getDataId(data)}
            key={getDataId(data)}
            sourceID='markersShape'
            filter={['==', '_id', getDataId(data)]}
            style={{
              iconSize: 1,
              iconAllowOverlap: true
            }}
          >
            <View
              style={styles.marker}
              pointerEvents='none' // this is important for the onPress prop of ShapeSource to work
            >
              {/* ... place what you want as a marker here, even SVG from react-native-svg for instance */}
            </View>
          </MapboxGL.SymbolLayer>
        ))}
      </MapboxGL.ShapeSource>
    )
  }
}

export default MyMarkers;

[arnaudambro]

@ethaqnix I still have an issues with your solution:

• it seems that the Mapview doesn’t update when a ShapeSource is added: I was able to show the newly added Marker by updating the Mapview key, do you know why ?
• depending on the zoom, some markers disappear automatically because the are hidden by other markers : how if I never want any marker to be hidden ?

If you have some clues there it would be great !