react-native-mapbox-gl Set borderRadius on ShapeSource Images?

How does one go about setting a border radius on an external asset?

Currently getting users facebook profile pics and showing them on map... however they are square and I want to somehow modify it with css? Is there a way to do that?

const styles = MapboxGL.StyleSheet.create({
  icon: {
    iconImage: '{icon}',
    iconAllowOverlap: true,
    iconSize: 0.05,
  },
});

return (
      <MapboxGL.ShapeSource id='map-users-source' images={images} shape={this.props.userFeatureCollection}>
        <MapboxGL.SymbolLayer
          id="user-map-marker"
          style={styles.icon}
        />
      </MapboxGL.ShapeSource>
);

May 19 '18 06:05 engelzero

Also how can I set the iconSize in pixel width and not to scale?

May 22 '18 03:05 engelzero

@spotelf13 I'm trying to do the same, did you manage to do it? Also I would like to ask how do you load your profile images dynamically? I tried to pass in a state for the prop images but it doesn't load any image. I see from your code, it's {images}. Did you preload all images before initalizing the map?

Oct 23 '18 09:10 seeya

@seeya Nah I didn't end up setting a borderRadius they are still square icons floating about the map haha.

Below is my UserMarker component, you'll need to call that component into the mapView component and parse in your user object(s)

import React from 'react';
import PropTypes from 'prop-types';
import {Platform, View} from 'react-native';
import MapboxGL from '@mapbox/react-native-mapbox-gl';

const styles = MapboxGL.StyleSheet.create({
  icon: {
    iconImage: '{icon}',
    iconAllowOverlap: true,
    iconSize: 0.25,
  },
});

class UserMarkers extends React.Component {
  static propTypes = {
    /**
     * Users object data
     */
    userFeatureCollection: PropTypes.object.isRequired,

    /**
     * Override any default styles on the inactive marker layer
     */
    style: PropTypes.any,

    /**
     * Override any default styles on the active marker layer
     */
    activeStyle: PropTypes.any,
  };

  constructor (props) {
    super(props);
  }

  render () {
    if (!this.props.userFeatureCollection) {
      return null;
    }

    let images = null;
    this.props.userFeatureCollection.features.forEach((feature) => {
      images = Object.assign({}, images, {
        ['user-icon-' + feature.properties.id]: {uri: feature.properties.profilePicWidth100}
      })
    });

    if (images === null) {
      return null;
    }

    return (
      <MapboxGL.ShapeSource id='example-map-users-source' images={images} shape={this.props.userFeatureCollection}>
        <MapboxGL.SymbolLayer
          id="example-user-map-marker"
          style={styles.icon}
        />
      </MapboxGL.ShapeSource>
    );
  }
}

export default UserMarkers;

Hope this helps :)

Oct 23 '18 19:10 engelzero

@seeya PS: that's the array structure of the prop userFeatureCollection I'm passing in. We are using websocket to update these map marker states on locationChange via geolocation api.

    {
              id: userId,
              type: 'Feature',
              properties: {
                id: userId,
                firstName,
                profilePicWidth100,
                icon: 'user-icon-' + userId,
              },
              geometry: {
                type: 'Point',
                coordinates: [
                  long,
                  lat,
                ]
              },
            }

Oct 23 '18 19:10 engelzero

+1. I've tried putting image behind circlelayer without success. Anyone have a solution to this?