Maps: UserLocation passed children not rendered

[ferdicus]

Describe the bug
Pass a child into UserLocation isn't rendered.

To Reproduce
I've tried several iterations, however I believe this is how the api is supposed to be used?
Correct me if I'm wrong:

<MapboxGL.UserLocation
  renderMode="custom"
  visible
  animated
  onUpdate={myUserLocationUpdateCallback}
>
  <View style={{ height: 10, width: 10, backgroundColor: 'red' }} />
</MapboxGL.UserLocation>

Expected behavior
Passed child is rendered

Versions:

• Platfrom: Android
• Device: LG Q7
• OS: Android 8
• React Native Version [0.61.2]

Additional context
Maybe I'm supposed to pass it in another way or set other props correctly?

[kristfal]

Hey,

native components such as views can't be passed as children inside the MapView. Only mapbox-gl-native components can.

I'm guessing you want to pass in a symbol layer with an icon or something. If that is the case, you can do something like:

<MapboxGL.UserLocation renderMode={'custom'}>
  <MapboxGL.SymbolLayer
    id={'custom-user-symbol'}
    style={{
      iconImage: 'your-icon',
      iconRotationAlignment: 'map',
      iconAllowOverlap: true,
    }}
  />
</MapboxGL.UserLocation>

your-icon needs to be loaded like any other mapbox icon.

[ferdicus]

Ah, ok, I was confused by the types I guess: https://github.com/react-native-mapbox-gl/maps/blob/master/index.d.ts#L407

I will try that out and report back.

Thanks you kristfal

[ferdicus]

Can confirm, that it works like you mentioned 👍

My example:

<MapboxGL.UserLocation
  renderMode={'custom'}
  onUpdate={this.onUserLocationUpdate}
>
  <MapboxGL.SymbolLayer
    id="myMarker"
    style={myStyles}
    aboveLayerID="myAboveLayer"
  />
</MapboxGL.UserLocation>

[kristfal]

Great. Btw, happy to see a tighter typescript definition for this if you
have time for a PR :)

On Fri, 8 Nov 2019 at 12:35, Kid Commit [e-mail] wrote:

Can confirm, that it works like you mentioned 👍

My example:

renderMode={'custom'}

onUpdate={this.onUserLocationUpdate}
>

id="myMarker"

style={myStyles}

aboveLayerID="myAboveLayer"

/>

—
You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub
https://github.com/react-native-mapbox-gl/maps/issues/511?email_source=notifications&email_token=ABLAPW4GJNGJUXXDGV3VHJ3QSVFJFA5CNFSM4JJVGIO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDQUKXA#issuecomment-551634268,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABLAPW2FWTSN4FJWLUNXY6TQSVFJFANCNFSM4JJVGIOQ
.

[ferdicus]

yeah, that and I would love to update the docs for the new apis.
Just need to find the time :(

[iraniamir]

There is no way to make custom style with MapboxGL.SymbolLayer ? for example make circle view in special size and background image ?

[ako977]

Hate to beat a dead horse but...
Is 'custom' renderMode no longer supported? It is no longer in the docs and this recent issue only refers to two modes (nomal/native): https://github.com/react-native-mapbox-gl/maps/issues/869

[ferdicus]

Hate to beat a dead horse but...
Is 'custom' renderMode no longer supported? It is no longer in the docs and this recent issue only refers to two modes (nomal/native): #869

What exactly do you mean by "custom" - if you're talking about passing children to the UserLocation component, that's still supported.

[ako977]

What exactly do you mean by "custom" - if you're talking about passing children to the UserLocation component, that's still supported.

Yes, I am referring to an example like this:

<MapboxGL.UserLocation
  renderMode={'custom'}
  onUpdate={this.onUserLocationUpdate}
>
  <MapboxGL.SymbolLayer
    id="myMarker"
    style={myStyles}
    aboveLayerID="myAboveLayer"
  />
</MapboxGL.UserLocation>

When I try to implement a custom marker in version 8.2.0-beta1, I get no marker appearing (no crash or error thrown either), setting a symbolLayer with sourceLayer wrapping it instead of userLocation shows the image source just fine, also setting 'normal' for UserLocation with no children shows the default user location marker as expected.

The docs also do not state a 'custom' renderMode option: https://github.com/react-native-mapbox-gl/maps/blob/8.2.0-beta1/docs/UserLocation.md

[ferdicus]

The custom flag was removed as it's a bit superfluous - as soon as a child is passed it should take precedence over the default icon.
See relevant code:
https://github.com/react-native-mapbox-gl/maps/blob/a1a95722b4a7f3da35ef48e258785fc79a02b39a/javascript/components/UserLocation.js#L263-L275

So this:

<MapboxGL.UserLocation
  onUpdate={this.onUserLocationUpdate}
>
  <MapboxGL.SymbolLayer
    id="myMarker"
    style={myStyles}
    aboveLayerID="myAboveLayer"
  />
</MapboxGL.UserLocation>

"should" work - I can have a look, however earliest on Friday

[ako977]

Thanks in advance for verifying, I will take a look at my code again, perhaps it's on my end.

From the source of UserLocation it also looks like I cannot set my own coordinates in situations where I want to override the position; I suppose I would need to extend the UserLocation component and overwrite the _onLocationUpdate function

[systemlevel]

This works for us to display custom location icons as children:

                <Mapbox.UserLocation
                    visible={true}
                    ref={mainMapUserLocationRef}
                    children={[
                        <Mapbox.SymbolLayer
                            key="symbolLocationSymbol"
                            id="symbolLocationSymbol"
                            minZoomLevel={1}
                            style={
                                Platform.OS === 'ios' ? (
                                    {
                                        iconImage: locationIconTracking,
                                        iconAllowOverlap: true,
                                        iconRotate: userHeading - mapHeading,
                                        iconSize: 0.08
                                    }
                                ) : (
                                    {
                                        iconImage: locationIconTrackingAndroid,
                                        iconAllowOverlap: true,
                                        iconRotate: 0,
                                        iconSize: 0.1
                                    }
                                )
                            }
                        />
                    ]}
                />

[ako977]

Just to tie this altogether. I now know why I was not getting the custom icon.
The culprit was including this prop: renderMode={'custom'}.

Basically I was following the old docs which expected 'custom'. However in the latest version of the library, this makes the userLocation marker simply disappear.

Changing renderMode to 'normal' or removing the prop completely solves the problem.

Thank you