Giter Site home page Giter Site logo

rnmapbox / maps Goto Github PK

View Code? Open in Web Editor NEW
2.0K 36.0 809.0 35.16 MB

A Mapbox react native module for creating custom maps

License: MIT License

JavaScript 14.31% Java 5.67% Ruby 0.60% Objective-C 1.81% Shell 0.02% Starlark 0.06% TypeScript 19.32% EJS 1.05% C 0.12% Swift 19.84% Objective-C++ 4.87% Kotlin 32.35%
mapbox react-native mapbox-gl-native map expo maplibre

maps's Introduction

Mapbox Maps SDK for React Native

npm version iOS & Android Build

A community-supported, open-source React Native library for building maps with the Mapbox Maps SDK for iOS and Mapbox Maps SDK for Android


News & Discussions

โ†’ Call for additional maintainers discussion thread



Supported Implementations

At the moment we support Mapbox (v10) and Mapbox (v11) beta. We default to Mapbox (v10).

See iOS & Android setup guide for using v11 beta

Prerequisite

  1. Please Sign Up to Mapbox to get the Mapbox Access Token.

Dependencies

Installation

Check our Installation instructions

Getting Started

For more information, check out our Getting Started section

Run Project

Before you run your project be sure you have completed the Installation Guides for Android or iOS.

Run iOS Simulator

# Run with yarn
yarn run ios

# or Run with NPM
npm run ios

Run Android Emulator

# Run with yarn
yarn run android

# or Run with NPM
npm run android

Adding a map

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Mapbox from '@rnmapbox/maps';

Mapbox.setAccessToken('<YOUR_ACCESSTOKEN>');

const App = () => {
  return (
    <View style={styles.page}>
      <View style={styles.container}>
        <Mapbox.MapView style={styles.map} />
      </View>
    </View>
  );
}

export default App;

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    height: 300,
    width: 300,
  },
  map: {
    flex: 1
  }
});

Documentation

Components

Sources

Layers

Terrain

Offline

Misc

Expo Support

This package is not available in the Expo Go app. Learn how you can use it with custom dev clients.

Testing with Jest

This library provides some mocks which are necessary for running tests.

Example:

"jest": {
  "preset": "react-native",
  "setupFilesAfterEnv": ["@rnmapbox/maps/setup-jest"],
  "transformIgnorePatterns": [
      "node_modules/(?!(...|@rnmapbox))"
  ]
}

Sponsors

Help drive this repo forward - be a sponsor. Add a comment here to discuss your sponsorship.

Scout To Hunt Terrain Dance LLC

Scout To Hunt

Terrain Dance

Developer Group

Have a question or need some help? Join our Gitter developer group!

maps's People

Contributors

1ec5 avatar aimroboticsbying avatar dapetcu21 avatar dependabot[bot] avatar depfu[bot] avatar ericpkerr avatar ferdicus avatar gp2mv3 avatar henninghall avatar hernanmateo avatar ivari avatar janicduplessis avatar jerolimov avatar jesseditson avatar kiwikilian avatar kristfal avatar lisabaut avatar mattijsf avatar mfazekas avatar mysport12 avatar naftalibeder avatar nitaliano avatar rastapasta avatar robertsasak avatar systemlevel avatar tmcw avatar tsemerad avatar volkerlieber avatar wolewicki avatar zugaldia avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

maps's Issues

[Android]: Map zoom isn't smooth like iOS, very choppy?

We've been using react native mapbox for awhile and still haven't quite figured out to why the android map experience is pretty subpar to how the iOS experience handles zoom on the map.

When users zoom with the iOS version it's smooth. However on android it seems like it has slow fps and the zoom doesn't seem to be elastic.

What I mean by elastic is when you zoom out or zoom in on say react native maps, the action of zooming doesn't stop when you take your fingers off the screen. But with mapbox is seems to perform some sort of elastic animation then abruptly stops (on android), making the zooming experience feel a bit choppy and not as good as iOS...

Post-Expressions Update: Initial Map Zoom and Coords Not Correct

Describe the bug
Initial Map Zoom and Coords Not Correct
Reference #4

To Reproduce
With newest expression merged on master installed, load map with initial center and coordinates defined:

      <Mapbox.MapView
        zoomLevel={8}
        centerCoordinate={[-111.8678, 40.2866]}
        style={styles.map}
        showUserLocation={true}
>

Expected behavior
Map zoom/center coords should load initially as before.

Screenshots
Resulting map regardless of center/coords defined:

Screen Shot 2019-04-30 at 4 30 53 PM

Versions (please complete the following information):

  • Platfrom: iOS
  • Device: Simulator Xr
  • React Native Version 0.59

Additional context

A big thank you and shoutout to @mfazekas for the recent expressions updates. The good news is we have the newest custom maps in Mapbox Studio working and displaying:

Screen Shot 2019-04-30 at 4 48 52 PM

map graphics artifacts and fragments when returning from background

Describe the bug
When loading the app from a backgrounded/inactive state, sometimes (but not always) the map is completely incomprehensible from the native map layers (for land, road, water) fragmenting and streaking. Our added layers or annotations are removed.

To Reproduce
Open an app with react native mapbox, exit the app, reload later.

Screenshots
IMG_5852

demo3

Versions (please complete the following information):

  • Platfrom: iOS
  • Device: iPhone X, Xs
  • OS: 12
  • SDK Version: GitHub master branch
  • React Native Version: 0.59.2

Additional context
Add any other context about the problem here.

ShapeSource onpress call 2 times

Describe the bug
The onpress function of ShapeSource is called 2 times

To Reproduce

async function onPress(e, coleta, setDados) {
  console.log(11);
}

