Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Jan 31 2019 23:05
  • Jan 31 2019 19:48
    mwebdev1 edited #1496
  • Jan 31 2019 19:43
    mwebdev1 edited #1496
  • Jan 31 2019 19:42
    misaku opened #1497
  • Jan 31 2019 19:41
    mwebdev1 edited #1496
  • Jan 31 2019 19:41
    mwebdev1 opened #1496
  • Jan 31 2019 19:37
  • Jan 31 2019 19:29
    JGeraldoLima commented #1409
  • Jan 31 2019 19:27
    JGeraldoLima commented #1409
  • Jan 31 2019 19:27
    JGeraldoLima commented #1409
  • Jan 31 2019 16:14
    klase edited #1495
  • Jan 31 2019 16:14
    klase edited #1495
  • Jan 31 2019 16:12
    klase opened #1495
  • Jan 31 2019 13:58
    vedovato commented #1375
  • Jan 31 2019 13:52
    vedovato commented #1375
  • Jan 31 2019 13:08
    xuopled opened #1494
  • Jan 31 2019 11:14
    xuopled opened #1493
  • Jan 31 2019 06:04
    DennisMuchiri commented #771
  • Jan 31 2019 02:09
    christianbermejo starred mapbox/react-native-mapbox-gl
  • Jan 31 2019 02:04
    RobertStuff commented #971
Mischa Zurke
@mzu
When using aboveLayerID in SymbolLayer: Is there a way to still allow the rendering of the SymbolLayer in the case that the layer specified in aboveLayerID was currently not rendered on the map? Currently it requires the layer in aboveLayerID to be present.
2 replies
Arturo-dot
@Arturo-dot
Hello guys, how is it possible to cluster ?
1 reply

` <MapboxGL.MapView mapRef={MapView => (this.map = MapView)}
style={styles.map}
logoEnabled={false}
compassEnabled={false}
attributionEnabled={false}
userTrackingMode={1}>
<MapboxGL.Camera zoomLevel={8} centerCoordinate={[ this.state.region.longitude, this.state.region.latitude, ]} />

      {this.state.filteredmarkers.map((marker, index) => {
        if (can) {
          const scaleStyle = {
            transform: [
              {
                scale: interpolations[index].scale,
              },
            ],
          };
          const opacityStyle = {
            opacity: interpolations[index].opacity,
          };
          console.log(JSON.stringify(marker));
          return (
            <MapboxGL.PointAnnotation
              key={index.toString()}
              id={index.toString()}
              title="Test"
              coordinate={[
                marker.coordinate.longitude,
                marker.coordinate.latitude,
              ]}>
              <Icon
                key={index}
                size={20}
                name={Images[0][marker.lastTransport.type]}
                type={Images[1][marker.lastTransport.type]}
                color="rgba(223, 101,71,1)"
              />
            </MapboxGL.PointAnnotation>
          );
        }
      })}
    </MapboxGL.MapView>

`
this is how i render my markers, but is clustering achievable with pointAnnotation?

Matthew V Charland
@charm0900
Hi, any suggestions on whether to use pointAnnotation vs ShapeSource if I want to have a marker with a callout but also a onLongPress feature. I current have pointAnnotation displaying and selectable but on iOS once its opens the call out it will not close. I was attempting to do this with ShapeSource but I'm very confused looking at GitHub issues in the past. any resources on to how to display a marker with ShapeSource
4 replies
benandrew
@benandrew
Hey there, any way to make UserLocation popup with the permission request on first launch?
Kid Commit
@ferdicus

Hey there, any way to make UserLocation popup with the permission request on first launch?

Can you explain your usecase a bit more please?

Victor Carvalho
@victor0402
Hi, I would like to show to the user an indicator that the ShapeSource is loading its url data, is it possible?
I have a view just like this: https://github.com/jeremybarbet/mapbox-shapesource-issue/blob/master/App.js
where I'm loading a different URL depending on what the user chooses. When the URL changes there is a delay of a few seconds until it gets visible on the screen, which is expected given the size of the geojsons, but I would like to show to the user that the data is loading with a Spinner on the screen, and when it finishes loading I'll hide the spinner. Is it possible?
6 replies
Matthew V Charland
@charm0900
Hi, is there anyway to remove a shape source when pressed on?
1 reply
Maxim Chernyshov
@designervoid
hello all. i have extremly low frame rate on ios. how can i fix this issue? i have bare react app with only mapbox maps downloaded
Matthew V Charland
@charm0900
image.png
Hi, I am looking to have my pins always be above my line strings they are too separate shape sources. I assumed that if I placed the line first the pins would always be above it but it seems that's not the case. Is there some type of position for ShapeSource determining if it will be higher than another? if not how could I go about rectifying this?
3 replies
Neeraj Lagwankar
@FlashBlaze

