nitaliano / react-native-mapbox-gl Goto Github PK

It would be a great addition to have offline support, i.e. caching certain regions on first app start (or bundle them?) and then using them if the user is not connected to a network.

I'm not sure if this is possible, or too much effort, but I'd love that.

• remove pod install
• bundle all mapboxGL header files in project

So events can happen without having to redraw the view:

• resetNorth()
• setCenterCoordinate:animated

We're looking into how to draw lines for routing, but there doesn't seem to be an example. This would be extremely helpful.

Hey,

I'm currently working on a project using react-native 0.5.0, which obviously isn't ^0.4.3. Any ideas if/when this module will be usable with 0.5.0?

Cheers!

https://github.com/mapbox/react-native-mapbox-gl/blob/master/RCTMapboxGL.ios.js#L97

This should use getDefaultProps http://facebook.github.io/react/docs/component-specs.html#getdefaultprops

The existing code mutates props accidentally.

I'm having a lot of trouble firing off selectAnnotationAnimated in the onUpdateUserLocation. I'm not trying to do anything crazy, just open up an annotation when the user is close to a point. It gives me EXC_BAD_ACCESS errors. Here is some code:

  onUpdateUserLocation(location) {
    var current_lat = location.latitude;
    var current_long = location.longitude;
    this.setCenterCoordinateAnimated(mapRef, current_lat, current_long);
    var locations = this.getInitialState();
    var locations = locations.annotations;

    for (var i = 0; i < locations.length; i++) {
        var distance_from_point = this.distance(current_lat, current_long, locations[i].latitude, locations[i].longitude)
        if (distance_from_point < .01) {
            // you are close to a pin on the map, so do something
            this.selectAnnotationAnimated(mapRef, i);
        }
    }
  }

Other methods seem to work just fine. Anyone have any idea why I'm having issues with this one? I've barely modified the example, so there's not much going on here that isn't going on there.

The ideal install for this module is:

npm install --save react-native-mapbox-gl

This should install the node module, load the mapbox gl native dependency, and compile it so you can immediately require('react-native-mapbox-gl'). Let's figure out what needs to happen to get there.

Wondering if a property already exists to jump to a location or specific coordinates. I want to add a search bar at the top where a user can enter coordinates and the map will jump to them. If its not already implemented i would like to help but need some guidance :)

It would be nice if i could pass an array of objects that specified coordinates, a name, icon, etc. to display markers. I'd love to be able to show markers for search results. Let me know if i can help :)

• pan
• zoom

• turf
• geocoding
• routing

I'm thinking that these ship with the module instead of having them be separate dependencies/repos.

They should have identical APIs. ref: https://www.mapbox.com/mapbox-gl-ios/api/Classes/MGLMapView.html#properties

Are custom markers available yet?

Regards,

https://github.com/mapbox/react-native-mapbox-gl/blob/master/scripts/download-mapbox-gl-native-ios.sh#L20

secure by default ftw

When I have a view with a mapview, and I push another view on top of it with the navigator, if I pop back to the view containing the mapview, all annotations are gone.

Only thing I see in xcode's logs is: Can't find sprite named 'com.mapbox.sprites.marker0', 'marker0' being one the ids of my annotations.

/cc @1ec5

Inside of Mapbox.bundle contains a bunch of styles. These should be used in the example and also on the list in the readme.

I think this would be cool, would include most of the install guide just minus the pictures.

.

Should return

• lat/lng
• title
• subtitle
• position in annotation array?

ref https://www.mapbox.com/mapbox-gl-ios/api/Classes/MGLMapView.html#//api/name/selectAnnotation:animated:

I followed the instructions here: https://github.com/mapbox/react-native-mapbox-gl/blob/master/install.md

However, I still get this in my debugger:

Warning: Native component for "RCTMapboxGL" does not exist

The only irregularity during the steps was that for step 4, the file libRCTMapboxGL.a doesn't actually exist - possibly renamed to libMapboxGL.a (as this is the only *.a file in that directory)?

Docs

I've created a sophisticated background-geolocation plugin (ported from my popular Cordova plugin which intelligently monitors the user's movement-state and only engages locationManager when device is determined to be moving (and stops locationManager when the device has stopped).

Because my plugin sets NSLocationAlwaysUsageDescription, react-native-mapbox-gl will keep locationManager updating the location even when the device goes to the background, which kills the battery in a short time, of course. This is what my plugin resolves.