function Point({
  features, coleta, setDados
}) {
  return (
    <MapboxGL.ShapeSource
      cluster
      clusterRadius={35}
      clusterMaxZoom={14}
      id="postes"
      shape={{ type: 'FeatureCollection', features }}
      onPress={e => console.log(11)}
    >
      <MapboxGL.SymbolLayer
        id="pointCount"
        style={styles.clusterCount}
      />

Screenshots
image

Versions (please complete the following information):

  • Platfrom: [Android]
  • SDK Version [28]
  • React Native Version [0.59.5]

'rasterResampling' is unavailable: Use rasterResamplingMode instead.

Describe the bug
When trying to build the latest version of @react-native-mapbox/maps in Xcode I get a "Semantic Issue" in RCTMGLStyle.m line 1470 'rasterResampling' is unavailable: Use rasterResamplingMode instead.

To Reproduce
Create a clean React Native project with react-native init. Use pod installation. Try to build and run the project using .xcworkspace.

Expected behavior
I expected my React Native app to build without errors.

Versions (please complete the following information):

  • Platfrom: iOS
  • Device: Simulator
  • OS: 12.2
  • SDK Version: Latest
  • React Native Version: Latest

Screenshot
Screenshot 2019-05-10 at 14 32 43

Possible solution
The proposed solution seems to be the suggestion of XCode, renaming rasterResampling to rasterResamplingMode.

is not showing the map

Describe the bug
My template is not loading, but other map functions are working.

Screenshots
image

Versions (please complete the following information):

  • Platfrom: [Android]
  • Device: [Moto G 5 and Emulator from Android Studio]
  • OS: [Windows 10]
  • SDK Version [e.g. 22]
  • React Native Version [e.g. 0.59]

[iOS] Crash when assigning values to lineDasharray, iconTextFitPadding

Describe the bug
When assigning array of numbers to style properties of type Constant such as lineDasharray and iconTextFitPadding the library crashes with the follow error:

019-06-03 21:07:53.122501+0200 RNMapboxGLExample[12469:7667982] -[__NSCFNumber isEqualToString:]: unrecognized selector sent to instance 0xc55fac20e40db987
2019-06-03 21:07:53.127347+0200 RNMapboxGLExample[12469:7667982] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__NSCFNumber isEqualToString:]: unrecognized selector sent to instance 0xc55fac20e40db987'
*** First throw call stack:
(
	0   CoreFoundation                      0x000000010b5cb1bb __exceptionPreprocess + 331
	1   libobjc.A.dylib                     0x0000000109cb0735 objc_exception_throw + 48
	2   CoreFoundation                      0x000000010b5e9f44 -[NSObject(NSObject) doesNotRecognizeSelector:] + 132
	3   CoreFoundation                      0x000000010b5cfed6 ___forwarding___ + 1446
	4   CoreFoundation                      0x000000010b5d1da8 _CF_forwarding_prep_0 + 120
	5   Mapbox                              0x0000000108edd6f1 -[NSExpression(MGLAdditions) mgl_jsonExpressionObject] + 11324
	6   Mapbox                              0x0000000108f0e536 -[MGLLineStyleLayer setLineDashPattern:] + 488
	7   RNMapboxGLExample                   0x00000001077dbbed -[RCTMGLStyle setLineDasharray:withReactStyleValue:] + 125
	8   RNMapboxGLExample                   0x00000001077d3091 -[RCTMGLStyle lineLayer:withReactStyle:] + 2465
	9   RNMapboxGLExample                   0x00000001077bddc6 -[RCTMGLLineLayer addStyles] + 310
	10  RNMapboxGLExample                   0x00000001077bc09c -[RCTMGLLayer addToMap:style:] + 396
	11  RNMapboxGLExample                   0x00000001077d0c9b -[RCTMGLSource addToMap] + 635
	12  RNMapboxGLExample                   0x00000001077ce6ab -[RCTMGLShapeSource addToMap] + 267
	13  RNMapboxGLExample                   0x00000001077d0a06 -[RCTMGLSource setMap:] + 150

To Reproduce

Define a LineLayer with a style containing lineDasharray: [2, 1]

Full Sample
import React from 'react';
import MapboxGL from '@react-native-mapbox-gl/maps';
import {lineString as makeLineString} from '@turf/helpers';

import sheet from '../styles/sheet';

const bounds = {
  ne: [-74.12641, 40.797968],
  sw: [-74.143727, 40.772177],
};

const lineStyle = {
  lineColor: '#ff0000',
  lineWidth: 2,
  lineDasharray: [2, 1],
};

const shape = makeLineString([bounds.ne, bounds.sw]);

const SimpleLine = () => (
  <MapboxGL.MapView contentInset={10} style={sheet.matchParent}>
    <MapboxGL.Camera bounds={bounds} maxZoomLevel={19} animationDuration={0} />
    <MapboxGL.ShapeSource id="line" shape={shape}>
      <MapboxGL.LineLayer id="line" style={lineStyle} />
    </MapboxGL.ShapeSource>
  </MapboxGL.MapView>
);

export default SimpleLine;

Expected behavior
LineLayer renders with a dashed pattern on iOS

Versions (please complete the following information):

  • Platfrom: iOS
  • Device: iPhone SE
  • OS: iOS12
  • React Native Version 0.59.8

Additional context
I tested both lineDasharray and iconTextFitPadding other fields that are based on an array of numbers such as iconOffset, textTranslate work because they are treated as a special vector type.

On Android it works fine.

Blue Dot Representing User Location Missing

Describe the bug
User location indicated by blue dot not showing on maps.

To Reproduce
Have tried the following including the new UserLocation object:

      <Mapbox.MapView
        style={styles.map}
        showUserLocation={true}
      >
        <Mapbox.UserLocation 
            showUserLocation={true}
        />

Expected behavior

Blue dot:
Screen Shot 2019-05-02 at 12 32 57 AM

Versions (please complete the following information):

  • Platfrom: iOS
  • Device: iPhone Xs and Simulator
  • React Native Version 0.59

Additional context
Possible post-expressions update impact @mfazekas. Let me know if I have anything wrong in my attempt at showUserLocation based on the new changes from your vantage point.

SymbolLayer filter property data type error; unable to pass filter array

Describe the bug
SymbolLayer filter property docs specify passing a type array. When I pass an array to the filter property an exception is thrown saying "filter property must be a string".

To Reproduce

       <Mapbox.ShapeSource>
          <Mapbox.SymbolLayer 
            id="guz" 
            style={{ visibility: "visible" }}
            filter={[
                'all',
                ['==', '$type', 'Point'],
                ['in', 'type', 'Blue Project', 'WFW Project']
            ]}
          />
        </Mapbox.ShapeSource>

Expected behavior
The symbol layer should filter by the array passed into the SymbolLayer object.

Screenshots
Screen Shot 2019-05-29 at 8 52 13 PM

Versions (please complete the following information):

  • Platfrom: iOS
  • Device: XR Simulator
  • React Native Version 0.59

Additional context
Add any other context about the problem here.

In the project examples an array appears to be successfully used. For example, in the EarthQuakes.js example the CircleLayer appears to use an array filter:

            <MapboxGL.CircleLayer
              id="clusteredPoints"
              belowLayerID="pointCount"
              filter={['has', 'point_count']}
              style={layerStyles.clusteredPoints}
            />

Not sure why the SymbolLayer array I'm passing in is having the issue.

[Android] isUserInteraction in onRegionDidChange is incorrectly set to false

Describe the bug
After updating zoomLevel or centerCoordinate in MapboxGL.Camera object, the next manual move triggers onRegionDidChange with isUserInteraction set to false instead of true

To Reproduce

  • Bind onRegionDidChange and log his features parameter
  • Update zoomLevel or centerCoordinate
  • Manually move the map

Expected behavior
isUserInteraction must be set to true

Second bug which should be related

Updating zoomLevel or centerCoordinate must trigger onRegionDidChange with isUserInteraction set to false (actually onRegionDidChange is not triggered in this cases)

Versions (please complete the following information):

  • Platfrom: Android
  • Device: Physical device, Xiaomi redmi note 5
  • OS: 8.1.0
  • SDK Version: 28
  • React Native Version 0.59.8

[Small Proposal] Add acknowledgements to bottom of docs

Over the course of this major transition there have been a sizable and meaningful contribution from a few members of our community. Is there any opposition to acknowledging the contributions of individuals working in this repo?

Some quick folks that come to mind are @mfazekas @kristfal, etc. I apologize if I am leaving off a few here. Any suggestions welcome.

[Discussion] Emulator Performance With Maps

When we run our react-native-mapbox/maps the performance on the maps running on the iOS emulators is very slow in most cases. The actual devices run great. Are there any emulators the community is using that tends to work better with the newest maps from mapbox? Perhaps we are the only ones experiencing slow performance on the xcode emulators?

Versions (please complete the following information):

  • Platfrom: iOS
  • Device: Xcode Emulators
  • React Native Version 0.59

Multiple commands produce '[...]/Frameworks/Mapbox.framework'

I wanted to switch from nitaliano/react-native-mapbox-gl to here but after installing and linking etc. I realize I didn't remove the old framework from ios and android. With no experience, how do I get rid of this build error?

Multiple commands produce '/.../Frameworks/Mapbox.framework': 1) Target 'app' has copy command from '/Users/magnusburton/Projects/Lisa/app/node_modules/@react-native-mapbox-gl/maps/ios/Mapbox.framework' to '/.../Frameworks/Mapbox.framework' 2) That command depends on command in Target 'app': script phase โ€œ[CP] Embed Pods Frameworksโ€