Hi, is it possible to style different types of roads? In Mapbox Studio you can style road-primary for example, but if i give sourceLayerId='road-primary' style={{lineColor: '#f4266b'}} nothing happens. Here is my component

const App = () => {
  const {Camera, LineLayer} = MapboxGL;

  React.useEffect(() => {
    MapboxGL.setTelemetryEnabled(false);
  }, []);

  return (
    <View style={styles.page}>
      <View style={styles.container}>
        <MapboxGL.MapView
          styleURL="mapbox://styles/mapbox/streets-v11"
          style={styles.map}
          compassEnabled
          compassViewPosition={2}>
          <LineLayer
            id="roadPrimary"
            sourceLayerID="road-primary"
            style={{lineColor: '#f4266b'}}
          />
          <Camera centerCoordinate={[-121.383, 38.63]} zoomLevel={12} />
        </MapboxGL.MapView>
      </View>
    </View>
  );
};

Am I missing anything here?
Thanks

5 replies
Omar Monrroy
@Drk01
Hi, Can anybody help me please?
When i try to implement mapbox using the code example, Android emulator displays "MapBoxGL is undefined"
1 reply
Omar Monrroy
@Drk01
imagen.png
robomanus
@robomanus
This message was deleted
1 reply
robomanus
@robomanus

As my previous question solved by itself, have another one)
Could someone help with additional information about 'MapboxGL.Animated'

I saw it this issue - nitaliano/react-native-mapbox-gl#1630 and in example 'AnimatedLine.js', but can't find any additional info in manuals

Robin
@boldtrn
When using React Native with Mapbox, wouldn't it be possible to either use react-native-mapbox-gl or to use the native components from Mapbox like mapbox-gl-native-android? Or are there any issues with mixing react-native with "Native Modules"?
3 replies
hevar
@hevar

Hey! I've notice that when I try to place multiple <Views> inside a <MapboxGL.PointAnnotation /> only the one rendered last is visible on android (it works as expected on ios).

The difference is that I have multiple <View> to create a pin, on android it seems like one view block the other and there for only the triangle part of the pin is rendered. Please see the images linked to see the difference.

Below Ive provided some code that and images of how it looks on IOS and android.

Any advice is appreciated since I can't seem to figure out why, thanks in advance!

"@react-native-mapbox-gl/maps": "7.0.7",
"react-native": "^0.63.4",

Relevant parts of the code:

<MapboxGL.MapView
                style={{ flex: 1 }}
                onPress={onPress}
                onLongPress={onPress}
                followUserLocation={showUserLocation}
                followUserMode={MapboxGL.UserTrackingModes.FollowWithHeading}
                scrollEnabled={movable}
                zoomEnabled={movable}
                styleURL={houseNumberStyle}
            >
                <MapboxGL.UserLocation showsUserHeadingIndicator={true} visible={showUserLocation} />
                <MapboxGL.Camera zoomLevel={zoomLevel} centerCoordinate={coordinates} animationMode={"moveTo"} />

                {this.renderAnnotation()}
                {this.renderStopAddress()}
            </MapboxGL.MapView>
private renderAnnotation = () => {
        const { coordinates, stopsLeft, currentStop } = this.props

        if (coordinates.length === 0) {
            return
        }

        const selectedStopIndex = stopsLeft.map((stops) => stops.id).indexOf(currentStop.id)

        const nextFourStops = stopsLeft.slice(selectedStopIndex, selectedStopIndex + 5)

        const items = []

        for (const [index, item] of nextFourStops.entries()) {
            const parsedCoordinates: number[] = toPointArray(item.address.coordinate)

            const color = index > 0 ? null : markerColors[index]

            const pinStyle = generateMapPinStyle(color)

            items.push(
                <MapboxGL.PointAnnotation coordinate={parsedCoordinates} id={`${item.id}`} key={item.id}>
                    <View style={pinStyle.circle}>
                        <Text style={pinStyle.text}>{item.sequence}</Text>
                    </View>
                    <View style={pinStyle.pin} />
                </MapboxGL.PointAnnotation>,
            )
        }

        return items
    }

const generateMapPinStyle = (color?: string, opacity?: number) => {
    const pinColor = color || "#7c7c7c"
    const pinOpacity = opacity || 0.9

    return StyleSheet.create({
        circle: {
            height: 30,
            width: 30,
            backgroundColor: "white",
            borderRadius: 15,
            borderWidth: 3,
            borderColor: pinColor,
            borderStyle: "solid",
            padding: 2,
            justifyContent: "center",
            position: "absolute",
            bottom: 26,
            opacity: pinOpacity,
        },
        pin: {
            position: "absolute",
            width: 0,
            height: 0,
            bottom: 0,
            borderWidth: 9,
            borderColor: "transparent",
            borderTopWidth: 20,
            borderTopColor: pinColor,
            opacity: pinOpacity,
        },
        text: {
            fontWeight: "bold",
            fontSize: 11,
            textAlign: "center",
            color: "black",
        },
    })
}