In spite of what this link says.

How does background location data affect device battery usage? We determined that background
location data is not a significant hit to the battery through extensive testing. You can read about how we
tested the battery on the blog.

After over 2 years experience creating Android/iOS background geolocation code, keeping locationManager always running in background WILL certainly kill the battery in a very short time.

This is what my plugin resolves.

A simple (very raw) solution in RCTMapboxGL.m goes like this:

- (void)createMap
{
    [MGLAccountManager setAccessToken:_accessToken];
    _map = [[MGLMapView alloc] initWithFrame:self.bounds styleURL:_styleURL];
    _map.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    _map.delegate = self;
    _map.userTrackingMode = MGLUserTrackingModeFollow;
    [self updateMap];
    [self addSubview:_map];
    [self layoutSubviews];

    // Solution:  Listen to pause/resume events so we can start/stop locationManager
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(onSuspend:) name:UIApplicationDidEnterBackgroundNotification object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(onResume:) name:UIApplicationWillEnterForegroundNotification object:nil];
}

- (void) onSuspend:(NSNotification*)notification
{
    // Stop updating location.  
   _map.showsUserLocation = NO;
}
- (void) onResume:(NSNotification*)notification
{
     // Restore updating locations
    _map.showsUserLocation = YES;
}

Thoughts?

I just went through the installation steps and had a successful build but only see a white screen. I also replaced the access token with my own but it still shows the white screen. Any ideas?

Right now, the UIView is set to 100% the height and width. This is accomplished by:

CGFloat width = [UIScreen mainScreen].bounds.size.width;
CGFloat height = [UIScreen mainScreen].bounds.size.height;
CGRect windowFrame = CGRectMake(0, 0, width, height);

MGLMapView *map = [[RCTMapboxGL alloc] initWithFrame:windowFrame accessToken:@"placeHolder"];
map.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
map.clipsToBounds = YES;

code

There is an issue with this method: if the map is not set to 100% the screen width and height, markers and marker popups are shifted by the difference in the screen height and/or width minus the actual screen width and or height. Example:

Possible Solutions:

1. Wait until the <MapboxGLView /> has been added, then set the map height and width to this size
2. Listen for resize events, resize the map accordingly
3. Does UIView have some sort of ViewDidLoad event? Listen for this, get bounds
4. ?

Setting MGLMapView *map = [[RCTMapboxGL alloc] initWithFrame:self.window.bounds accessToken:@"placeHolder"]; fails with the following error:

Failed: Current draw framebuffer is invalid.
libc++abi.dylib: terminating with uncaught exception of type mbgl::util::ShaderException: Program plain failed to link: Validation Failed: Current draw framebuffer is invalid.

Under Breaking Changes here: https://github.com/facebook/react-native/releases/tag/v0.4.3

"If you were using the undocumented createReactIOSNativeComponentClass or ReactIOSViewAttributes to create iOS wrappers, now you should use requireNativeComponent"

Also.. Is ReactIOSViewAttributes being consumed?

Hi ,
I just followed instructions mentioned in readme

  "dependencies": {
    "react-native": "^0.4.3",
    "react-native-mapbox-gl": "^0.1.1"
  }

Am i missing something ?

I'm trying to update an annotation's image when it is selected.

So I added a onTapAnnotation handler, but when I try to update the state of my react view, it breaks complaining that I'm trying to mutate an immutable object.

It's a little large right now. I think the readme should have an overview of the project then link to separate install.md and api.md files.

Every load encounters a [ERROR] [Database](5): database is locked. I think this has to do with #5

Allow ability to have map show directions, and map path from start to destination, along with distance away, and estimated ETA.

I'm trying out the example code in the README, seems to work except that the map doesn't render. No errors in the console. Any ideas?

If you only render one MapboxGLView, the map is pink and no tiles load.

I tried using a local assets for an annotation's annotationImage url, and it crashed on the device, but works on the simulator.

If the map view is not full screen, markers are shifted north by the difference in the the map size to the size of the screen.

This has to do with the way the map size is calculated and not refreshed in mapbox-gl.

the user location should be cupertino here

Hello there,

After installing the component, decided to run the Example Code (https://github.com/mapbox/react-native-mapbox-gl/blob/master/example.js).

Map doesn't seem to be loading even though I have placed an accessToken.

Thanks,

Screenshot:

Do you have plans to do this soon? Would be amazing to use mapbox. and awesome animations.