My script phases look like this:
Skaฬˆrmklipp 2019-05-31 16 32 41
Skaฬˆrmklipp 2019-05-31 16 34 47

Let me know if I missed supplying any information. Thanks a lot!

[Android] MapboxGL.Camera with followUserLocation throws an exception

Describe the bug
Currently in the process of kicking the tires of 7.0.0 I've noticed the following behavior:
Using MapboxGL.Camera with prop followUserLocation throws an exception:

Error while updating prop 'followUserLocation' of a view managed by: RCTMGLCamera
java.lang.NullPointerException: Attempt to invoke virtual method 'int java.lang.String.hashCode()' on a null object reference

callStack info:

 Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'int java.lang.String.hashCode()' on a null object reference
        at com.mapbox.rctmgl.location.UserTrackingMode.fromString(UserTrackingMode.java:67)
        at com.mapbox.rctmgl.components.camera.RCTMGLCamera.updatedFollowUserMode(RCTMGLCamera.java:495)
        at com.mapbox.rctmgl.components.camera.RCTMGLCamera.setFollowUserLocation(RCTMGLCamera.java:485)
        at com.mapbox.rctmgl.components.camera.RCTMGLCameraManager.setFollowUserLocation(RCTMGLCameraManager.java:59)
        at java.lang.reflect.Method.invoke(Native Method)ย 
        at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateViewProp(ViewManagersPropertyCache.java:83)ย 
        at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackViewManagerSetter.setProperty(ViewManagerPropertyUpdater.java:132)ย 
        at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:51)ย 
        at com.facebook.react.uimanager.ViewManager.updateProperties(ViewManager.java:37)ย 
        at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:265)ย 
        at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:200)ย 
        at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:1109)ย 
        at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1080)ย 
        at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)ย 
        at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:166)ย 
        at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:84)ย 
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:977)ย 
        at android.view.Choreographer.doCallbacks(Choreographer.java:791)ย 
        at android.view.Choreographer.doFrame(Choreographer.java:723)ย 
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:965)ย 
        at android.os.Handler.handleCallback(Handler.java:790)ย 
        at android.os.Handler.dispatchMessage(Handler.java:99)ย 
        at android.os.Looper.loop(Looper.java:164)ย 
        at android.app.ActivityThread.main(ActivityThread.java:6661)

To Reproduce
This is the code I used:

import React, { Component } from "react";
import { StyleSheet, View } from "react-native";

import MapboxGL from "@react-native-mapbox-gl/maps";
MapboxGL.setAccessToken("<TOKEN>");

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  container: {
    height: 300,
    width: 300,
    backgroundColor: "tomato"
  },
  map: {
    flex: 1
  }
});

export default class App extends Component {
  state = {
    permissonGranted: null
  };

  async componentDidMount() {
    const permissonGranted = await MapboxGL.requestAndroidLocationPermissions();
    this.setState({ permissonGranted });
  }

  render() {
    if (!this.state.permissonGranted) return null;
    return (
      <View style={styles.page}>
        <View style={styles.container}>
          <MapboxGL.MapView style={styles.map}>
            <MapboxGL.UserLocation visible={true} />
            <MapboxGL.Camera followUserLocation followUserMode="normal" />
          </MapboxGL.MapView>
        </View>
      </View>
    );
  }
}

Notice: the culprit seems to be a missing string that should've been passed to
UserTrackingMode.fromString in UserTrackingMode.java ? When checked value is always null no matter the defined followUserMode

Expected behavior
User position is shown and Camera is following user position in the followUserMode specified.

Screenshots
image

Versions (please complete the following information):

  • Platfrom: Android
  • Device: LG Q7
  • OS: OSX
  • SDK Version Android 8
  • React Native Version: 0.59.8

[Android] Error while updating property reactStyle

Hello!

I've got a problem on Android when updating iconRotate style dynamically. Is this a bug or I can fix it somehow?

<MapboxGL.ShapeSource
    id="symbolLocationSource"
    shape={this.route.coordinate}
>
    <MapboxGL.Animated.SymbolLayer
        id="symbolLocationSymbols"
        minZoomLevel={1}
        style={[styles.icon, { iconRotate: this.rotationValue }]}
    />
</MapboxGL.ShapeSource>

...

const styles = MapboxGL.StyleSheet.create({
    icon: {
        iconImage: require('assets/images/[email protected]'),
        iconAllowOverlap: true,
        iconSize: 1,
    },
});

Screenshot_1556449415

This code works if iconRotate value is not changing

Versions (please complete the following information):

  • Platfrom: Android
  • React Native Version [e.g. 0.59.1]

Crash in "Shape Source from Icon" in example app

Describe the bug
The app crashes with the following stacktrace when running the "Shape Source from Icon" example:

05-18 19:19:12.176  1174  1174 E AndroidRuntime: FATAL EXCEPTION: main
05-18 19:19:12.176  1174  1174 E AndroidRuntime: Process: com.rnmapboxglexample, PID: 1174
05-18 19:19:12.176  1174  1174 E AndroidRuntime: java.lang.NullPointerException: Attempt to invoke virtual method 'void com.mapbox.mapboxsdk.maps.Style.addImage(java.lang.String, android.graphics.Bitmap)' on a null object reference
05-18 19:19:12.176  1174  1174 E AndroidRuntime: 	at com.mapbox.rctmgl.components.styles.sources.RCTMGLShapeSource.addToMap(RCTMGLShapeSource.java:59)
05-18 19:19:12.176  1174  1174 E AndroidRuntime: 	at com.mapbox.rctmgl.components.mapview.RCTMGLMapView.onMapReady(RCTMGLMapView.java:373)
05-18 19:19:12.176  1174  1174 E AndroidRuntime: 	at com.mapbox.mapboxsdk.maps.MapView$MapCallback.onMapReady(MapView.java:1154)
05-18 19:19:12.176  1174  1174 E AndroidRuntime: 	at com.mapbox.mapboxsdk.maps.MapView$MapCallback.initialised(MapView.java:1140)
05-18 19:19:12.176  1174  1174 E AndroidRuntime: 	at com.mapbox.mapboxsdk.maps.MapView.initialiseMap(MapView.java:207)
05-18 19:19:12.176  1174  1174 E AndroidRuntime: 	at com.mapbox.mapboxsdk.maps.MapView.access$800(MapView.java:61)
05-18 19:19:12.176  1174  1174 E AndroidRuntime: 	at com.mapbox.mapboxsdk.maps.MapView$6.run(MapView.java:321)
05-18 19:19:12.176  1174  1174 E AndroidRuntime: 	at android.os.Handler.handleCallback(Handler.java:789)
05-18 19:19:12.176  1174  1174 E AndroidRuntime: 	at android.os.Handler.dispatchMessage(Handler.java:98)
05-18 19:19:12.176  1174  1174 E AndroidRuntime: 	at android.os.Looper.loop(Looper.java:164)
05-18 19:19:12.176  1174  1174 E AndroidRuntime: 	at android.app.ActivityThread.main(ActivityThread.java:6798)
05-18 19:19:12.176  1174  1174 E AndroidRuntime: 	at java.lang.reflect.Method.invoke(Native Method)
05-18 19:19:12.176  1174  1174 E AndroidRuntime: 	at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
05-18 19:19:12.176  1174  1174 E AndroidRuntime: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)

Versions:

  • Platfrom: Android
  • Device: Oneplus 3T
  • OS: 8.0.0
  • SDK Version: 28
  • React Native Version: 0.59.0

[Android] Support for showing custom view over annotation

Description
I cannot find a way to show a custom View component over an Annotation on Map. Something similar to the old deprecated PointAnnotation where children of PointAnnotation were shown over a point on the map.

PointAnnotation works perfectly on iOS though.

To Reproduce

on Android

<MapboxGL.Annotation key={key} id={id} coordinates={coordinates}>
     <View style={styles.annotationContainer}>
           <Text>FLOATING ANNOTATION TEXT</Text>
    </View>
</MapboxGL.Annotation>

or

<MapboxGL.PointAnnotation key={key} id={id} coordinate={coordinates}>
     <View style={styles.annotationContainer}>
           <Text>FLOATING ANNOTATION TEXT</Text>
    </View>
</MapboxGL.PointAnnotation>

Expected behaviour
Floating text over coordinates

Versions (please complete the following information):

  • Platfrom: Android
  • Device: OnePlus 6T
  • OS: Android 9
  • SDK Version 7.0.0
  • React Native Version 0.59.8

[Android] FillLayer fillPattern causing instant crash