Android version: LINK to img

IOS version: LINK to img

6 replies
robomanus
@robomanus
Hi to all,
Is any option somehow to show user position always in the lower part of the screen in the 'course' mode, as in navigation mode, but just for simple geojson linestring?
Thanks
2 replies
Maxim Chernyshov
@designervoid

hello all. i have extremly low frame rate on ios. how can i fix this issue? i have bare react app with only mapbox maps downloaded

still actual

3 replies
benandrew
@benandrew
Anyone have any advice for getting 3D terrian?
Mohamad Rahimi
@rahimiam
Hi to all,
I want to Generate multiple markers on map add a onPress Event for each one that trigger a function with marker id. but I dont know how, and can not find anything helpful. can anybody help? please!
1 reply
nullgr4vity
@nullgr4vity

good afternoon guys,

I'm fighting with a crash react-native application on unblocking iPhone which is somehow connected with react-native-mapbox-gl module.

I use "@react-native-mapbox-gl/maps": "^8.1.0-rc10"

scenario:

  1. launch the application
  2. application load and show map and user location
  3. block ios by clicking the right button (application is on front)
  4. unblock ios, there is no application on the front (application crashed), I need to launch it again.

in sentry I see such message:

EXC_BAD_ACCESS

getBytes:bytesPerRow:bytesPerImage:fromRegion:mipmapLevel:slice: >
Attempted to dereference null pointer.

Crashed in:
Mapbox +0x3638e0 MGLStringFromMetricType

this problem is not exist when I move app into background and then block iPhone. after unblocking everything is correct. the only situation when app crash is when I block iPhone with application on front.


my component looks pretty simple:

      <View style={styles.container}>
        <MapboxGL.MapView
          ref={mapRef}
          style={{ flex: 1 }}
          styleURL={themeURL}
          onRegionDidChange={onRegionDidChange}
        >
          <MapboxGL.Camera
            ref={mapCameraRef}
            zoomLevel={mapZoomDefaultValue}
            pitch={0}
            heading={-60}
            duration={1}
            followUserLocation={!isUserInteract}
          />
          <MapboxGL.UserLocation showsUserHeadingIndicator={true} />
          <View>
            <UserLayer
              {...props}
              variant="map"
              isCenterMapVisible={isUserInteract}
              onHandlePressCenterMap={onCenterMap}
            />
          </View>
        </MapboxGL.MapView>
      </View>

has anyone similar problem in the past ? or experience with such problem ?

3 replies
Hanno J. Gödecke
@hannojg
Hey,
is it possible to "compose" multiple SymbolLayer within a ShapeSource?
Something like this:
          <MapboxGL.ShapeSource
            id="events"
            cluster
            clusterRadius={70}
            clusterMaxZoomLevel={14}
            url="https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson">
            <MapboxGL.SymbolLayer
              id="pointCount"
              style={layerStyles.clusterCount}
            />

            <MapboxGL.SymbolLayer //<- when this is a a CircleLayer everything works
              id="clusteredPoints"
              belowLayerID="pointCount"
              filter={["has", "point_count"]}
              style={layerStyles.clusteredPoints}
            />
Hanno J. Gödecke
@hannojg
Quick question, is it possible that ShapeSource.feature(...) isn't implemented on iOS yet? About to solve this issue react-native-mapbox-gl/maps#1138 and I don't see any traces in the iOS source code for it
2 replies
ehsanali1992
@ehsanali1992
Hello everyone,
Is it possible to overlay a component at specific Lat Lng on Map? For example react-native-map provides overlay component to overlay only an image on specific lat lng.
https://github.com/react-native-maps/react-native-maps/blob/master/docs/overlay.md
A little help would be much appreciated.
Kid Commit
@ferdicus

Hello everyone,
Is it possible to overlay a component at specific Lat Lng on Map? For example react-native-map provides overlay component to overlay only an image on specific lat lng.
https://github.com/react-native-maps/react-native-maps/blob/master/docs/overlay.md
A little help would be much appreciated.

check this out: https://github.com/react-native-mapbox-gl/maps/blob/master/example/src/examples/ImageOverlay.js