Describe the bug
When trying to use the fillPattern style on FillLayer on Android 9 (haven't tried on iOS yet) it causes an instant crash. These are the logs that crashlytics have given me.

Fatal Exception: java.lang.ClassCastException: Value for value cannot be cast from ReadableNativeArray to String
       at com.facebook.react.bridge.ReadableNativeMap.checkInstance(ReadableNativeMap.java:150)
       at com.facebook.react.bridge.ReadableNativeMap.getNullableValue(ReadableNativeMap.java:142)
       at com.facebook.react.bridge.ReadableNativeMap.getString(ReadableNativeMap.java:192)
       at com.mapbox.rctmgl.components.styles.RCTMGLStyleValue.getString(RCTMGLStyleValue.java:81)
       at com.mapbox.rctmgl.components.styles.RCTMGLStyleFactory.setFillPattern(RCTMGLStyleFactory.java:837)
       at com.mapbox.rctmgl.components.styles.RCTMGLStyleFactory$1.onAllImagesLoaded(RCTMGLStyleFactory.java:76)
       at com.mapbox.rctmgl.utils.DownloadMapImageTask.onPostExecute(DownloadMapImageTask.java:88)
       at com.mapbox.rctmgl.utils.DownloadMapImageTask.onPostExecute(DownloadMapImageTask.java:23)
       at android.os.AsyncTask.finish(AsyncTask.java:695)
       at android.os.AsyncTask.access$600(AsyncTask.java:180)
       at android.os.AsyncTask$InternalHandler.handleMessage(AsyncTask.java:712)
       at android.os.Handler.dispatchMessage(Handler.java:106)
       at android.os.Looper.loop(Looper.java:193)
       at android.app.ActivityThread.main(ActivityThread.java:6718)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

When changing the style to fillColor, it works perfectly fine with the same filter.

Here is the code I am using and patternZips is an array of zipcodes represented as strings. GEOID10 is the property that matches the zipcode.

 <MapboxGL.FillLayer
            id="zipcode-boundaries-pattern"
            belowLayerID="zipcode-symbol"
            aboveLayerID="zipcode-boundaries"
            minZoomLevel={8}
            sourceLayerID="SuperZips-clhfv6"
            filter={['match', ['get', 'GEOID10'], patternZips, true, false]}
            style={{
              fillPattern: zipPattern,
            }}
          />

This is how I'm importing zipPattern:

import zipPattern from '../../../../assets/other-vector-stripe.png';

This used to work on the previous https://github.com/nitaliano/react-native-mapbox-gl version (minus expression syntax).

To Reproduce
Use fillPattern style on FillLayer.

Expected behavior
The polygon should be filled with the pattern imported.

Versions:

  • Platfrom: Android
  • Device: Pixel 3
  • OS: Android 9
  • SDK Version 28
  • React Native Version 0.59.5

Crash with multiple shapesource filters

Map crashing if using multiple filter

Using the same code as in the v6.1.3

<MapboxGL.SymbolLayer
id={'selected'}
aboveLayerID={'fav'}
filter={['all', ['==', 'isFav', false], ['==', 'isSelected', true]]}
style={layerStyles.selectedPoi}
/>

Versions (please complete the following information):

  • Platfrom: Android
  • Device: Android Emulator
  • OS: Android 8.1
  • SDK Version 27
  • React Native Version 0.59.8
JNI DETECTED ERROR IN APPLICATION: jarray argument has non-array type: java.lang.String
in call to GetObjectArrayElement
from void com.mapbox.mapboxsdk.style.layers.Layer.nativeSetFilter(java.lang.Object[])
com.mapbox.mapboxsdk.style.layers.Layer.nativeSetFilter(Native method)
com.mapbox.mapboxsdk.style.layers.SymbolLayer.setFilter(SymbolLayer.java:103)
com.mapbox.rctmgl.components.styles.layers.RCTMGLSymbolLayer.updateFilter(RCTMGLSymbolLayer.java:24)
com.mapbox.rctmgl.components.styles.layers.RCTLayer.addToMap(RCTLayer.java:236)
com.mapbox.rctmgl.components.styles.layers.RCTMGLSymbolLayer.addToMap(RCTMGLSymbolLayer.java:29)
com.mapbox.rctmgl.components.styles.sources.RCTSource.addLayerToMap(RCTSource.java:195)
com.mapbox.rctmgl.components.styles.sources.RCTSource$1.onStyleLoaded(RCTSource.java:130)
com.mapbox.mapboxsdk.maps.MapboxMap.notifyStyleLoaded(MapboxMap.java:845)
com.mapbox.mapboxsdk.maps.MapboxMap.onFinishLoadingStyle(MapboxMap.java:205)
com.mapbox.mapboxsdk.maps.MapView$MapCallback.onDidFinishLoadingStyle(MapView.java:1178)
com.mapbox.mapboxsdk.maps.MapChangeReceiver.onDidFinishLoadingStyle(MapChangeReceiver.java:194)
com.mapbox.mapboxsdk.maps.NativeMapView.onDidFinishLoadingStyle(NativeMapView.java:1040)
android.os.MessageQueue.nativePollOnce(Native method)
android.os.MessageQueue.next(MessageQueue.java:326)
android.os.Looper.loop(Looper.java:160)
android.app.ActivityThread.main(ActivityThread.java:6718)
java.lang.reflect.Method.invoke(Native method)
com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

Logo not adjusted according to contentInset

Describe the bug
My MapView on iOS doesn't adjust the position of the logo as I set my contentInset to {[0, 0, 200, 0]}.

To Reproduce
<MapboxGL.MapView contentInset={[0, 0, 200, 0]} />

Expected behavior
I want the Mapbox logo (and the ( i ) button) to move up from the bottom to avoid it from being covered by my views and therefor risking breaking their terms etc.

Versions (please complete the following information):

  • Platfrom: iOS
  • Device: iPhone 8
  • OS: 12.4
  • SDK Version: 7.0.0
  • React Native Version: 0.59.8

Android build error

Hi,

I update react-native-mapbox to this repo but now android not build:

Could not determine the dependencies of task ':app:preDebugBuild'.
> Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
   > Could not resolve project :mapbox-react-native-mapbox-gl.
     Required by:
         project :app
      > Unable to find a matching configuration of project :mapbox-react-native-mapbox-gl: None of the consumable configurations have attributes.

To install repo i have to use:
yarn add react-native-mapbox/maps
because yarn add @react-native-mapbox/maps not work

My settings.gradle:

rootProject.name = 'mapboxTest'
include ':mapbox-react-native-mapbox-gl'
project(':mapbox-react-native-mapbox-gl').projectDir = new File(rootProject.projectDir, '../node_modules/@mapbox/react-native-mapbox-gl/android/rctmgl')
include ':app'

My MainApplciation.java:

package com.mapboxtest;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

import com.mapbox.rctmgl.RCTMGLPackage;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RCTMGLPackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

My app/buid.gradle:

apply plugin: "com.android.application"

import com.android.build.OutputFile

/**
 * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
 * and bundleReleaseJsAndAssets).
 * These basically call `react-native bundle` with the correct arguments during the Android build
 * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
 * bundle directly from the development server. Below you can see all the possible configurations
 * and their defaults. If you decide to add a configuration block, make sure to add it before the
 * `apply from: "../../node_modules/react-native/react.gradle"` line.
 *
 * project.ext.react = [
 *   // the name of the generated asset file containing your JS bundle
 *   bundleAssetName: "index.android.bundle",
 *
 *   // the entry file for bundle generation
 *   entryFile: "index.android.js",
 *
 *   // whether to bundle JS and assets in debug mode
 *   bundleInDebug: false,
 *
 *   // whether to bundle JS and assets in release mode
 *   bundleInRelease: true,
 *
 *   // whether to bundle JS and assets in another build variant (if configured).
 *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
 *   // The configuration property can be in the following formats
 *   //         'bundleIn${productFlavor}${buildType}'
 *   //         'bundleIn${buildType}'
 *   // bundleInFreeDebug: true,
 *   // bundleInPaidRelease: true,
 *   // bundleInBeta: true,
 *
 *   // whether to disable dev mode in custom build variants (by default only disabled in release)
 *   // for example: to disable dev mode in the staging build type (if configured)
 *   devDisabledInStaging: true,
 *   // The configuration property can be in the following formats
 *   //         'devDisabledIn${productFlavor}${buildType}'
 *   //         'devDisabledIn${buildType}'
 *
 *   // the root of your project, i.e. where "package.json" lives
 *   root: "../../",
 *
 *   // where to put the JS bundle asset in debug mode
 *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
 *
 *   // where to put the JS bundle asset in release mode
 *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in debug mode
 *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in release mode
 *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
 *
 *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
 *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
 *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
 *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
 *   // for example, you might want to remove it from here.
 *   inputExcludes: ["android/**", "ios/**"],
 *
 *   // override which node gets called and with what additional arguments
 *   nodeExecutableAndArgs: ["node"],
 *
 *   // supply additional arguments to the packager
 *   extraPackagerArgs: []
 * ]
 */

project.ext.react = [
    entryFile: "index.js"
]

apply from: "../../node_modules/react-native/react.gradle"

/**
 * Set this to true to create two separate APKs instead of one:
 *   - An APK that only works on ARM devices
 *   - An APK that only works on x86 devices
 * The advantage is the size of the APK is reduced by about 4MB.
 * Upload all the APKs to the Play Store and people will download
 * the correct one based on the CPU architecture of their device.
 */
def enableSeparateBuildPerCPUArchitecture = false

/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = false

android {
    compileSdkVersion rootProject.ext.compileSdkVersion

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    defaultConfig {
        applicationId "com.mapboxtest"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
            def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation project(':mapbox-react-native-mapbox-gl')
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

And my build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 26
        supportLibVersion = "28.0.0"
        okhttpVersion = "3.12.1"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.3.1'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        maven { url "https://jitpack.io" }
        maven { url "https://maven.google.com" }
    }
}

And other question, i have to put my accessToken in env.json file like in example? or where?

Thanks

Repeated requests for sprite sheet

I'm kicking the tires with the new changes in master @ 79a4e56. I came across this minor issue with repeated network requests.

Describe the bug
I am seeing repeated requests approx. every second for the style spritesheet files:

I am also seeing this for font (pbf) resources.

I am not seeing any repeat requests for other style resources (e.g. the main style.json is only being requested once, and the tiles are only being requested once). The RCTMGLMapView component is only being rendered once too, so this does not seem to be an issue with render being called multiple times.

I tried removing <MapboxGL.UserLocation showUserLocation={true} /> in case it was location updates that was causing the sprite requests, but I still see the requests when it is removed.

I have tried turning off GPS in case the GPS updates were triggering a re-request of these resources, but I still see the requests.

To Reproduce
Add a custom style, monitor the network requests

Expected behavior
The resources in the stylesheet (sprites and font files) should only be loaded once.

Versions (please complete the following information):

  • Platfrom: Android
  • Device: Moto X4
  • SDK Version 28
  • React Native Version 0.58.5

Additional context
I am serving a custom style locally, which is how I can see the network requests. I am serving the sprite and font resources with cache-control: no-cache headers, which may be relevant?

App crashes when using invalid expression

Describe the bug
Entering an unknown interpolation type causes the Mapbox framework to crash and the app to freeze.

To Reproduce
There might be various ways to achieve this but my course of action was:

  1. Create a map
  2. Create a ShapeSource and inside, a CircleLayer
  3. Add the following style;

circleRadius: ['interpolate', ['exponentisdsdsdfdfturvrgdal', 1.5], ['zoom'], 1, 1, 7, 2,11, 4]

  1. crash

Expected behavior
In my case the map went all grey and the app froze. Also got an exception in Xcode

*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: 'Invalid property value: [1][0]: Unknown interpolation type exponentisdsdsdal'

Versions (please complete the following information):

  • Platfrom: iOS
  • Device: iPhone8
  • OS: 12.4
  • SDK Version 7.0.0
  • React Native Version 0.57

Additional context
I entered the wrong interpolation type due to #76

Mapbox crashes when using "aboveLayerID" property

Describe the bug
Mapbox crashes when using "aboveLayerID" property.

To Reproduce

Add various layers and set one of the layers to appear "above" the other as follows:

        <Mapbox.VectorSource
          id="customSourceExample"
          url={VECTOR_SOURCE_URL}
        >
          <Mapbox.FillLayer
            id="customSourceFill"
            sourceLayerID="roadless"
            style={mbStyles.boxFill}
            aboveLayerID="basemap"
          />
        </Mapbox.VectorSource>


       <Mapbox.RasterSource id="rasterSourceBasemap" tileSize={256} url={url}>
          <Mapbox.RasterLayer
            id="basemap"
            sourceID="rasterSourceBasemap"
            style={{rasterOpacity: 1}}
          />
        </Mapbox.RasterSource>

Expected behavior
In the above example, the Vector FillLayer should appear above the RasterLayer based on the property defined aboveLayerID="basemap"

Screenshots
xCode crashes:

Screen Shot 2019-05-18 at 10 56 49 PM

Versions (please complete the following information):

  • Platfrom: iOS
  • Device: XR Simulator
  • React Native Version 0.59

Custom icon iconSize Inconstancies

Describe the bug
Custom icons have inconsistencies between debug and release. In debug mode the icons appear roughly 3 time as small as they are in release. This is a bug that has been in the library since 6.1.3 and has been reported twice before in nitaliano/react-native-mapbox-gl#1348 and nitaliano/react-native-mapbox-gl#1417

To Reproduce
I created a example project that has this issue on github. To reproduce create a new project and copy the content from App.js in the repo to your project.

Expected behavior
No difference in icon size or scaling between debug and release builds.

Screenshots
Running issue example project from github.

Debug Scheme
debug

Release Scheme
release

For more screenshots see nitaliano/react-native-mapbox-gl#1417

Versions (please complete the following information):

  • Platfrom: iOS (But I think the problem also exists on Android)
  • Device: Simulator iPhone Xr / iPhone 7
  • OS: Latest (12.2)
  • SDK Version Latest
  • React Native Version: Latest (0.59.x)

Additional context
As mentioned this problem has been reported before and seems to have been introduced in version 6.1.3. In 6.1.2 I didn't have these problems. This commit has been added in 6.1.3 and might be the cause, not sure though.

Mapview.Flyto method doesn't work.

I updated mapbox plugin from 6.1.3 to 7.0.0-rc2.
I try to call MapView.flyto method in my app.
But it seems this method is using MapView.setcamear method.
I got SetCamrea method is deprecated.
But API document mentioned MapView compoenet include fl;yto method yet.
And, My app using flyTo method.
I have no idea for it.

layerIndex Property Throws Error/Not Adding Layers In Correct Order

Describe the bug
Using layerIndex property in layers does not appear to be working and throws an error.

To Reproduce
Steps to reproduce the behavior

        {loading ? null : (<Mapbox.RasterSource id="rasterSourceBasemap" tileSize={256} url={Url}>
          <Mapbox.RasterLayer
            id="basemap"
            sourceID="rasterSourceBasemap"
            style={{ rasterOpacity: 1 }}
            layerIndex={1}
          />
        </Mapbox.RasterSource>)}

        {loading ? null : (<Mapbox.ShapeSource>
          <Mapbox.SymbolLayer 
            id="guz" 
            style={{ visibility: (layers.guz.show ? "visible" : "none") }}
            layerIndex={10}
          />
        </Mapbox.ShapeSource>)}

Expected behavior
The layers would show in the order of the defined layerIndex.

Screenshots
I get the following error:

Screen Shot 2019-05-29 at 1 31 24 AM

At times when the error is not present the layers don't seem to respond to the actual layerIndex defined in each layer.

Versions (please complete the following information):

  • Platfrom: iOS
  • React Native Version 0.59

[Android] Camera issues at initialization

Describe the bug
A few things seem wrong with the camera at initialization at the moment, when trying to make it start at certain centerCoordinates:

  • The camera always starts at coordinates [0,0]
  • If I set a minZoomValueon the camera, it never moves from [0, 0]
  • Otherwise the camera moves to the given centerCoordinates after a short delay

To Reproduce
Simply use these properties for camera and mapview:

      <Mapbox.MapView style={{ flex: 1 }}>
        <Mapbox.Camera centerCoordinate={[2.6, 43.1]} zoomLevel={8.5} />
      </Mapbox.MapView>

The camera will start at [0.0] then jump to the given centerCoordinates after a while. If you set a minZoomLevel (Such as minZoomLevel={8}), the camera will remain at [0, 0].

Expected behavior
The camera should start at the centerCoordinates. Giving it a minZoomLevel should not force it to remain stuck where it is.

Versions (please complete the following information):

  • Platfrom: Android
  • Device: Samsung s7
  • OS: 9.0
  • SDK Version: 7.3.2
  • React Native Version 0.59.8

[Android] SymbolLayer not working in release mode / black in debug mode

Describe the bug
SymbolLayer is not working for Android in release mode, nothing is displayed at all.

In debug mode, the image is displayed, but all black.

image

To Reproduce
Compile this repo's example project in the corresponding mode and use whatever scene that comes with a SymbolLayer ("Custom Icon" for instance)

Expected behavior
We expect SymbolLayer to work the same as for iOS.
image

Versions (please complete the following information):

  • Platform: Android
  • Device: any
  • OS: any
  • SDK Version 7.3.2, 8.0.0
  • React Native Version 0.59

Zoomlevel has different results on iOS and Android

Describe the bug
Setting the same zoomLevel on Camera has a different "zoomLevel" on Android and iOS. It seems iOS is more zoomed out than Android.

To Reproduce
Any mapbox project that uses MapboxGL.Camera with zoomLevel property for example https://github.com/HPieters/mapbox-icon-size-issue

Expected behavior
ZoomLevel is equal on both iOS and Android.

Screenshots

ios
ios

android
android

Versions

  • Platfrom: Android & iOS
  • Device: Android Motorola G6 / iOS Simulator Xr and iPhone 7
  • OS: 12.2
  • SDK Version 28
  • React Native Version Latest

Additional context
This problem seems to be new in this version of the library, when tested with 6.1.2 the zoomLevel had the same level on Android and iOS.

Transition styles cause error in Android

Describe the bug
In the latest master version 18fc03c, setting a Transition style for a style property causes an error in Android (iOS works properly):

com.facebook.react.bridge.ReadableNativeArray cannot be cast to com.facebook.react.bridge.ReadableNativeMap
getMap
    ReadableNativeArray.java:153
getMap
    ReadableNativeArray.java:22
<init>
    RCTMGLStyleValue.java:46
getStyleValueForKey
    RCTMGLStyle.java:59
setRasterLayerStyle
    RCTMGLStyleFactory.java:526
addStyles
    RCTMGLRasterLayer.java:25
...

To Reproduce
Set the transition style for any transitionable style property e.g. set rasterOpacityTransition for rasterOpacity:

<Mapbox.RasterLayer
  id="myLayer"
  sourceID="mySourceId"
  style={{
    rasterOpacity: 0.7,
    rasterOpacityTransition: {
      duration: 0,
      delay: 0,
    },
  }}
/>

Expected behavior
Transition style should be set in Android without causing an error.

Versions

  • Platform: Android
  • Device: Emulator
  • OS: Android 9
  • SDK Version: 28
  • React Native Version: 0.58.6

Additional context
https://github.com/react-native-mapbox/maps/blob/f0b469d75c2af3c2ffe44cdba47ff9abafd1d022/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/RCTMGLStyleValue.java#L45-L51 does not properly handle style values that are objects (transition style values are objects so array contains another array, not a map).

https://github.com/react-native-mapbox/maps/blob/f0b469d75c2af3c2ffe44cdba47ff9abafd1d022/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/RCTMGLStyleValue.java#L139-L140 does not get the transition options properly from the style value.

Crash in "Indoor Building Map" in example app

Describe the bug
The app crashes with the following stacktrace when running the "Indoor Building Map" example:

05-18 19:28:15.697  3444  3444 E AndroidRuntime: FATAL EXCEPTION: main
05-18 19:28:15.697  3444  3444 E AndroidRuntime: Process: com.rnmapboxglexample, PID: 3444
05-18 19:28:15.697  3444  3444 E AndroidRuntime: java.lang.NullPointerException: Attempt to invoke virtual method 'com.mapbox.mapboxsdk.style.light.Light com.mapbox.mapboxsdk.maps.Style.getLight()' on a null object reference
05-18 19:28:15.697  3444  3444 E AndroidRuntime: 	at com.mapbox.rctmgl.components.styles.light.RCTMGLLight.addToMap(RCTMGLLight.java:33)
05-18 19:28:15.697  3444  3444 E AndroidRuntime: 	at com.mapbox.rctmgl.components.mapview.RCTMGLMapView.onMapReady(RCTMGLMapView.java:373)
05-18 19:28:15.697  3444  3444 E AndroidRuntime: 	at com.mapbox.mapboxsdk.maps.MapView$MapCallback.onMapReady(MapView.java:1154)
05-18 19:28:15.697  3444  3444 E AndroidRuntime: 	at com.mapbox.mapboxsdk.maps.MapView$MapCallback.initialised(MapView.java:1140)
05-18 19:28:15.697  3444  3444 E AndroidRuntime: 	at com.mapbox.mapboxsdk.maps.MapView.initialiseMap(MapView.java:207)
05-18 19:28:15.697  3444  3444 E AndroidRuntime: 	at com.mapbox.mapboxsdk.maps.MapView.access$800(MapView.java:61)
05-18 19:28:15.697  3444  3444 E AndroidRuntime: 	at com.mapbox.mapboxsdk.maps.MapView$6.run(MapView.java:321)
05-18 19:28:15.697  3444  3444 E AndroidRuntime: 	at android.os.Handler.handleCallback(Handler.java:789)
05-18 19:28:15.697  3444  3444 E AndroidRuntime: 	at android.os.Handler.dispatchMessage(Handler.java:98)
05-18 19:28:15.697  3444  3444 E AndroidRuntime: 	at android.os.Looper.loop(Looper.java:164)
05-18 19:28:15.697  3444  3444 E AndroidRuntime: 	at android.app.ActivityThread.main(ActivityThread.java:6798)
05-18 19:28:15.697  3444  3444 E AndroidRuntime: 	at java.lang.reflect.Method.invoke(Native Method)
05-18 19:28:15.697  3444  3444 E AndroidRuntime: 	at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
05-18 19:28:15.697  3444  3444 E AndroidRuntime: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)

Versions:

  • Platfrom: Android
  • Device: Oneplus 3T
  • OS: 8.0.0
  • SDK Version: 28
  • React Native Version: 0.59.0

RasterSource layer not displaying

Describe the bug

Library does not display raster source layers that contain a token in URL?

To Reproduce

Simply add a raster source layer that contains a token in the URL

Expected behavior

The raster source layer should display correctly just like the one in the exmaple:

      const rasterSourceProps = {
        id: 'stamenWatercolorSource',
        url: 'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg',
        tileSize: 256,
      };

With the stamen watercolor raster source defined it works just fine.

              <Mapbox.MapView
                zoomLevel={16}
                centerCoordinate={[-122.400021, 37.789085]}
                style={sheet.matchParent}
              >
                <Mapbox.RasterSource {...rasterSourceProps}>
                  <Mapbox.RasterLayer
                    id="stamenWatercolorLayer"
                    sourceID="stamenWatercolorSource"
                    style={{rasterOpacity: .5}}
                  />
                </Mapbox.RasterSource>
              </Mapbox.MapView>

To see bug add a raster source layer that has a token. Example:

  const rasterSourceProps = {
    id: 'stamenWatercolorSource',
    url: 'https://mapserver.neotreks.com/arcgis/rest/services/NeoTreks/LandCover/MapServer/tile/{z}/{y}/{x}?token=' + this.context.state.tokenNeoTreks,
    tileSize: 256,
  };