2 replies
Alexandre Oliveira
@Xinayder
how can I apply a different scale to a circle layer according to zoom level? I want to draw a circle with 1km radius and resize it according to the zoom level so it doesn't look off
5 replies
Miklós Fazekas
@mfazekas
@Xinayder you should be able to do that with expressions
Paris Kourpidis
@KourpidisParis
Hello, I want to ask a question about the possibilities of the library ( https://github.com/react-native-mapbox-gl/maps)

I am copying the text I wrote on github :
I recently found your library and it looks quite interesting.

I want to create a simple navigation application, for example from one city to another.

As I am new to mobile development, I want to ask if the final destination can be hidden, ie the user may not be able to see the final destination.All he can see is what the next turn he will need to take and more about navigation.

Is it possible to create something like this with this library?

1 reply
Matthew V Charland
@charm0900
Hi, Is anyone aware of a way to force street name labels to appear over a shape line layer?
3 replies
Shay Tessler
@shay-te
Hello guys. How to detect if a location is "water" or "land" etc..?
https://github.com/react-native-mapbox-gl/maps/discussions/1165
4 replies
John Stowell
@nzjs
Hey all. I'm looking for some help with _map.queryRenderedFeaturesAtPoint().
It works for me and I have five layers that I can query at a time. This works fine.
However I want to be able to identify the layer as a title in the results... I see there's a property returned "id" but something such as layer-5324423-etc doesn't even correspond to my layer IDs... any ideas?
John Stowell
@nzjs
Hoping there's a better way for others, but I hacked the layer titles together by querying field names on various datasets lol
nhatvuminh
@nhatvuminh
Stefan28BU
@Stefan28BU
Anyone has any issue with setting center coords?
some locations can't be recognized
I tried the examples as well, some coords just doesn't seem to work, for example [39.916668, 116.383331]
Marc Rousavy
@mrousavy

Hey guys! I'm having a special case where my map is inside of a pan gesture handler. (similar to snapchat)
This makes it really weird to move the map around, so I've decided to only allow the user to move the map around in the left 90% of the map view, and in the remaining 10% the outer pan gesture handler should pick up the gesture.
I've successfully implemented the outer gesture handler to not even go into BEGAN state when the touch didn't start within the right 10%, but I can't manage to achieve the same for the map's Pan/Move gesture handler.
On Android, I've tried to use the AndroidGestureManager's OnMoveGestureListener and returned false if the x coord wasn't within the left 90% of the view, but that didn't change anything - I think that's too late for the gesture, since it goes BEGIN -> CANCELLED, and I don't even want it to go into BEGIN state at all. I haven't looked into iOS yet, but it looks like I have access to the UIPanGestureResponder there.

Is this supported? Are there any workarounds for this?

Matthew V Charland
@charm0900

Hi, I'm having an issue with the camera. Once the camera is changed to user follower mode and the pitch and zoom changes I want to be able to change it back to the settings before user follower mode became true. I assume that the way to achieve this would be with the setCamera function but I am unsure how the configurations work. Would anyone be able to steer me in the right direction. The example on GitHub looks like this:

this.camera.setCamera({
stops: [
{ pitch: 45, animationDuration: 200 },
{ heading: 180, animationDuration: 300 },
]
})

1 reply
507228905
@507228905
hello I hava a problem ,android Mapbox error {com.testapp}[Setup]: loading style failed: failed to connect to api.mapbox.com/13.226.114.239 (port 443) from /192.168.100.7 (port 44766) after 10000ms {"level": "error", "message": "{com.testapp}[Setup]: loading style failed: failed to connect to api.mapbox.com/13.226.114.239 (port 443) from /192.168.100.7 (port 44766) after 10000ms", "tag": "Mbgl"}
1 reply
nullgr4vity
@nullgr4vity
hi guys, how's you weekend ? is it possible to configure camera this way to have 3rd person perspective ?
3 replies
nullgr4vity
@nullgr4vity
what is difference between defaultSettings.centerCoordinate vs centerCoordinate ?
1 reply
iandev096
@iandev096
Hello, I am having issues displaying images in a Callout nested in a PointAnnotation.
1 reply
<MapboxGL.PointAnnotation
          key="pointAnnotation"
          id="pointAnnotation"
          anchor={{x: 0.5, y: 0.5}}
          coordinate={currentLocation}>
          <View
            style={{
              height: 19,
              width: 19,
              backgroundColor: colors.primary,
              borderRadius: 50,
              borderColor: 'rgba(255,255,255,0.7)',
              borderWidth: 4,
            }}
          />
          <MapboxGL.Callout title="This is a sample">
            <View
              style={{
                borderRadius: 8,
                padding: 5,
                width: 300,
                alignItems: 'center',
              }}>
              <Image source={peopleImages[0]} resizeMode="contain" />
            </View>
          </MapboxGL.Callout>
        </MapboxGL.PointAnnotation>
Darren Labrum
@systemlevel

Good news. Mapbox SDK version 10 has been released and it looks like an amazing upgrade with some meaningful performance enhancements and new features like 3D.

https://docs.mapbox.com/ios/beta/maps/guides/migrate-to-v10/

Looks like it requires some updates to our react-native-mapbox-gl library to be able to use.