Screenshots

Watercolor raster source layer loads fine:
Screen Shot 2019-04-20 at 12 54 44 PM

Neotreks basemap does not load at all. Just left with default street view:
Screen Shot 2019-04-20 at 1 23 55 PM

react-native-maps has no issue loading Neotreks basemap raster layer. Screenshot of neotreks raster layer loading in react-native-maps library:
Screen Shot 2019-04-20 at 1 27 54 PM

Versions (please complete the following information):

  • Platfrom: iOS
  • Device: Simulator
  • React Native Version 0.59.5

Additional context
As noted previously this raster layer loads just fine in react-native-maps. It's not clear why this layer does not load as a raster layer in react-native-mapbox-gl

react-native-maps has no issue loading Neotreks basemap raster layer. Screenshot of neotreks raster layer loading in react-native-maps library:
Screen Shot 2019-04-20 at 1 27 54 PM

Unable to use Camera without followUserLocation

I'd like to set the bounds of a map with the Camera component, but the Camera component doesn't seem to work unless you define followUserLocation like this:

<MapboxGL.Camera
  followUserLocation
...

Setting followUserLocation={false} stops the map from showing any tiles on Android, although things in SymbolLayer still seem to show up. Curiously, followUserLocation={true} also has the same behavior.

Make it clear PointAnnotation is deprecated

So,

PointAnnotation is an old, deprecated API. Eventually it'll be removed from the library altogether I assume. In the meantime, I think we should consider removing it from the Readme, or at least putting a clear disclaimer that it's deprecated and buggy and won't be supported in issues.

When I started out with this module - back on the old repo - PointAnnotation seemed like a very valid option, and only after implementing & using it in my app and running into bugs did I read issues in which it was basically advised to move away from it. Moving to a SymbolLayer wasn't too hard but it was still a loss of time.

The Readme and documentation overall need an overhaul obviously, as I think everyone has said plenty of times, but I'd like to know how you guys feel about my proposition to visibly deprecate PointAnnotation.

[iOS] Cannot create property 'create' of undefined (MapboxGL.StyleSheet.create)

Describe the bug
I am trying to create a simple map with custom styling on FillLayer, however I am unable to declare styling. Trying MapboxGL.StyleSheet.create results in Cannot create property 'create' of undefined. Only tested on iOS so far. On actual device the error is undefined is not an object (evaluating _maps.default.StyleSheet.create).

To Reproduce

  1. Create a new react native app
  2. Install @react-native-mapbox/maps
  3. Replace App.js into the following code
import React, { Component } from "react";
import { StyleSheet, View, Dimensions } from "react-native";
import MapboxGL from "@react-native-mapbox/maps";

const { height: screenHeight, width: screenWidth } = Dimensions.get("window");

MapboxGL.setAccessToken("<your token>");

const mapStyle = MapboxGL.StyleSheet.create({
  buildings: {
    fillColor: "blue"
  },
  street: {
    lineColor: "green"
  }
});

export default class App extends Component {
  render() {
    const height = screenHeight;
    const width = screenWidth;

    return (
      <View style={styles.container}>
        <MapboxGL.MapView
          style={{ height, width }}
          onDidFailLoadingMap={error => {
            console.log(error);
          }}
          zoomLevel={17}
          zoomEnabled
        >
          <MapboxGL.Camera followZoomLevel={12} />
          <MapboxGL.FillLayer style={mapStyle.buildings} />
        </MapboxGL.MapView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5FCFF"
  }
});

Expected behavior
A map is rendered with the styles applied to the fill layer.

Screenshots
If applicable, add screenshots to help explain your problem.

Versions (please complete the following information):

  • Platfrom: iOS
  • Device: Simulator
  • OS: iOS 12.2
  • SDK Version: Latest
  • React Native Version: 0.59.8

Additional context
Without MapboxGL.StyleSheet.create the example above works.

[Discussion] Getting started guide

Hey, wanted to start the discussion on what everyone would like to see in a "getting started" guide.

So first of all, do you think this would be something useful to beginners?
I felt a bit lost in the beginning with just the api docs and the examples, so I think a guided getting started section that explains how to set everything up would be helpful to get more people in.

Would probably start picking up right from installation:

  • Setting up accessToken
  • showing specific map area
  • showing user location
  • using rasterLayer to render different tiles

Feedback welcome!

[Question] Camera _setCamera naming convention

I have started tested the 7.0 library in some of my apps. Some of the changes include the new Camera Component. I was wondering if there was a reason for renaming MapView#setCamera to Camera#_setCamera and not Camera#setCamera? Even though MapView#setCamera throws a warning MapView.setCamera is deprecated - please use Camera#setCamera.

Heatmap Support in 7.0.0

Context

I am currently writing an app that needs access to the Heatmap Layer provided in the Mapbox SDK for iOS and Android and I spent some time looking at issues on this repo and the previous one and all I could find was nitaliano/react-native-mapbox-gl#1048 explaining how support would be added in 7.0.0. I couldn't find anything in the docs or code indicating that this exists / is ready yet so I decided to go ahead and try and add it to my local fork, and I've been able to get things working on the Android side.

It turns out the styling code was already there in RCTMGLStyle.java, all I did was clone the RCTMGLCircleLayer.java from the components/styles directory into RCTMGLHeatmapLayer.java and made everything match up and repeated for the RCTMGLCircleLayerManager.java. Then I followed the chain upwards (imports and including in various places) until I was able to access it from the React Native side of things.

Error

I tried to go and do the same on the iOS side and initially it seemed straightforward because the project was structured the same but I'm not really familiar with iOS development or Objective C, I was just kind of winging it and I got stuck at a build error

No visible @interface for RCTMGLStyle declares the selector HeatmapLayer:withReactStyle:

I checked the RCTMGLStyle.m file and the methods for Heatmaps exist, and I found a method matching what the error says is missing, I cross checked with RCTMGLCircleLayer.m and everything matches up, so I can't figure out why it's throwing that error.

Any help on getting this fixed would be greatly appreciated. Also what is the current status of Heatmaps? If there isn't currently actively development (although the existence of those functions would indicate that there is), I'd be open to adding documentation and examples and submitting a pull request if this works.

Environment

[email protected]
@react-native-mapbox-gl/[email protected]
Platform: Android and iOS
Devices: Samsung Galaxy S9+, iPhone 6

Map Center Offset?

Hello,

is it possible to offset the center of the map? My map has 100vw and 100vh dimensions but I have a slider 1/3 of vh on top of the map. Can i center the map inside the first 2/3 of vh instead of the whole screen?

Kind Regards,
Tim

App crashes when using enums (lineCap/lineJoin/iconAnchor etc) with RN 0.59

Describe the bug
App crashes when using enum values with latest react-native / 0.59 with the following error:

Assertion failed: (it != std::end(MGLLineCap_names)), function toString, file /Users/distiller/project/platform/darwin/src/MGLLineStyleLayer.mm, line 23.

This issue is similar to this PR: nitaliano/react-native-mapbox-gl#1593

To Reproduce
Create a line layer and apply a linecap style: lineCap: MapboxGL.LineJoin.Round,

Expected behavior
App doesn't crash

Versions (please complete the following information):

  • Platfrom: iOS
  • Device: iPhonse SE (Simulator)
  • OS: iOS12.1
  • Deployment Target: 9.1
  • React Native Version 0.59.0

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.