├── .gitattributes ├── android ├── rctmgl │ ├── .gitignore │ ├── .npmignore │ ├── .settings │ │ └── org.eclipse.buildship.core.prefs │ ├── src │ │ └── main │ │ │ ├── res │ │ │ ├── values │ │ │ │ └── strings.xml │ │ │ └── layout │ │ │ │ └── annotation.xml │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ └── com │ │ │ └── mapbox │ │ │ └── rctmgl │ │ │ ├── location │ │ │ ├── UserLocationVerticalAlignment.java │ │ │ ├── UserLocationLayerConstants.java │ │ │ ├── UserTrackingState.java │ │ │ ├── UserTrackingMode.java │ │ │ └── UserLocation.java │ │ │ ├── events │ │ │ ├── IEvent.java │ │ │ ├── OfflineEvent.java │ │ │ ├── AndroidCallbackEvent.java │ │ │ ├── MapChangeEvent.java │ │ │ ├── MapUserTrackingModeEvent.java │ │ │ ├── PointAnnotationClickEvent.java │ │ │ ├── constants │ │ │ │ └── EventKeys.java │ │ │ ├── AbstractEvent.java │ │ │ └── MapClickEvent.java │ │ │ ├── components │ │ │ ├── annotation │ │ │ │ ├── RCTMGLCallout.java │ │ │ │ ├── RCTMGLCalloutManager.java │ │ │ │ └── RCTMGLCalloutAdapter.java │ │ │ ├── AbstractMapFeature.java │ │ │ ├── camera │ │ │ │ ├── constants │ │ │ │ │ └── CameraMode.java │ │ │ │ └── CameraUpdateQueue.java │ │ │ ├── mapview │ │ │ │ ├── RCTMGLAndroidTextureMapView.java │ │ │ │ ├── helpers │ │ │ │ │ └── CameraChangeTracker.java │ │ │ │ └── RCTMGLAndroidTextureMapViewManager.java │ │ │ ├── styles │ │ │ │ ├── layers │ │ │ │ │ ├── RCTMGLBackgroundLayer.java │ │ │ │ │ ├── RCTMGLRasterLayer.java │ │ │ │ │ ├── RCTMGLCircleLayer.java │ │ │ │ │ ├── RCTMGLLineLayer.java │ │ │ │ │ └── RCTMGLFillLayer.java │ │ │ │ ├── light │ │ │ │ │ ├── RCTMGLLightManager.java │ │ │ │ │ └── RCTMGLLight.java │ │ │ │ └── sources │ │ │ │ │ └── RCTMGLVectorSource.java │ │ │ └── AbstractEvent.java │ │ │ └── utils │ │ │ ├── SimpleEventCallback.java │ │ │ ├── ResourceUtils.java │ │ │ └── GeoViewport.java │ ├── proguard-rules.pro │ └── build.gradle ├── settings.gradle ├── .gitignore └── .npmignore ├── example ├── .eslintrc ├── app.json ├── babel.config.js ├── src │ ├── assets │ │ ├── giphy.gif │ │ ├── radar.png │ │ ├── radar1.png │ │ ├── radar2.png │ │ ├── example.png │ │ ├── grid_pattern.png │ │ └── test_pattern.jpg │ ├── MapboxClient.js │ ├── styles │ │ ├── sheet.js │ │ └── colors.js │ ├── utils │ │ ├── config.js │ │ └── index.js │ └── components │ │ ├── common │ │ ├── BaseExamplePropTypes.js │ │ ├── Page.js │ │ ├── Bubble.js │ │ └── MapHeader.js │ │ ├── GetZoom.js │ │ ├── SetPitch.js │ │ ├── SetBearing.js │ │ ├── FitBounds.js │ │ ├── CustomVectorSource.js │ │ ├── ShowMap.js │ │ ├── PointInMapView.js │ │ ├── TwoByTwo.js │ │ ├── SetUserLocationVerticalAlignment.js │ │ ├── GetCenter.js │ │ ├── GeoJSONSource.js │ │ └── DataDrivenCircleColors.js ├── android │ ├── app │ │ ├── src │ │ │ ├── main │ │ │ │ ├── res │ │ │ │ │ ├── values │ │ │ │ │ │ ├── strings.xml │ │ │ │ │ │ └── styles.xml │ │ │ │ │ ├── drawable │ │ │ │ │ │ └── pin.png │ │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ └── mipmap-xxxhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── assets │ │ │ │ │ └── fonts │ │ │ │ │ │ ├── Entypo.ttf │ │ │ │ │ │ ├── Zocial.ttf │ │ │ │ │ │ ├── Feather.ttf │ │ │ │ │ │ ├── Ionicons.ttf │ │ │ │ │ │ ├── Octicons.ttf │ │ │ │ │ │ ├── AntDesign.ttf │ │ │ │ │ │ ├── EvilIcons.ttf │ │ │ │ │ │ ├── FontAwesome.ttf │ │ │ │ │ │ ├── Foundation.ttf │ │ │ │ │ │ ├── MaterialIcons.ttf │ │ │ │ │ │ ├── SimpleLineIcons.ttf │ │ │ │ │ │ ├── FontAwesome5_Solid.ttf │ │ │ │ │ │ ├── FontAwesome5_Brands.ttf │ │ │ │ │ │ ├── FontAwesome5_Regular.ttf │ │ │ │ │ │ └── MaterialCommunityIcons.ttf │ │ │ │ ├── java │ │ │ │ │ └── com │ │ │ │ │ │ └── rnmapboxglexample │ │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ │ └── MainApplication.java │ │ │ │ └── AndroidManifest.xml │ │ │ └── debug │ │ │ │ ├── res │ │ │ │ └── xml │ │ │ │ │ └── react_native_config.xml │ │ │ │ └── AndroidManifest.xml │ │ ├── build_defs.bzl │ │ └── BUCK │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── keystores │ │ ├── debug.keystore.properties │ │ └── BUCK │ ├── settings.gradle │ ├── gradle.properties │ └── build.gradle ├── ios │ ├── RNMapboxGLExample │ │ ├── Images.xcassets │ │ │ ├── Contents.json │ │ │ ├── pin.imageset │ │ │ │ ├── pin.png │ │ │ │ └── Contents.json │ │ │ ├── mapbox-logo-color.imageset │ │ │ │ ├── mapbox-logo-color.png │ │ │ │ └── Contents.json │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── AppDelegate.h │ │ ├── main.m │ │ └── AppDelegate.m │ ├── RNMapboxGLExample.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ ├── IDEWorkspaceChecks.plist │ │ │ └── WorkspaceSettings.xcsettings │ ├── RNMapboxGLExampleTests │ │ └── Info.plist │ ├── RNMapboxGLExample-tvOSTests │ │ └── Info.plist │ ├── Podfile │ └── RNMapboxGLExample-tvOS │ │ └── Info.plist ├── scripts │ ├── clean_node_modules.sh │ ├── npm_pack_rngl.sh │ ├── set_access_token.js │ └── watch_rngl.js ├── index.js ├── __tests__ │ └── App.js ├── metro.config.js └── .gitignore ├── assets └── mapbox_logo.png ├── circle.yml ├── ios └── RCTMGL │ ├── RCTMGL.m │ ├── RCTMGL.h │ ├── RCTMGLLightManager.h │ ├── RCTMGLCalloutManager.h │ ├── RCTMGLFillLayerManager.h │ ├── RCTMGLLineLayerManager.h │ ├── RCTMGLCircleLayerManager.h │ ├── RCTMGLImageSourceManager.h │ ├── RCTMGLRasterLayer.h │ ├── RCTMGLRasterLayerManager.h │ ├── RCTMGLShapeSourceManager.h │ ├── RCTMGLSymbolLayerManager.h │ ├── RCTMGLVectorSourceManager.h │ ├── MGLSnapshotModule.h │ ├── RCTMGLRasterSourceManager.h │ ├── MGLModule.h │ ├── RCTMGLBackgroundLayer.h │ ├── RCTMGLBackgroundLayerManager.h │ ├── RCTMGLCallout.h │ ├── RCTMGLPointAnnotationManager.h │ ├── RCTMGLFillExtrusionLayerManager.h │ ├── RCTMGLCircleLayer.h │ ├── RCTMGLSymbolLayer.h │ ├── RCTMGLLineLayer.h │ ├── RCTMGLVectorSource.h │ ├── RCTConvert+Mapbox.h │ ├── RCTMGLFillLayer.h │ ├── MGLUserLocationHeadingIndicator.h │ ├── FilterParser.h │ ├── RCTMGLEventProtocol.h │ ├── RCTMGLLight.h │ ├── ViewManager.h │ ├── CameraMode.m │ ├── RNMBImageUtils.h │ ├── RCTMGLFillExtrusionLayer.h │ ├── RCTMGLImageSource.h │ ├── CameraMode.h │ ├── RCTMGLCalloutManager.m │ ├── RCTMGLVectorSource.m │ ├── RCTMGLMapViewManager.h │ ├── MGLUserLocationHeadingArrowLayer.h │ ├── RCTMGLLightManager.m │ ├── MGLUserLocationHeadingBeamLayer.h │ ├── CameraUpdateItem.h │ ├── MGLOfflineModule.h │ ├── RCTMGLImageQueueOperation.h │ ├── RCTMGLImageQueue.h │ ├── RCTMGLImageSourceManager.m │ ├── CameraUpdateQueue.h │ ├── RCTMGLRasterSource.h │ ├── RCTMGLEvent.h │ ├── FilterList.h │ ├── RCTMGLBackgroundLayer.m │ ├── RCTMGLVectorSourceManager.m │ ├── MGLFaux3DUserLocationAnnotationView.h │ ├── RCTMGLMapTouchEvent.h │ ├── RCTMGLRasterSourceManager.m │ ├── RCTMGLStyleValue.h │ ├── RCTMGLRasterLayer.m │ ├── RCTMGLLight.m │ ├── RCTConvert+Mapbox.m │ ├── CameraStop.h │ ├── RCTMGLRasterLayerManager.m │ ├── RCTMGLBackgroundLayerManager.m │ ├── RCTMGLPointAnnotationManager.m │ ├── RNMBImageUtils.m │ ├── RCTMGLEvent.m │ ├── RCTMGLFillLayerManager.m │ ├── RCTMGLSource.h │ ├── RCTMGLLineLayerManager.m │ ├── RCTMGLCircleLayerManager.m │ ├── RCTMGLShapeSource.h │ ├── RCTMGLSymbolLayerManager.m │ ├── RCTMGLFillExtrusionLayerManager.m │ ├── RCTMGLPointAnnotation.h │ ├── RCTMGLUtils.h │ ├── RCTMGLShapeSourceManager.m │ ├── RCTMGLRasterSource.m │ ├── RCTMGLLayer.h │ ├── RCTMGLFillLayer.m │ ├── RCTMGLLineLayer.m │ ├── RCTMGLImageQueue.m │ ├── RCTMGLCircleLayer.m │ ├── RCTMGLSymbolLayer.m │ ├── RCTMGLImageQueueOperation.m │ ├── RCTMGLFillExtrusionLayer.m │ ├── CameraUpdateQueue.m │ ├── ViewManager.m │ ├── RCTMGLEventTypes.h │ └── RCTMGLImageSource.m ├── __tests__ ├── modules │ ├── snapshot │ │ └── snapshotManager.test.js │ └── offline │ │ └── OfflinePack.test.js └── __mocks__ │ └── react-native.mock.js ├── javascript ├── modules │ └── offline │ │ ├── index.d.ts │ │ ├── OfflinePack.js │ │ └── OfflineCreatePackOptions.js ├── utils │ ├── filterUtils.js │ └── geoUtils.js └── components │ ├── Light.js │ └── AbstractLayer.js ├── scripts ├── download-style-spec.sh ├── download-mapbox-gl-native-ios-if-on-mac.js ├── autogenHelpers │ └── MarkdownBuilder.js ├── templates │ ├── RCTMGLStyle.h.ejs │ └── index.d.ts.ejs └── download-mapbox-gl-native-ios.sh ├── babel.config.js ├── .npmignore ├── react-native-mapbox-gl.podspec ├── docs ├── ImageSource.md ├── Callout.md ├── VectorSource.md ├── PointAnnotation.md ├── snapshotManager.md └── RasterSource.md ├── CONTRIBUTING.md └── .gitignore /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /android/rctmgl/.gitignore: -------------------------------------------------------------------------------- 1 | /build 2 | -------------------------------------------------------------------------------- /android/rctmgl/.npmignore: -------------------------------------------------------------------------------- 1 | /build 2 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | include ':rctmgl' 2 | -------------------------------------------------------------------------------- /example/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "import/no-unresolved": "off", 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "RNMapboxGLExample", 3 | "displayName": "RNMapboxGLExample" 4 | } -------------------------------------------------------------------------------- /assets/mapbox_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/assets/mapbox_logo.png -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["module:metro-react-native-babel-preset"] 3 | }; 4 | -------------------------------------------------------------------------------- /android/rctmgl/.settings/org.eclipse.buildship.core.prefs: -------------------------------------------------------------------------------- 1 | connection.project.dir= 2 | eclipse.preferences.version=1 3 | -------------------------------------------------------------------------------- /example/src/assets/giphy.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/src/assets/giphy.gif -------------------------------------------------------------------------------- /example/src/assets/radar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/src/assets/radar.png -------------------------------------------------------------------------------- /example/src/assets/radar1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/src/assets/radar1.png -------------------------------------------------------------------------------- /example/src/assets/radar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/src/assets/radar2.png -------------------------------------------------------------------------------- /android/rctmgl/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | RCTMGL 3 | 4 | -------------------------------------------------------------------------------- /example/src/assets/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/src/assets/example.png -------------------------------------------------------------------------------- /example/src/assets/grid_pattern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/src/assets/grid_pattern.png -------------------------------------------------------------------------------- /example/src/assets/test_pattern.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/src/assets/test_pattern.jpg -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | RNMapboxGLExample 3 | 4 | -------------------------------------------------------------------------------- /example/ios/RNMapboxGLExample/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | machine: 2 | node: 3 | version: 8 4 | environment: 5 | PATH: "${PATH}:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin" 6 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/drawable/pin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/res/drawable/pin.png -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Entypo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/assets/fonts/Entypo.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Zocial.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/assets/fonts/Zocial.ttf -------------------------------------------------------------------------------- /example/scripts/clean_node_modules.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | echo "Removing package-lock and removing node modules" 4 | rm package-lock.json 5 | rm -rf node_modules 6 | -------------------------------------------------------------------------------- /example/scripts/npm_pack_rngl.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | echo "Moving into ${RNGL}" 4 | cd ../ 5 | 6 | echo "Attempting to pack react-native-mapbox-gl" 7 | npm pack 8 | -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Feather.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/assets/fonts/Feather.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/assets/fonts/Ionicons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Octicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/assets/fonts/Octicons.ttf -------------------------------------------------------------------------------- /example/android/keystores/debug.keystore.properties: -------------------------------------------------------------------------------- 1 | key.store=debug.keystore 2 | key.alias=androiddebugkey 3 | key.store.password=android 4 | key.alias.password=android 5 | -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/AntDesign.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/assets/fonts/AntDesign.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/EvilIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/assets/fonts/EvilIcons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/FontAwesome.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/assets/fonts/FontAwesome.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Foundation.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/assets/fonts/Foundation.ttf -------------------------------------------------------------------------------- /android/.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/workspace.xml 5 | /.idea/libraries 6 | .DS_Store 7 | /build 8 | /captures 9 | .externalNativeBuild 10 | -------------------------------------------------------------------------------- /android/.npmignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/workspace.xml 5 | /.idea/libraries 6 | .DS_Store 7 | /build 8 | /captures 9 | .externalNativeBuild 10 | -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/MaterialIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/assets/fonts/MaterialIcons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/SimpleLineIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/assets/fonts/SimpleLineIcons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/ios/RNMapboxGLExample/Images.xcassets/pin.imageset/pin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/ios/RNMapboxGLExample/Images.xcassets/pin.imageset/pin.png -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/src/MapboxClient.js: -------------------------------------------------------------------------------- 1 | import MapboxClient from 'mapbox'; 2 | 3 | import config from './utils/config'; 4 | 5 | const client = new MapboxClient(config.get('accessToken')); 6 | export default client; 7 | -------------------------------------------------------------------------------- /example/android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = "debug", 3 | properties = "debug.keystore.properties", 4 | store = "debug.keystore", 5 | visibility = [ 6 | "PUBLIC", 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /example/src/styles/sheet.js: -------------------------------------------------------------------------------- 1 | import {StyleSheet} from 'react-native'; 2 | 3 | const styles = {}; 4 | 5 | styles.matchParent = { 6 | flex: 1, 7 | }; 8 | 9 | export default StyleSheet.create(styles); 10 | -------------------------------------------------------------------------------- /example/src/utils/config.js: -------------------------------------------------------------------------------- 1 | import env from '../../env.json'; 2 | 3 | class Config { 4 | get(key) { 5 | return env[key]; 6 | } 7 | } 8 | 9 | const config = new Config(); 10 | export default config; 11 | -------------------------------------------------------------------------------- /example/ios/RNMapboxGLExample/Images.xcassets/mapbox-logo-color.imageset/mapbox-logo-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/540/react-native-mapbox-gl/master/example/ios/RNMapboxGLExample/Images.xcassets/mapbox-logo-color.imageset/mapbox-logo-color.png -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGL.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGL.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 8/23/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGL.h" 10 | 11 | @implementation RCTMGL 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | zipStoreBase=GRADLE_USER_HOME 4 | zipStorePath=wrapper/dists 5 | distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip 6 | -------------------------------------------------------------------------------- /example/src/components/common/BaseExamplePropTypes.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | 3 | const BaseExamplePropTypes = { 4 | label: PropTypes.string.isRequired, 5 | onDismissExample: PropTypes.func.isRequired, 6 | }; 7 | 8 | export default BaseExamplePropTypes; 9 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGL.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGL.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 8/23/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | 11 | @interface RCTMGL : NSObject 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | * @lint-ignore-every XPLATJSCOPYRIGHT1 4 | */ 5 | 6 | import {AppRegistry} from 'react-native'; 7 | import App from './src/App'; 8 | import {name as appName} from './app.json'; 9 | 10 | AppRegistry.registerComponent(appName, () => App); 11 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLLightManager.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLLightManager.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/26/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "ViewManager.h" 10 | 11 | @interface RCTMGLLightManager : ViewManager 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLCalloutManager.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLCalloutViewManager.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 10/13/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "ViewManager.h" 10 | 11 | @interface RCTMGLCalloutManager : ViewManager 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLFillLayerManager.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLFillLayerManager.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/8/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "ViewManager.h" 10 | 11 | @interface RCTMGLFillLayerManager : ViewManager 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLLineLayerManager.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLLineLayerManager.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/18/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "ViewManager.h" 10 | 11 | @interface RCTMGLLineLayerManager : ViewManager 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLCircleLayerManager.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLCircleLayerManager.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/18/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "ViewManager.h" 10 | 11 | @interface RCTMGLCircleLayerManager : ViewManager 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLImageSourceManager.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLImageSourceManager.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 11/29/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "ViewManager.h" 10 | 11 | @interface RCTMGLImageSourceManager : ViewManager 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLRasterLayer.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLRasterLayer.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/25/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLLayer.h" 10 | @import Mapbox; 11 | 12 | @interface RCTMGLRasterLayer : RCTMGLLayer 13 | 14 | @end 15 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLRasterLayerManager.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLRasterLayerManager.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/25/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "ViewManager.h" 10 | 11 | @interface RCTMGLRasterLayerManager : ViewManager 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLShapeSourceManager.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLShapeSourceManager.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/19/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "ViewManager.h" 10 | 11 | @interface RCTMGLShapeSourceManager : ViewManager 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLSymbolLayerManager.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLSymbolLayerManager.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/19/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "ViewManager.h" 10 | 11 | @interface RCTMGLSymbolLayerManager : ViewManager 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLVectorSourceManager.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLVectorSourceManager.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/8/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "ViewManager.h" 10 | 11 | @interface RCTMGLVectorSourceManager : ViewManager 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /ios/RCTMGL/MGLSnapshotModule.h: -------------------------------------------------------------------------------- 1 | // 2 | // MGLSnapshotModule.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 12/1/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | 11 | @interface MGLSnapshotModule : NSObject 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLRasterSourceManager.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLRasterSourceManager.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/25/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "ViewManager.h" 10 | 11 | @interface RCTMGLRasterSourceManager : ViewManager 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /ios/RCTMGL/MGLModule.h: -------------------------------------------------------------------------------- 1 | // 2 | // MGLModule.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 8/23/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | #import 11 | 12 | @interface MGLModule : NSObject 13 | @end 14 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLBackgroundLayer.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLBackgroundLayer.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/25/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLLayer.h" 10 | @import Mapbox; 11 | 12 | @interface RCTMGLBackgroundLayer : RCTMGLLayer 13 | 14 | @end 15 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLBackgroundLayerManager.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLBackgroundLayerManager.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/25/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "ViewManager.h" 10 | 11 | @interface RCTMGLBackgroundLayerManager : ViewManager 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLCallout.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLCalloutView.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 10/13/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | 11 | @import Mapbox; 12 | 13 | @interface RCTMGLCallout : RCTView 14 | 15 | @end 16 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLPointAnnotationManager.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLPointAnnotationManager.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 10/12/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "ViewManager.h" 10 | 11 | @interface RCTMGLPointAnnotationManager : ViewManager 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /example/ios/RNMapboxGLExample.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/ios/RNMapboxGLExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLFillExtrusionLayerManager.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLFillExtrusionLayerManager.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/15/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "ViewManager.h" 10 | 11 | @interface RCTMGLFillExtrusionLayerManager : ViewManager 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /example/ios/RNMapboxGLExample.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | BuildSystemType 6 | Original 7 | 8 | 9 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLCircleLayer.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLCircleLayer.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/18/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLLayer.h" 10 | 11 | @interface RCTMGLCircleLayer : RCTMGLLayer 12 | 13 | @property (nonatomic, copy) NSString *sourceLayerID; 14 | 15 | @end 16 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLSymbolLayer.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLSymbolLayer.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/19/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLLayer.h" 10 | 11 | @interface RCTMGLSymbolLayer : RCTMGLLayer 12 | 13 | @property (nonatomic, copy) NSString *sourceLayerID; 14 | 15 | @end 16 | -------------------------------------------------------------------------------- /__tests__/modules/snapshot/snapshotManager.test.js: -------------------------------------------------------------------------------- 1 | import MapboxGL from '../../../javascript'; 2 | 3 | describe('snapshotManager', () => { 4 | it('should resolve uri', async () => { 5 | const options = {centerCoordinate: [1, 2]}; 6 | const uri = await MapboxGL.snapshotManager.takeSnap(options); 7 | expect(uri).toEqual('file://test.png'); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLLineLayer.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLLineLayer.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/18/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLLayer.h" 10 | @import Mapbox; 11 | 12 | @interface RCTMGLLineLayer : RCTMGLLayer 13 | 14 | @property (nonatomic, copy) NSString *sourceLayerID; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLVectorSource.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLVectorSource.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/8/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLSource.h" 10 | @import Mapbox; 11 | 12 | @interface RCTMGLVectorSource : RCTMGLSource 13 | 14 | @property (nonatomic, copy) NSString *url; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/location/UserLocationVerticalAlignment.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.location; 2 | 3 | /** 4 | * Created by nickitaliano on 12/13/17. 5 | */ 6 | 7 | public class UserLocationVerticalAlignment { 8 | public static final int CENTER = 0; 9 | public static final int TOP = 1; 10 | public static final int BOTTOM = 2; 11 | } 12 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTConvert+Mapbox.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTConvert+Mapbox.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 8/23/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | #import 11 | 12 | @interface RCTConvert (Mapbox) 13 | 14 | + (CLLocationCoordinate2D)GeoJSONPoint:(id)json; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /example/scripts/set_access_token.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | 4 | const accessToken = fs.readFileSync(path.join('./', 'accesstoken')); 5 | 6 | if (!accessToken) { 7 | process.exit(1); 8 | } 9 | 10 | const fileContents = `{ "accessToken": "${new String(accessToken).trim()}" }`; 11 | fs.writeFileSync(path.join('./', 'env.json'), fileContents); 12 | -------------------------------------------------------------------------------- /example/__tests__/App.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | * @lint-ignore-every XPLATJSCOPYRIGHT1 4 | */ 5 | 6 | import 'react-native'; 7 | import React from 'react'; 8 | import App from '../App'; 9 | 10 | // Note: test renderer must be required after react-native. 11 | import renderer from 'react-test-renderer'; 12 | 13 | it('renders correctly', () => { 14 | renderer.create(); 15 | }); 16 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLFillLayer.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLFillLayer.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/8/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLLayer.h" 10 | @import Mapbox; 11 | 12 | @interface RCTMGLFillLayer : RCTMGLLayer 13 | 14 | @property (nonatomic, copy) NSString *sourceLayerID; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | module.exports = { 9 | transformer: { 10 | getTransformOptions: async () => ({ 11 | transform: { 12 | experimentalImportSupport: false, 13 | inlineRequires: false, 14 | }, 15 | }), 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /ios/RCTMGL/MGLUserLocationHeadingIndicator.h: -------------------------------------------------------------------------------- 1 | #import 2 | @import Mapbox; 3 | 4 | @protocol MGLUserLocationHeadingIndicator 5 | 6 | - (instancetype)initWithUserLocationAnnotationView:(MGLUserLocationAnnotationView *)userLocationView; 7 | - (void)updateHeadingAccuracy:(CLLocationDirection)accuracy; 8 | - (void)updateTintColor:(CGColorRef)color; 9 | 10 | @end 11 | -------------------------------------------------------------------------------- /ios/RCTMGL/FilterParser.h: -------------------------------------------------------------------------------- 1 | // 2 | // FilterParser.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 10/3/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | #import 9 | #import "FilterList.h" 10 | 11 | @interface FilterParser : NSObject 12 | 13 | + (NSSet*)FILTER_OPS; 14 | + (NSPredicate*)parse:(FilterList *)filter; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLEventProtocol.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLEvent.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 8/25/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | @protocol RCTMGLEventProtocol 10 | 11 | @property (nonatomic, copy) NSString *type; 12 | @property (nonatomic, strong) NSDictionary *payload; 13 | 14 | - (NSDictionary*)toJSON; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /example/android/app/src/debug/res/xml/react_native_config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | localhost 5 | 10.0.2.2 6 | 10.0.3.2 7 | 8 | -------------------------------------------------------------------------------- /javascript/modules/offline/index.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'mapbox__react-native-mapbox-gl/javascript/modules/offline' 2 | 3 | declare class OfflinePack { 4 | constructor(pack: any); 5 | 6 | name(): string; 7 | bounds(): Array; 8 | metadata(): any; 9 | status(): Promise; 10 | resume(): Promise; 11 | pause(): Promise; 12 | } 13 | 14 | export { OfflinePack }; -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLLight.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLLight.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/26/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | @import Mapbox; 11 | 12 | @interface RCTMGLLight : UIView 13 | 14 | @property (nonatomic, strong) MGLMapView *map; 15 | @property (nonatomic, strong) NSDictionary *reactStyle; 16 | 17 | @end 18 | -------------------------------------------------------------------------------- /ios/RCTMGL/ViewManager.h: -------------------------------------------------------------------------------- 1 | // 2 | // ViewManager.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 8/31/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | #import "RCTMGLEvent.h" 11 | 12 | @interface ViewManager : RCTViewManager 13 | 14 | -(void)fireEvent:(RCTMGLEvent*)event withCallback:(RCTBubblingEventBlock)callback; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /__tests__/__mocks__/react-native.mock.js: -------------------------------------------------------------------------------- 1 | jest.mock('react-native/Libraries/Image/resolveAssetSource', () => { 2 | return () => ({uri: 'asset://test.png'}); 3 | }); 4 | 5 | jest.mock('NativeEventEmitter', () => { 6 | function MockEventEmitter() {} 7 | MockEventEmitter.prototype.addListener = function() {}; 8 | MockEventEmitter.prototype.removeListener = function() {}; 9 | return MockEventEmitter; 10 | }); 11 | -------------------------------------------------------------------------------- /ios/RCTMGL/CameraMode.m: -------------------------------------------------------------------------------- 1 | // 2 | // CameraMode.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/6/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "CameraMode.h" 10 | 11 | @implementation CameraMode 12 | 13 | int const RCT_MAPBOX_CAMERA_MODE_FLIGHT = 1; 14 | int const RCT_MAPBOX_CAMERA_MODE_EASE = 2; 15 | int const RCT_MAPBOX_CAMERA_MODE_NONE = 3; 16 | 17 | @end 18 | -------------------------------------------------------------------------------- /ios/RCTMGL/RNMBImageUtils.h: -------------------------------------------------------------------------------- 1 | // 2 | // RNMBImageUtils.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 1/18/18. 6 | // Copyright © 2018 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | #import 11 | 12 | @interface RNMBImageUtils : NSObject 13 | 14 | +(NSString *)createTempFile:(UIImage *)image; 15 | +(NSString *)createBase64:(UIImage *)image; 16 | 17 | @end 18 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLFillExtrusionLayer.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLFillExtrusionLayer.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/15/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLLayer.h" 10 | @import Mapbox; 11 | 12 | @interface RCTMGLFillExtrusionLayer : RCTMGLLayer 13 | 14 | @property (nonatomic, copy) NSString *sourceLayerID; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLImageSource.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLImageSource.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 11/29/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLSource.h" 10 | 11 | @interface RCTMGLImageSource : RCTMGLSource 12 | 13 | @property (nonatomic, copy) NSString *url; 14 | @property (nonatomic, copy) NSArray *> *coordinates; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /ios/RCTMGL/CameraMode.h: -------------------------------------------------------------------------------- 1 | // 2 | // CameraMode.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/6/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | 11 | @interface CameraMode : NSObject 12 | 13 | extern int const RCT_MAPBOX_CAMERA_MODE_FLIGHT; 14 | extern int const RCT_MAPBOX_CAMERA_MODE_EASE; 15 | extern int const RCT_MAPBOX_CAMERA_MODE_NONE; 16 | 17 | @end 18 | -------------------------------------------------------------------------------- /scripts/download-style-spec.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | echo "Downloading MapboxGL Style Spec" 4 | cd style-spec/ 5 | 6 | FILENAME=v8.json 7 | 8 | if [ -e "./${FILENAME}" ]; then 9 | echo "Removing old style spec ${FILENAME}" 10 | rm "./${FILENAME}" 11 | fi 12 | 13 | echo "Fetching new style spec ${FILENAME}" 14 | curl -sS https://raw.githubusercontent.com/mapbox/mapbox-gl-js/master/src/style-spec/reference/${FILENAME} -o ${FILENAME} 15 | cd .. 16 | -------------------------------------------------------------------------------- /example/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLCalloutManager.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLCalloutViewManager.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 10/13/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLCalloutManager.h" 10 | #import "RCTMGLCallout.h" 11 | 12 | @implementation RCTMGLCalloutManager 13 | 14 | RCT_EXPORT_MODULE() 15 | 16 | - (UIView *)view 17 | { 18 | return [[RCTMGLCallout alloc] init]; 19 | } 20 | 21 | @end 22 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLVectorSource.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLVectorSource.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/8/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLVectorSource.h" 10 | 11 | @implementation RCTMGLVectorSource 12 | 13 | - (MGLSource*)makeSource 14 | { 15 | return [[MGLVectorSource alloc] initWithIdentifier:self.id configurationURL:[NSURL URLWithString:_url]]; 16 | } 17 | 18 | @end 19 | -------------------------------------------------------------------------------- /example/src/utils/index.js: -------------------------------------------------------------------------------- 1 | import {Platform} from 'react-native'; 2 | 3 | export const IS_ANDROID = Platform.OS === 'android'; 4 | export const DEFAULT_CENTER_COORDINATE = [-77.036086, 38.910233]; 5 | export const SF_OFFICE_COORDINATE = [-122.400021, 37.789085]; 6 | 7 | export function onSortOptions(a, b) { 8 | if (a.label < b.label) { 9 | return -1; 10 | } 11 | 12 | if (a.label > b.label) { 13 | return 1; 14 | } 15 | 16 | return 0; 17 | } 18 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLMapViewManager.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLMapViewManager.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 8/23/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "ViewManager.h" 10 | @import Mapbox; 11 | 12 | @interface RCTMGLMapViewManager : ViewManager 13 | 14 | - (void)didTapMap:(UITapGestureRecognizer *)recognizer; 15 | - (void)didLongPressMap:(UILongPressGestureRecognizer *)recognizer; 16 | 17 | @end 18 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/events/IEvent.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.events; 2 | 3 | import com.facebook.react.bridge.WritableMap; 4 | 5 | /** 6 | * Created by nickitaliano on 8/23/17. 7 | */ 8 | 9 | public interface IEvent { 10 | int getID(); 11 | String getKey(); 12 | String getType(); 13 | long getTimestamp(); 14 | boolean equals(IEvent event); 15 | WritableMap getPayload(); 16 | WritableMap toJSON(); 17 | } 18 | -------------------------------------------------------------------------------- /example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'RNMapboxGLExample' 2 | include ':app' 3 | 4 | include ':mapbox-react-native-mapbox-gl' 5 | project(':mapbox-react-native-mapbox-gl').projectDir = new File(rootProject.projectDir, '../node_modules/@mapbox/react-native-mapbox-gl/android/rctmgl') 6 | 7 | include ':react-native-vector-icons' 8 | project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') 9 | -------------------------------------------------------------------------------- /example/ios/RNMapboxGLExample/Images.xcassets/mapbox-logo-color.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "mapbox-logo-color.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "scale" : "2x" 11 | }, 12 | { 13 | "idiom" : "universal", 14 | "scale" : "3x" 15 | } 16 | ], 17 | "info" : { 18 | "version" : 1, 19 | "author" : "xcode" 20 | } 21 | } -------------------------------------------------------------------------------- /ios/RCTMGL/MGLUserLocationHeadingArrowLayer.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import "MGLUserLocationHeadingIndicator.h" 3 | @import Mapbox; 4 | 5 | @interface MGLUserLocationHeadingArrowLayer : CAShapeLayer 6 | 7 | - (instancetype)initWithUserLocationAnnotationView:(MGLUserLocationAnnotationView *)userLocationView; 8 | - (void)updateHeadingAccuracy:(CLLocationDirection)accuracy; 9 | - (void)updateTintColor:(CGColorRef)color; 10 | 11 | @end 12 | -------------------------------------------------------------------------------- /example/ios/RNMapboxGLExample/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | #import 10 | 11 | @interface AppDelegate : UIResponder 12 | 13 | @property (nonatomic, strong) UIWindow *window; 14 | 15 | @end 16 | -------------------------------------------------------------------------------- /example/ios/RNMapboxGLExample/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | 10 | #import "AppDelegate.h" 11 | 12 | int main(int argc, char * argv[]) { 13 | @autoreleasepool { 14 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLLightManager.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLLightManager.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/26/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLLightManager.h" 10 | #import "RCTMGLLight.h" 11 | 12 | @implementation RCTMGLLightManager 13 | 14 | RCT_EXPORT_MODULE() 15 | 16 | RCT_EXPORT_VIEW_PROPERTY(reactStyle, NSDictionary); 17 | 18 | - (UIView*)view 19 | { 20 | return [RCTMGLLight new]; 21 | } 22 | 23 | @end 24 | -------------------------------------------------------------------------------- /ios/RCTMGL/MGLUserLocationHeadingBeamLayer.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import "MGLUserLocationHeadingIndicator.h" 3 | @import Mapbox; 4 | 5 | @interface MGLUserLocationHeadingBeamLayer : CALayer 6 | 7 | - (MGLUserLocationHeadingBeamLayer *)initWithUserLocationAnnotationView:(MGLUserLocationAnnotationView *)userLocationView; 8 | - (void)updateHeadingAccuracy:(CLLocationDirection)accuracy; 9 | - (void)updateTintColor:(CGColorRef)color; 10 | 11 | @end 12 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/rnmapboxglexample/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.rnmapboxglexample; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "RNMapboxGLExample"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | plugins: [ 4 | // Use @babel/preset-flow when 5 | // https://github.com/babel/babel/issues/7233 is fixed 6 | '@babel/plugin-transform-flow-strip-types', 7 | ['@babel/plugin-proposal-class-properties', {loose: true}], 8 | '@babel/plugin-transform-exponentiation-operator', 9 | ], 10 | env: { 11 | production: { 12 | plugins: ['transform-remove-console'], 13 | }, 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /ios/RCTMGL/CameraUpdateItem.h: -------------------------------------------------------------------------------- 1 | // 2 | // CameraUpdateItem.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/6/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "CameraStop.h" 10 | #import "RCTMGLMapView.h" 11 | 12 | @interface CameraUpdateItem : NSObject 13 | 14 | @property (nonatomic, strong) CameraStop* _Nonnull cameraStop; 15 | 16 | - (void)execute:(RCTMGLMapView* _Nonnull)mapView withCompletionHandler:(nullable void (^)(void))completionHandler; 17 | 18 | @end 19 | -------------------------------------------------------------------------------- /ios/RCTMGL/MGLOfflineModule.h: -------------------------------------------------------------------------------- 1 | // 2 | // MGLOfflineModule.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 10/25/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | #import 11 | 12 | @import Mapbox; 13 | 14 | @interface MGLOfflineModule : RCTEventEmitter 15 | 16 | extern NSString *const RCT_MAPBOX_OFFLINE_CALLBACK_PROGRESS; 17 | extern NSString *const RCT_MAPBOX_OFFLINE_CALLBACK_ERROR; 18 | 19 | @end 20 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLImageQueueOperation.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLImageQueueOperation.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 2/28/18. 6 | // Copyright © 2018 Mapbox Inc. All rights reserved. 7 | // 8 | #import 9 | 10 | @interface RCTMGLImageQueueOperation : NSBlockOperation 11 | 12 | @property (nonatomic, weak) RCTBridge *bridge; 13 | @property (nonatomic, copy) RCTImageLoaderCompletionBlock completionHandler; 14 | @property (nonatomic, copy) NSURLRequest *urlRequest; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /example/ios/RNMapboxGLExample/Images.xcassets/pin.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "pin.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "filename" : "pin.png", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "filename" : "pin.png", 16 | "scale" : "3x" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLImageQueue.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLImageQueue.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 10/23/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | #import 11 | 12 | @interface RCTMGLImageQueue : NSObject 13 | 14 | + (instancetype)sharedInstance; 15 | 16 | - (void)cancelAllOperations; 17 | - (void)addImage:(NSString *)imageURL bridge:(RCTBridge *)bridge completionHandler:(RCTImageLoaderCompletionBlock)handler; 18 | 19 | @end 20 | -------------------------------------------------------------------------------- /scripts/download-mapbox-gl-native-ios-if-on-mac.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | var version = process.argv[2]; 4 | var path = require('path'); 5 | 6 | // only download iOS SDK if on Mac OS 7 | if (process.platform === 'darwin') { 8 | var exec = require('child_process').exec; 9 | var cmd = `"${path.join(__dirname, 'download-mapbox-gl-native-ios.sh')}" ${version}`; 10 | exec(cmd, function(error, stdout, stderr) { 11 | if (error) { 12 | console.error(error); 13 | return; 14 | } 15 | console.log(stdout); 16 | console.log(stderr); 17 | }); 18 | } 19 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLImageSourceManager.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLImageSourceManager.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 11/29/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLImageSourceManager.h" 10 | #import "RCTMGLImageSource.h" 11 | 12 | @implementation RCTMGLImageSourceManager 13 | 14 | RCT_EXPORT_MODULE() 15 | 16 | RCT_EXPORT_VIEW_PROPERTY(id, NSString) 17 | RCT_EXPORT_VIEW_PROPERTY(url, NSString) 18 | RCT_EXPORT_VIEW_PROPERTY(coordinates, NSArray) 19 | 20 | - (UIView*)view 21 | { 22 | return [RCTMGLImageSource new]; 23 | } 24 | 25 | @end 26 | -------------------------------------------------------------------------------- /ios/RCTMGL/CameraUpdateQueue.h: -------------------------------------------------------------------------------- 1 | // 2 | // CameraUpdateQueue.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/6/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "CameraStop.h" 10 | #import "CameraUpdateItem.h" 11 | #import "RCTMGLMapView.h" 12 | 13 | @interface CameraUpdateQueue : NSObject 14 | 15 | - (void)enqueue:(CameraStop* _Nonnull)cameraUpdateItem; 16 | - (CameraStop* _Nonnull)dequeue; 17 | - (void)flush; 18 | - (BOOL)isEmpty; 19 | - (void)execute:(RCTMGLMapView* _Nonnull)mapView withCompletionHandler:(nullable void (^)(void))completionHandler; 20 | 21 | @end 22 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/components/annotation/RCTMGLCallout.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.components.annotation; 2 | 3 | import android.content.Context; 4 | 5 | import com.facebook.react.views.view.ReactViewGroup; 6 | 7 | /** 8 | * Created by nickitaliano on 10/11/17. 9 | */ 10 | 11 | public class RCTMGLCallout extends ReactViewGroup { 12 | public RCTMGLCallout(Context context) { 13 | super(context); 14 | } 15 | 16 | @Override 17 | protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 18 | setMeasuredDimension(getWidth(), getHeight()); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/components/AbstractMapFeature.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.components; 2 | 3 | import android.content.Context; 4 | 5 | import com.facebook.react.views.view.ReactViewGroup; 6 | import com.mapbox.rctmgl.components.mapview.RCTMGLMapView; 7 | 8 | /** 9 | * Created by nickitaliano on 9/6/17. 10 | */ 11 | 12 | public abstract class AbstractMapFeature extends ReactViewGroup { 13 | public AbstractMapFeature(Context context) { 14 | super(context); 15 | } 16 | 17 | public abstract void addToMap(RCTMGLMapView mapView); 18 | public abstract void removeFromMap(RCTMGLMapView mapView); 19 | } 20 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/constants/CameraMode.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.components.camera.constants; 2 | 3 | import android.support.annotation.IntDef; 4 | 5 | import java.lang.annotation.Retention; 6 | import java.lang.annotation.RetentionPolicy; 7 | 8 | /** 9 | * Created by nickitaliano on 9/6/17. 10 | */ 11 | 12 | public class CameraMode { 13 | 14 | @IntDef({ FLIGHT, EASE, NONE }) 15 | @Retention(RetentionPolicy.SOURCE) 16 | public @interface Mode {} 17 | 18 | public static final int FLIGHT = 1; 19 | public static final int EASE = 2; 20 | public static final int NONE = 3; 21 | } 22 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLRasterSource.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLRasterSource.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/25/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLSource.h" 10 | @import Mapbox; 11 | 12 | @interface RCTMGLRasterSource : RCTMGLSource 13 | 14 | @property (nonatomic, copy) NSString *url; 15 | @property (nonatomic, copy) NSString *attribution; 16 | 17 | @property (nonatomic, strong) NSNumber *tileSize; 18 | @property (nonatomic, strong) NSNumber *minZoomLevel; 19 | @property (nonatomic, strong) NSNumber *maxZoomLevel; 20 | 21 | @property (nonatomic, assign) BOOL tms; 22 | 23 | @end 24 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLEvent.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLEvent.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 8/25/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | #import "RCTMGLEventProtocol.h" 11 | 12 | @interface RCTMGLEvent : NSObject 13 | 14 | @property (nonatomic, copy) NSString *type; 15 | @property (nonatomic, strong) NSDictionary *payload; 16 | @property (nonatomic, readonly) NSTimeInterval timestamp; 17 | 18 | + (RCTMGLEvent*)makeEvent:(NSString*)eventType; 19 | + (RCTMGLEvent*)makeEvent:(NSString*)eventType withPayload:(NSDictionary*)payload; 20 | 21 | @end 22 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/location/UserLocationLayerConstants.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.location; 2 | 3 | /** 4 | * Created by nickitaliano on 1/8/18. 5 | */ 6 | 7 | public class UserLocationLayerConstants { 8 | public static final String BACKGROUND_LAYER_ID = "mapbox-location-stroke-layer"; 9 | public static final String FOREGROUND_LAYER_ID = "mapbox-location-layer"; 10 | public static final String ACCURACY_LAYER_ID = "mapbox-location-accuracy-layer"; 11 | public static final String BEARING_LAYER_ID = "mapbox-location-bearing-layer"; 12 | public static final String NAVIGATION_LAYER_ID = "mapbox-location-navigation-layer"; 13 | } 14 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/location/UserTrackingState.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.location; 2 | 3 | /** 4 | * Created by nickitaliano on 12/13/17. 5 | */ 6 | 7 | public class UserTrackingState { 8 | // The map view not yet tracked the user location 9 | public static final int POSSIBLE = 0; 10 | 11 | // The map view has begun to move to the first user location 12 | public static final int BEGAN = 1; 13 | 14 | // The map views begins a significant transition 15 | public static final int SIGNIFICANT_TRANSITION = 2; 16 | 17 | // The map view has finished moving to the user location 18 | public static final int CHANGED = 3; 19 | } 20 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/components/mapview/RCTMGLAndroidTextureMapView.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.components.mapview; 2 | 3 | import android.content.Context; 4 | import com.mapbox.mapboxsdk.maps.MapboxMapOptions; 5 | /** 6 | * Created by hernanmateo on 12/11/18. 7 | */ 8 | 9 | @SuppressWarnings({"MissingPermission"}) 10 | public class RCTMGLAndroidTextureMapView extends RCTMGLMapView { 11 | public static final String LOG_TAG = RCTMGLAndroidTextureMapView.class.getSimpleName(); 12 | 13 | public RCTMGLAndroidTextureMapView(Context context, RCTMGLAndroidTextureMapViewManager manager, MapboxMapOptions options) { 14 | super(context, manager, options); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /example/android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/res/layout/annotation.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 11 | 12 | 17 | 18 | -------------------------------------------------------------------------------- /javascript/utils/filterUtils.js: -------------------------------------------------------------------------------- 1 | import BridgeValue from './BridgeValue'; 2 | 3 | export function getFilter(filter) { 4 | if (!Array.isArray(filter) || filter.length === 0) { 5 | return []; 6 | } 7 | 8 | let flattenedFilter = []; 9 | for (let i = 0; i < filter.length; i++) { 10 | const item = filter[i]; 11 | 12 | if (Array.isArray(item)) { 13 | flattenedFilter = flattenedFilter.concat(item); 14 | } else { 15 | flattenedFilter.push(item); 16 | } 17 | } 18 | 19 | const filterItems = []; 20 | for (const item of flattenedFilter) { 21 | const filterItem = new BridgeValue(item); 22 | filterItems.push(filterItem.toJSON()); 23 | } 24 | 25 | return filterItems; 26 | } 27 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | Podfile.lock 25 | Pods/ 26 | 27 | # node.js 28 | # 29 | node_modules/ 30 | npm-debug.log 31 | 32 | # project specific 33 | android/.gradle/ 34 | android/.idea/ 35 | android/android.iml 36 | android/gradle/ 37 | android/gradlew 38 | android/gradlew.bat 39 | android/local.properties 40 | 41 | # react-native-mapbox-gl 42 | example 43 | __tests__ 44 | coverage 45 | -------------------------------------------------------------------------------- /react-native-mapbox-gl.podspec: -------------------------------------------------------------------------------- 1 | require 'json' 2 | 3 | package = JSON.parse(File.read(File.join(__dir__, 'package.json'))) 4 | 5 | Pod::Spec.new do |s| 6 | s.name = "react-native-mapbox-gl" 7 | s.summary = "React Native Component for Mapbox GL" 8 | s.version = package['version'] 9 | s.authors = { "Nick Italiano" => "ni6@njit.edu" } 10 | s.homepage = "https://github.com/mapbox/react-native-mapbox-gl#readme" 11 | s.license = "MIT" 12 | s.platform = :ios, "8.0" 13 | s.source = { :git => "https://github.com/mapbox/react-native-mapbox-gl.git" } 14 | s.source_files = "ios/RCTMGL/**/*.{h,m}" 15 | 16 | s.vendored_frameworks = 'ios/Mapbox.framework' 17 | s.dependency 'React' 18 | end 19 | -------------------------------------------------------------------------------- /ios/RCTMGL/FilterList.h: -------------------------------------------------------------------------------- 1 | // 2 | // FilterList.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 11/14/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | 11 | @interface FilterList : NSObject 12 | 13 | @property (nonatomic, readonly) NSUInteger count; 14 | 15 | - (instancetype)initWithArray:(NSArray *)rawFilterList; 16 | - (void)removeAll:(FilterList *)filterList; 17 | - (NSDictionary *)get:(NSUInteger)index; 18 | - (NSString *)getString:(NSUInteger)index; 19 | - (NSDictionary *)removeFirst; 20 | - (FilterList *)subList:(NSUInteger)lastPosition; 21 | - (NSArray *)getValues; 22 | - (BOOL)isEmpty; 23 | 24 | @end 25 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLBackgroundLayer.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLBackgroundLayer.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/25/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLBackgroundLayer.h" 10 | #import "RCTMGLStyle.h" 11 | 12 | @implementation RCTMGLBackgroundLayer 13 | 14 | - (MGLStyleLayer*)makeLayer:(MGLStyle*)style 15 | { 16 | return [[MGLBackgroundStyleLayer alloc] initWithIdentifier:self.id]; 17 | } 18 | 19 | - (void)addStyles 20 | { 21 | RCTMGLStyle *style = [[RCTMGLStyle alloc] initWithMGLStyle:self.style]; 22 | style.bridge = self.bridge; 23 | [style backgroundLayer:(MGLBackgroundStyleLayer*)self.styleLayer withReactStyle:self.reactStyle]; 24 | } 25 | 26 | @end 27 | -------------------------------------------------------------------------------- /docs/ImageSource.md: -------------------------------------------------------------------------------- 1 | ## 2 | ### ImageSource is a content source that is used for a georeferenced raster image to be shown on the map.
The georeferenced image scales and rotates as the user zooms and rotates the map 3 | 4 | ### props 5 | | Prop | Type | Default | Required | Description | 6 | | ---- | :--: | :-----: | :------: | :----------: | 7 | | id | `string` | `none` | `false` | A string that uniquely identifies the source. | 8 | | url | `union` | `none` | `false` | An HTTP(S) URL, absolute file URL, or local file URL to the source image.
Gifs are currently not supported. | 9 | | coordinates | `arrayOf` | `none` | `true` | The top left, top right, bottom right, and bottom left coordinates for the image. | 10 | 11 | 12 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLVectorSourceManager.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLVectorSourceManager.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/8/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLVectorSourceManager.h" 10 | #import "RCTMGLVectorSource.h" 11 | 12 | @implementation RCTMGLVectorSourceManager 13 | 14 | RCT_EXPORT_MODULE(); 15 | 16 | RCT_EXPORT_VIEW_PROPERTY(id, NSString); 17 | 18 | - (UIView*)view 19 | { 20 | return [RCTMGLVectorSource new]; 21 | } 22 | 23 | RCT_EXPORT_VIEW_PROPERTY(url, NSString); 24 | RCT_EXPORT_VIEW_PROPERTY(hasPressListener, BOOL) 25 | RCT_REMAP_VIEW_PROPERTY(onMapboxVectorSourcePress, onPress, RCTBubblingEventBlock) 26 | RCT_EXPORT_VIEW_PROPERTY(hitbox, NSDictionary) 27 | 28 | @end 29 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/components/annotation/RCTMGLCalloutManager.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.components.annotation; 2 | 3 | import com.facebook.react.uimanager.ThemedReactContext; 4 | import com.facebook.react.uimanager.ViewGroupManager; 5 | 6 | /** 7 | * Created by nickitaliano on 10/11/17. 8 | */ 9 | 10 | public class RCTMGLCalloutManager extends ViewGroupManager { 11 | public static final String REACT_CLASS = RCTMGLCallout.class.getSimpleName(); 12 | 13 | @Override 14 | public String getName() { 15 | return REACT_CLASS; 16 | } 17 | 18 | @Override 19 | protected RCTMGLCallout createViewInstance(ThemedReactContext reactContext) { 20 | return new RCTMGLCallout(reactContext); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /ios/RCTMGL/MGLFaux3DUserLocationAnnotationView.h: -------------------------------------------------------------------------------- 1 | // 2 | // MGLFaux3DUserLocationAnnotationView.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 12/20/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | @import Mapbox; 11 | 12 | extern const CGFloat MGLUserLocationAnnotationDotSize; 13 | extern const CGFloat MGLUserLocationAnnotationHaloSize; 14 | 15 | extern const CGFloat MGLUserLocationAnnotationPuckSize; 16 | extern const CGFloat MGLUserLocationAnnotationArrowSize; 17 | 18 | // Threshold in radians between heading indicator rotation updates. 19 | extern const CGFloat MGLUserLocationHeadingUpdateThreshold; 20 | 21 | @interface MGLFaux3DUserLocationAnnotationView : MGLUserLocationAnnotationView 22 | 23 | @end 24 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | Podfile.lock 25 | Pods/ 26 | 27 | # node.js 28 | # 29 | node_modules/ 30 | npm-debug.log 31 | package-lock.json 32 | *.tgz 33 | 34 | # project specific 35 | ios/Mapbox.framework 36 | android/.gradle/ 37 | android/build/ 38 | android/.idea/ 39 | android/android.iml 40 | android/app/app.iml 41 | android/local.properties 42 | reactnativemapboxgl.iml 43 | .idea 44 | accesstoken 45 | env.json 46 | android/app/rnmapboxglexample.keystore 47 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLMapTouchEvent.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLTouchEvent.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 8/25/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | #import "RCTMGLEvent.h" 11 | #import "RCTMGLPointAnnotation.h" 12 | @import Mapbox; 13 | 14 | @interface RCTMGLMapTouchEvent : RCTMGLEvent 15 | 16 | @property (nonatomic, assign) CLLocationCoordinate2D coordinate; 17 | @property (nonatomic, assign) CGPoint screenPoint; 18 | 19 | + (RCTMGLMapTouchEvent*)makeTapEvent:(MGLMapView*)mapView withPoint:(CGPoint)point; 20 | + (RCTMGLMapTouchEvent*)makeLongPressEvent:(MGLMapView*)mapView withPoint:(CGPoint)point; 21 | + (RCTMGLMapTouchEvent *)makeAnnotationTapEvent:(RCTMGLPointAnnotation *)pointAnnotation; 22 | 23 | @end 24 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/events/OfflineEvent.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.events; 2 | 3 | import com.facebook.react.bridge.ReadableMap; 4 | import com.facebook.react.bridge.WritableMap; 5 | 6 | /** 7 | * Created by nickitaliano on 10/24/17. 8 | */ 9 | 10 | public class OfflineEvent extends AbstractEvent { 11 | private String mEventKey; 12 | private WritableMap mPayload; 13 | 14 | public OfflineEvent(String eventKey, String eventType, WritableMap payload) { 15 | super(eventType); 16 | mEventKey = eventKey; 17 | mPayload = payload; 18 | } 19 | 20 | @Override 21 | public String getKey() { 22 | return mEventKey; 23 | } 24 | 25 | @Override 26 | public WritableMap getPayload() { 27 | return mPayload; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLRasterSourceManager.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLRasterSourceManager.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/25/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLRasterSourceManager.h" 10 | #import "RCTMGLRasterSource.h" 11 | 12 | @implementation RCTMGLRasterSourceManager 13 | 14 | RCT_EXPORT_MODULE() 15 | 16 | RCT_EXPORT_VIEW_PROPERTY(id, NSString) 17 | RCT_EXPORT_VIEW_PROPERTY(url, NSString) 18 | RCT_EXPORT_VIEW_PROPERTY(attribution, NSString) 19 | 20 | RCT_EXPORT_VIEW_PROPERTY(tileSize, NSNumber) 21 | RCT_EXPORT_VIEW_PROPERTY(minZoomLevel, NSNumber) 22 | RCT_EXPORT_VIEW_PROPERTY(maxZoomLevel, NSNumber) 23 | 24 | RCT_EXPORT_VIEW_PROPERTY(tms, BOOL) 25 | 26 | - (UIView*)view 27 | { 28 | return [RCTMGLRasterSource new]; 29 | } 30 | 31 | @end 32 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLStyleValue.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLStyleValue.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/11/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | @import Mapbox; 11 | 12 | @interface RCTMGLStyleValue : NSObject 13 | 14 | @property (nonatomic, strong) NSDictionary *config; 15 | 16 | @property (nonatomic, readonly) NSString *type; 17 | @property (nonatomic, readonly) NSDictionary *payload; 18 | @property (nonatomic, readonly) id mglStyleValue; 19 | 20 | - (BOOL)isFunction; 21 | - (BOOL)isFunctionTypeSupported:(NSArray*)allowedFunctionTypes; 22 | - (MGLTransition)getTransition; 23 | - (MGLStyleValue*)getSphericalPosition; 24 | - (BOOL)isVisible; 25 | 26 | + (RCTMGLStyleValue*)make:(NSDictionary*)config; 27 | 28 | @end 29 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLRasterLayer.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLRasterLayer.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/25/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLRasterLayer.h" 10 | #import "RCTMGLStyle.h" 11 | 12 | @implementation RCTMGLRasterLayer 13 | 14 | - (MGLStyleLayer*)makeLayer:(MGLStyle*)style 15 | { 16 | MGLSource *source = [style sourceWithIdentifier:self.sourceID]; 17 | MGLRasterStyleLayer *layer = [[MGLRasterStyleLayer alloc] initWithIdentifier:self.id source:source]; 18 | return layer; 19 | } 20 | 21 | - (void)addStyles 22 | { 23 | RCTMGLStyle *style = [[RCTMGLStyle alloc] initWithMGLStyle:self.style]; 24 | style.bridge = self.bridge; 25 | [style rasterLayer:(MGLRasterStyleLayer*)self.styleLayer withReactStyle:self.reactStyle]; 26 | } 27 | 28 | @end 29 | -------------------------------------------------------------------------------- /example/ios/RNMapboxGLExampleTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLLight.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLLight.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/26/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLLight.h" 10 | #import "RCTMGLStyle.h" 11 | 12 | @implementation RCTMGLLight 13 | { 14 | MGLLight *internalLight; 15 | } 16 | 17 | - (void)setReactStyle:(NSDictionary *)reactStyle 18 | { 19 | _reactStyle = reactStyle; 20 | 21 | if (_map != nil) { 22 | [self addStyles]; 23 | } 24 | } 25 | 26 | - (void)setMap:(MGLMapView *)map 27 | { 28 | _map = map; 29 | [self addStyles]; 30 | } 31 | 32 | - (void)addStyles 33 | { 34 | MGLLight *light = [[MGLLight alloc] init]; 35 | RCTMGLStyle *style = [[RCTMGLStyle alloc] init]; 36 | [style lightLayer:light withReactStyle:_reactStyle]; 37 | _map.style.light = light; 38 | } 39 | 40 | @end 41 | -------------------------------------------------------------------------------- /docs/Callout.md: -------------------------------------------------------------------------------- 1 | ## 2 | ### Callout that displays information about a selected annotation near the annotation. 3 | 4 | ### props 5 | | Prop | Type | Default | Required | Description | 6 | | ---- | :--: | :-----: | :------: | :----------: | 7 | | title | `string` | `none` | `false` | String that get's displayed in the default callout. | 8 | | style | `any` | `none` | `false` | Style property for the Animated.View wrapper, apply animations to this | 9 | | containerStyle | `any` | `none` | `false` | Style property for the native RCTMGLCallout container, set at your own risk. | 10 | | contentStyle | `any` | `none` | `false` | Style property for the content bubble. | 11 | | tipStyle | `any` | `none` | `false` | Style property for the triangle tip under the content. | 12 | | textStyle | `any` | `none` | `false` | Style property for the title in the content bubble. | 13 | 14 | 15 | -------------------------------------------------------------------------------- /example/ios/RNMapboxGLExample-tvOSTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | #### Setup for creating pull requests 4 | 5 | 1. You'll first need to go through a normal [react-native setup](https://facebook.github.io/react-native/docs/getting-started.html#content) 6 | 1. Create a new react-native project with `react-native init foobar` 7 | 1. `cd` into your project 8 | 1. You have 2 options for linking `react-native-mapbox-gl` 9 | * Use `npm link` 10 | * Clone `react-native-mapbox-gl` into the `node_modules` folder 11 | 1. Go through a normal install process for your platform 12 | 13 | Once installed, you can edit any file in `react-native-mapbox-gl`, commit the changes and push them to a fork for creating a pull request. 14 | 15 | #### Best practices for PR's 16 | 17 | 1. If you add feature, make sure you add it to the documentation 18 | 1. If you add an objective-c or java method, make sure you update `index.ios.js` and/or `index.android.js`. 19 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/utils/SimpleEventCallback.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.utils; 2 | 3 | import com.mapbox.mapboxsdk.maps.MapboxMap; 4 | 5 | import com.mapbox.rctmgl.components.AbstractEventEmitter; 6 | import com.mapbox.rctmgl.events.IEvent; 7 | 8 | /** 9 | * Created by nickitaliano on 8/31/17. 10 | */ 11 | 12 | public class SimpleEventCallback implements MapboxMap.CancelableCallback { 13 | private AbstractEventEmitter mEventEmitter; 14 | private IEvent mEvent; 15 | 16 | public SimpleEventCallback(AbstractEventEmitter eventEmitter, IEvent event) { 17 | mEventEmitter = eventEmitter; 18 | mEvent = event; 19 | } 20 | 21 | @Override 22 | public void onCancel() { 23 | mEventEmitter.handleEvent(mEvent); 24 | } 25 | 26 | @Override 27 | public void onFinish() { 28 | mEventEmitter.handleEvent(mEvent); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /example/src/components/common/Page.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View} from 'react-native'; 3 | 4 | import sheet from '../../styles/sheet'; 5 | import colors from '../../styles/colors'; 6 | 7 | import BaseExamplePropTypes from './BaseExamplePropTypes'; 8 | import MapHeader from './MapHeader'; 9 | 10 | class Page extends React.Component { 11 | static propTypes = { 12 | ...BaseExamplePropTypes, 13 | }; 14 | 15 | render() { 16 | return ( 17 | 18 | 25 | 26 | {this.props.children} 27 | 28 | ); 29 | } 30 | } 31 | 32 | export default Page; 33 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/layers/RCTMGLBackgroundLayer.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.components.styles.layers; 2 | 3 | import android.content.Context; 4 | 5 | import com.mapbox.mapboxsdk.style.layers.BackgroundLayer; 6 | import com.mapbox.rctmgl.components.styles.RCTMGLStyle; 7 | import com.mapbox.rctmgl.components.styles.RCTMGLStyleFactory; 8 | 9 | /** 10 | * Created by nickitaliano on 9/25/17. 11 | */ 12 | 13 | public class RCTMGLBackgroundLayer extends RCTLayer { 14 | public RCTMGLBackgroundLayer(Context context) { 15 | super(context); 16 | } 17 | 18 | @Override 19 | public BackgroundLayer makeLayer() { 20 | return new BackgroundLayer(mID); 21 | } 22 | 23 | @Override 24 | public void addStyles() { 25 | RCTMGLStyleFactory.setBackgroundLayerStyle(mLayer, new RCTMGLStyle(getContext(), mReactStyle, mMap)); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /javascript/utils/geoUtils.js: -------------------------------------------------------------------------------- 1 | import turfHelpers from '@turf/helpers'; 2 | 3 | export function makePoint(coordinates, properties) { 4 | return turfHelpers.point(coordinates, properties); 5 | } 6 | 7 | export function makeLatLngBounds(northEastCoordinates, southWestCoordinates) { 8 | return turfHelpers.featureCollection([ 9 | turfHelpers.point(northEastCoordinates), 10 | turfHelpers.point(southWestCoordinates), 11 | ]); 12 | } 13 | 14 | export function makeFeature(geometry, properties) { 15 | return turfHelpers.feature(geometry, properties); 16 | } 17 | 18 | export function makeFeatureCollection(features = []) { 19 | return turfHelpers.featureCollection(features); 20 | } 21 | 22 | export function addToFeatureCollection(featureCollection, feature) { 23 | const shallowFeatureCollection = Object.assign({}, featureCollection); 24 | shallowFeatureCollection.features.push(feature); 25 | return featureCollection; 26 | } 27 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTConvert+Mapbox.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTConvert+Mapbox.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 8/23/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTConvert+Mapbox.h" 10 | 11 | @implementation RCTConvert (Mapbox) 12 | 13 | + (CLLocationCoordinate2D)GeoJSONPoint:(id)json 14 | { 15 | NSDictionary *point = [self NSDictionary:json]; 16 | 17 | if (![[point objectForKey:@"type"] isEqual: @"Point"]) { 18 | return CLLocationCoordinate2DMake(0, 0); 19 | } 20 | 21 | NSArray *coords = (NSArray*)[point objectForKey:@"coordinates"]; 22 | if (coords == nil || coords.count < 2) { 23 | return CLLocationCoordinate2DMake(0, 0); 24 | } 25 | 26 | double lat = [[coords objectAtIndex:1] doubleValue]; 27 | double lng = [[coords objectAtIndex:0] doubleValue]; 28 | 29 | return CLLocationCoordinate2DMake(lat, lng); 30 | } 31 | 32 | @end 33 | -------------------------------------------------------------------------------- /javascript/modules/offline/OfflinePack.js: -------------------------------------------------------------------------------- 1 | import {NativeModules} from 'react-native'; 2 | 3 | const MapboxGLOfflineManager = NativeModules.MGLOfflineModule; 4 | 5 | class OfflinePack { 6 | constructor(pack) { 7 | this.pack = pack; 8 | this._metadata = null; 9 | } 10 | 11 | get name() { 12 | const {metadata} = this; 13 | return metadata.name; 14 | } 15 | 16 | get bounds() { 17 | return this.pack.bounds; 18 | } 19 | 20 | get metadata() { 21 | if (!this._metadata) { 22 | this._metadata = JSON.parse(this.pack.metadata); 23 | } 24 | return this._metadata; 25 | } 26 | 27 | status() { 28 | return MapboxGLOfflineManager.getPackStatus(this.name); 29 | } 30 | 31 | resume() { 32 | return MapboxGLOfflineManager.resumePackDownload(this.name); 33 | } 34 | 35 | pause() { 36 | return MapboxGLOfflineManager.pausePackDownload(this.name); 37 | } 38 | } 39 | 40 | export default OfflinePack; 41 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/components/AbstractEvent.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.components; 2 | 3 | import com.facebook.react.bridge.WritableMap; 4 | import com.facebook.react.uimanager.events.Event; 5 | import com.facebook.react.uimanager.events.RCTEventEmitter; 6 | 7 | import javax.annotation.Nullable; 8 | 9 | public class AbstractEvent extends Event { 10 | private String mEventName; 11 | private WritableMap mEvent; 12 | 13 | public AbstractEvent(int viewId, String eventName, @Nullable WritableMap event) { 14 | super(viewId); 15 | mEventName = eventName; 16 | mEvent = event; 17 | } 18 | 19 | @Override 20 | public String getEventName() { 21 | return mEventName; 22 | } 23 | 24 | @Override 25 | public void dispatch(RCTEventEmitter rctEventEmitter) { 26 | rctEventEmitter.receiveEvent(getViewTag(), getEventName(), mEvent); 27 | } 28 | } -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/events/AndroidCallbackEvent.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.events; 2 | 3 | import android.view.View; 4 | 5 | import com.facebook.react.bridge.WritableArray; 6 | import com.facebook.react.bridge.WritableMap; 7 | import com.mapbox.rctmgl.events.constants.EventKeys; 8 | 9 | /** 10 | * Created by nickitaliano on 10/3/17. 11 | */ 12 | 13 | public class AndroidCallbackEvent extends AbstractEvent { 14 | private String mKey; 15 | private WritableMap mPayload; 16 | 17 | public AndroidCallbackEvent(View view, String callbackID, String key) { 18 | super(view, callbackID); 19 | mKey = key; 20 | } 21 | 22 | public void setPayload(WritableMap payload) { 23 | mPayload = payload; 24 | } 25 | 26 | @Override 27 | public String getKey() { 28 | return mKey; 29 | } 30 | 31 | @Override 32 | public WritableMap getPayload() { 33 | return mPayload; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /ios/RCTMGL/CameraStop.h: -------------------------------------------------------------------------------- 1 | // 2 | // CameraStop.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/5/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | @import Mapbox; 10 | 11 | @interface CameraStop : NSObject 12 | 13 | @property (nonatomic, strong) NSNumber *pitch; 14 | @property (nonatomic, strong) NSNumber *heading; 15 | @property (nonatomic, strong) NSNumber *zoom; 16 | @property (nonatomic, strong) NSNumber *boundsPaddingLeft; 17 | @property (nonatomic, strong) NSNumber *boundsPaddingRight; 18 | @property (nonatomic, strong) NSNumber *boundsPaddingTop; 19 | @property (nonatomic, strong) NSNumber *boundsPaddingBottom; 20 | @property (nonatomic, strong) NSNumber *mode; 21 | @property (nonatomic, assign) NSTimeInterval duration; 22 | 23 | @property (nonatomic, assign) CLLocationCoordinate2D coordinate; 24 | @property (nonatomic, assign) MGLCoordinateBounds bounds; 25 | 26 | + (CameraStop*)fromDictionary:(NSDictionary*)args; 27 | 28 | @end 29 | -------------------------------------------------------------------------------- /example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useDeprecatedNdk=true 21 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/events/MapChangeEvent.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.events; 2 | 3 | import android.view.View; 4 | 5 | import com.facebook.react.bridge.Arguments; 6 | import com.facebook.react.bridge.WritableMap; 7 | 8 | import com.mapbox.rctmgl.events.constants.EventKeys; 9 | 10 | /** 11 | * Created by nickitaliano on 8/27/17. 12 | */ 13 | 14 | public class MapChangeEvent extends AbstractEvent { 15 | private WritableMap mPayload; 16 | 17 | public MapChangeEvent(View view, String eventType) { 18 | this(view, Arguments.createMap(), eventType); 19 | } 20 | 21 | public MapChangeEvent(View view, WritableMap payload, String eventType) { 22 | super(view, eventType); 23 | mPayload = payload; 24 | } 25 | 26 | @Override 27 | public String getKey() { 28 | return EventKeys.MAP_ONCHANGE; 29 | } 30 | 31 | @Override 32 | public WritableMap getPayload() { 33 | return mPayload; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /javascript/components/Light.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {requireNativeComponent} from 'react-native'; 3 | 4 | import {viewPropTypes} from '../utils'; 5 | import {LightLayerStyleProp} from '../utils/styleMap'; 6 | 7 | import AbstractLayer from './AbstractLayer'; 8 | 9 | export const NATIVE_MODULE_NAME = 'RCTMGLLight'; 10 | 11 | /** 12 | * Light represents the light source for extruded geometries 13 | */ 14 | class Light extends AbstractLayer { 15 | static propTypes = { 16 | ...viewPropTypes, 17 | 18 | /** 19 | * Customizable style attributes 20 | */ 21 | style: LightLayerStyleProp, 22 | }; 23 | 24 | render() { 25 | return ( 26 | 31 | ); 32 | } 33 | } 34 | 35 | const RCTMGLLight = requireNativeComponent(NATIVE_MODULE_NAME, Light, { 36 | nativeOnly: {reactStyle: true}, 37 | }); 38 | 39 | export default Light; 40 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLRasterLayerManager.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLRasterLayerManager.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/25/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLRasterLayerManager.h" 10 | #import "RCTMGLRasterLayer.h" 11 | 12 | @implementation RCTMGLRasterLayerManager 13 | 14 | RCT_EXPORT_MODULE() 15 | 16 | // standard layer props 17 | RCT_EXPORT_VIEW_PROPERTY(id, NSString); 18 | RCT_EXPORT_VIEW_PROPERTY(sourceID, NSString); 19 | 20 | RCT_EXPORT_VIEW_PROPERTY(aboveLayerID, NSString); 21 | RCT_EXPORT_VIEW_PROPERTY(belowLayerID, NSString); 22 | RCT_EXPORT_VIEW_PROPERTY(layerIndex, NSNumber); 23 | RCT_EXPORT_VIEW_PROPERTY(reactStyle, NSDictionary); 24 | 25 | RCT_EXPORT_VIEW_PROPERTY(maxZoomLevel, NSNumber); 26 | RCT_EXPORT_VIEW_PROPERTY(minZoomLevel, NSNumber); 27 | 28 | - (UIView*)view 29 | { 30 | RCTMGLRasterLayer *layer = [[RCTMGLRasterLayer alloc] init]; 31 | layer.bridge = self.bridge; 32 | return layer; 33 | } 34 | 35 | @end 36 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/layers/RCTMGLRasterLayer.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.components.styles.layers; 2 | 3 | import android.content.Context; 4 | 5 | import com.mapbox.mapboxsdk.style.layers.Filter; 6 | import com.mapbox.mapboxsdk.style.layers.RasterLayer; 7 | import com.mapbox.rctmgl.components.mapview.RCTMGLMapView; 8 | import com.mapbox.rctmgl.components.styles.RCTMGLStyle; 9 | import com.mapbox.rctmgl.components.styles.RCTMGLStyleFactory; 10 | 11 | /** 12 | * Created by nickitaliano on 9/25/17. 13 | */ 14 | 15 | public class RCTMGLRasterLayer extends RCTLayer { 16 | public RCTMGLRasterLayer(Context context) { 17 | super(context); 18 | } 19 | 20 | @Override 21 | public RasterLayer makeLayer() { 22 | return new RasterLayer(mID, mSourceID); 23 | } 24 | 25 | @Override 26 | public void addStyles() { 27 | RCTMGLStyleFactory.setRasterLayerStyle(mLayer, new RCTMGLStyle(getContext(), mReactStyle, mMap)); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/utils/ResourceUtils.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.utils; 2 | 3 | import android.content.Context; 4 | import android.content.res.Resources; 5 | import android.graphics.drawable.Drawable; 6 | import android.support.v4.content.ContextCompat; 7 | 8 | /** 9 | * Created by nickitaliano on 10/19/17. 10 | */ 11 | 12 | public class ResourceUtils { 13 | public static Drawable getDrawableByName(Context context, String resourceName) { 14 | if (context == null || resourceName == null || resourceName.isEmpty()) { 15 | return null; 16 | } 17 | 18 | Resources resources = context.getResources(); 19 | if (resources == null) { 20 | return null; 21 | } 22 | 23 | final int resID = resources.getIdentifier(resourceName, "drawable", context.getPackageName()); 24 | if (resID == 0) { 25 | return null; 26 | } 27 | 28 | return ContextCompat.getDrawable(context, resID); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /docs/VectorSource.md: -------------------------------------------------------------------------------- 1 | ## 2 | ### VectorSource is a map content source that supplies tiled vector data in Mapbox Vector Tile format to be shown on the map.
The location of and metadata about the tiles are defined either by an option dictionary or by an external file that conforms to the TileJSON specification. 3 | 4 | ### props 5 | | Prop | Type | Default | Required | Description | 6 | | ---- | :--: | :-----: | :------: | :----------: | 7 | | id | `string` | `MapboxGL.StyleSource.DefaultSourceID` | `false` | A string that uniquely identifies the source. | 8 | | url | `string` | `none` | `false` | A URL to a TileJSON configuration file describing the source’s contents and other metadata. | 9 | | onPress | `func` | `none` | `false` | Source press listener, gets called when a user presses one of the children layers only
if that layer has a higher z-index than another source layers | 10 | | hitbox | `shape` | `none` | `false` | Overrides the default touch hitbox(44x44 pixels) for the source layers | 11 | 12 | 13 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLBackgroundLayerManager.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLBackgroundLayerManager.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/25/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLBackgroundLayerManager.h" 10 | #import "RCTMGLBackgroundLayer.h" 11 | 12 | @implementation RCTMGLBackgroundLayerManager 13 | 14 | RCT_EXPORT_MODULE() 15 | 16 | // standard layer props 17 | RCT_EXPORT_VIEW_PROPERTY(id, NSString); 18 | RCT_EXPORT_VIEW_PROPERTY(sourceID, NSString); 19 | 20 | RCT_EXPORT_VIEW_PROPERTY(aboveLayerID, NSString); 21 | RCT_EXPORT_VIEW_PROPERTY(belowLayerID, NSString); 22 | RCT_EXPORT_VIEW_PROPERTY(layerIndex, NSNumber); 23 | RCT_EXPORT_VIEW_PROPERTY(reactStyle, NSDictionary); 24 | 25 | RCT_EXPORT_VIEW_PROPERTY(maxZoomLevel, NSNumber); 26 | RCT_EXPORT_VIEW_PROPERTY(minZoomLevel, NSNumber); 27 | 28 | - (UIView*)view 29 | { 30 | RCTMGLBackgroundLayer *layer = [[RCTMGLBackgroundLayer alloc] init]; 31 | layer.bridge = self.bridge; 32 | return layer; 33 | } 34 | 35 | @end 36 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLPointAnnotationManager.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLPointAnnotationManager.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 10/12/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLPointAnnotationManager.h" 10 | #import "RCTMGLPointAnnotation.h" 11 | 12 | @implementation RCTMGLPointAnnotationManager 13 | 14 | RCT_EXPORT_MODULE() 15 | 16 | RCT_EXPORT_VIEW_PROPERTY(id, NSString) 17 | RCT_EXPORT_VIEW_PROPERTY(anchor, NSDictionary) 18 | 19 | RCT_REMAP_VIEW_PROPERTY(selected, reactSelected, BOOL) 20 | RCT_REMAP_VIEW_PROPERTY(title, reactTitle, NSString) 21 | RCT_REMAP_VIEW_PROPERTY(snippet, reactSnippet, NSString) 22 | RCT_REMAP_VIEW_PROPERTY(coordinate, reactCoordinate, NSString) 23 | 24 | RCT_REMAP_VIEW_PROPERTY(onMapboxPointAnnotationSelected, onSelected, RCTBubblingEventBlock) 25 | RCT_REMAP_VIEW_PROPERTY(onMapboxPointAnnotationDeselected, onDeselected, RCTBubblingEventBlock) 26 | 27 | - (UIView *)view 28 | { 29 | return [[RCTMGLPointAnnotation alloc] init]; 30 | } 31 | 32 | @end 33 | -------------------------------------------------------------------------------- /ios/RCTMGL/RNMBImageUtils.m: -------------------------------------------------------------------------------- 1 | // 2 | // RNMBImageUtils.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 1/18/18. 6 | // Copyright © 2018 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RNMBImageUtils.h" 10 | 11 | @implementation RNMBImageUtils 12 | 13 | + (NSString *)createTempFile:(UIImage *)image 14 | { 15 | NSString *fileID = [[NSUUID UUID] UUIDString]; 16 | NSString *pathComponent = [NSString stringWithFormat:@"Documents/rctmgl-snapshot-%@.%@", fileID, @"png"]; 17 | NSString *filePath = [NSHomeDirectory() stringByAppendingPathComponent: pathComponent]; 18 | 19 | NSData *data = UIImagePNGRepresentation(image); 20 | [data writeToFile:filePath atomically:YES]; 21 | 22 | return filePath; 23 | } 24 | 25 | + (NSString *)createBase64:(UIImage *)image 26 | { 27 | NSData *data = UIImagePNGRepresentation(image); 28 | return [NSString stringWithFormat:@"%@%@", @"data:image/png;base64,", [data base64EncodedStringWithOptions:NSDataBase64EncodingEndLineWithCarriageReturn]]; 29 | } 30 | 31 | @end 32 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/light/RCTMGLLightManager.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.components.styles.light; 2 | 3 | import com.facebook.react.bridge.ReadableMap; 4 | import com.facebook.react.uimanager.ThemedReactContext; 5 | import com.facebook.react.uimanager.ViewGroupManager; 6 | import com.facebook.react.uimanager.annotations.ReactProp; 7 | 8 | /** 9 | * Created by nickitaliano on 9/26/17. 10 | */ 11 | 12 | public class RCTMGLLightManager extends ViewGroupManager { 13 | public static final String REACT_CLASS = RCTMGLLight.class.getSimpleName(); 14 | 15 | @Override 16 | public String getName() { 17 | return REACT_CLASS; 18 | } 19 | 20 | @Override 21 | protected RCTMGLLight createViewInstance(ThemedReactContext reactContext) { 22 | return new RCTMGLLight(reactContext); 23 | } 24 | 25 | @ReactProp(name="reactStyle") 26 | public void setReactStyle(RCTMGLLight light, ReadableMap reactStyle) { 27 | light.setReactStyle(reactStyle); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /example/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "28.0.3" 6 | minSdkVersion = 16 7 | compileSdkVersion = 28 8 | targetSdkVersion = 28 9 | supportLibVersion = "28.0.0" 10 | } 11 | repositories { 12 | google() 13 | jcenter() 14 | } 15 | dependencies { 16 | classpath 'com.android.tools.build:gradle:3.3.1' 17 | 18 | // NOTE: Do not place your application dependencies here; they belong 19 | // in the individual module build.gradle files 20 | } 21 | } 22 | 23 | allprojects { 24 | repositories { 25 | mavenLocal() 26 | google() 27 | jcenter() 28 | maven { url "https://jitpack.io" } 29 | maven { 30 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 31 | url "$rootDir/../node_modules/react-native/android" 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLEvent.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLEvent.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 8/25/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLEvent.h" 10 | 11 | @implementation RCTMGLEvent 12 | 13 | - (instancetype)init 14 | { 15 | if (self = [super init]) { 16 | _timestamp = [[NSDate date] timeIntervalSince1970]; 17 | } 18 | return self; 19 | } 20 | 21 | - (NSDictionary*)payload 22 | { 23 | if (_payload == nil) { 24 | return @{}; 25 | } 26 | return _payload; 27 | } 28 | 29 | - (NSDictionary*)toJSON 30 | { 31 | return @{ @"type": self.type, @"payload": self.payload }; 32 | } 33 | 34 | + (RCTMGLEvent*)makeEvent:(NSString*)type 35 | { 36 | return [RCTMGLEvent makeEvent:type withPayload:@{}]; 37 | } 38 | 39 | + (RCTMGLEvent*)makeEvent:(NSString*)type withPayload:(NSDictionary*)payload 40 | { 41 | RCTMGLEvent *event = [[RCTMGLEvent alloc] init]; 42 | event.type = type; 43 | event.payload = payload; 44 | return event; 45 | } 46 | 47 | @end 48 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | Podfile.lock 25 | Pods/ 26 | 27 | # node.js 28 | # 29 | node_modules/ 30 | npm-debug.log 31 | package-lock.json 32 | *.tgz 33 | yarn.lock 34 | 35 | # project specific 36 | ios/Mapbox.framework 37 | ios/temp.zip 38 | ios/.framework_version 39 | ios/Pods/ 40 | android/build/ 41 | android/.gradle/ 42 | android/.idea/ 43 | android/android.iml 44 | android/gradle/ 45 | android/gradlew 46 | android/gradlew.bat 47 | android/local.properties 48 | reactnativemapboxgl.iml 49 | .idea 50 | coverage 51 | .project 52 | *.core.prefs 53 | 54 | # Buck 55 | .buckd 56 | buck-out 57 | /ReactAndroid/src/main/jni/prebuilt/lib/armeabi-v7a/ 58 | /ReactAndroid/src/main/jni/prebuilt/lib/x86/ 59 | /ReactAndroid/src/main/gen 60 | 61 | -------------------------------------------------------------------------------- /android/rctmgl/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /Users/nickitaliano/Library/Android/sdk/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Uncomment this to preserve the line number information for 20 | # debugging stack traces. 21 | #-keepattributes SourceFile,LineNumberTable 22 | 23 | # If you keep the line number information, uncomment this to 24 | # hide the original source file name. 25 | #-renamesourcefileattribute SourceFile 26 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLFillLayerManager.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLFillLayerManager.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/8/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLFillLayerManager.h" 10 | #import "RCTMGLFillLayer.h" 11 | 12 | @implementation RCTMGLFillLayerManager 13 | 14 | RCT_EXPORT_MODULE(); 15 | 16 | RCT_EXPORT_VIEW_PROPERTY(sourceLayerID, NSString); 17 | 18 | RCT_EXPORT_VIEW_PROPERTY(id, NSString); 19 | RCT_EXPORT_VIEW_PROPERTY(sourceID, NSString); 20 | RCT_EXPORT_VIEW_PROPERTY(filter, NSArray); 21 | 22 | RCT_EXPORT_VIEW_PROPERTY(aboveLayerID, NSString); 23 | RCT_EXPORT_VIEW_PROPERTY(belowLayerID, NSString); 24 | RCT_EXPORT_VIEW_PROPERTY(layerIndex, NSNumber); 25 | RCT_EXPORT_VIEW_PROPERTY(reactStyle, NSDictionary); 26 | 27 | RCT_EXPORT_VIEW_PROPERTY(maxZoomLevel, NSNumber); 28 | RCT_EXPORT_VIEW_PROPERTY(minZoomLevel, NSNumber); 29 | 30 | - (UIView*)view 31 | { 32 | RCTMGLFillLayer *layer = [RCTMGLFillLayer new]; 33 | layer.bridge = self.bridge; 34 | return layer; 35 | } 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLSource.h: -------------------------------------------------------------------------------- 1 | // 2 | // BaseSource.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/8/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | #import "RCTMGLLayer.h" 11 | #import 12 | @import Mapbox; 13 | 14 | @interface RCTMGLSource : UIView 15 | 16 | extern NSString *const DEFAULT_SOURCE_ID; 17 | 18 | @property (nonatomic, strong) NSMutableArray> *reactSubviews; 19 | @property (nonatomic, strong) NSMutableArray *layers; 20 | @property (nonatomic, strong) MGLSource *source; 21 | @property (nonatomic, strong) MGLMapView *map; 22 | @property (nonatomic, strong) NSDictionary *hitbox; 23 | 24 | @property (nonatomic, copy) NSString *id; 25 | @property (nonatomic, assign) BOOL hasPressListener; 26 | @property (nonatomic, copy) RCTBubblingEventBlock onPress; 27 | 28 | - (void)addToMap; 29 | - (void)removeFromMap; 30 | - (MGLSource*)makeSource; 31 | - (NSArray *)getLayerIDs; 32 | 33 | + (BOOL)isDefaultSource:(NSString*)sourceID; 34 | 35 | @end 36 | -------------------------------------------------------------------------------- /example/src/components/common/Bubble.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import {View, StyleSheet, TouchableOpacity} from 'react-native'; 4 | 5 | const styles = StyleSheet.create({ 6 | container: { 7 | borderRadius: 30, 8 | position: 'absolute', 9 | bottom: 16, 10 | left: 48, 11 | right: 48, 12 | paddingVertical: 16, 13 | minHeight: 60, 14 | alignItems: 'center', 15 | justifyContent: 'center', 16 | backgroundColor: 'white', 17 | }, 18 | }); 19 | 20 | class Bubble extends React.PureComponent { 21 | static propTypes = { 22 | onPress: PropTypes.func, 23 | }; 24 | 25 | render() { 26 | let innerChildView = this.props.children; 27 | 28 | if (this.props.onPress) { 29 | innerChildView = ( 30 | 31 | {this.props.children} 32 | 33 | ); 34 | } 35 | 36 | return ( 37 | {innerChildView} 38 | ); 39 | } 40 | } 41 | 42 | export default Bubble; 43 | -------------------------------------------------------------------------------- /scripts/autogenHelpers/MarkdownBuilder.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const ejs = require('ejs'); 4 | 5 | const TMPL_PATH = path.join(__dirname, '..', 'templates'); 6 | const TMPL_FILE = fs.readFileSync(path.join(TMPL_PATH, 'component.md.ejs'), 'utf8'); 7 | 8 | class MarkdownBuilder { 9 | 10 | generateComponentFile (docJSON, componentName) { 11 | const tmpl = ejs.compile(TMPL_FILE, { strict: true }); 12 | const fileContents = tmpl({ component: docJSON[componentName] }); 13 | fs.writeFileSync(path.join(__dirname, '..', '..', 'docs', `${componentName}.md`), fileContents); 14 | } 15 | 16 | generate () { 17 | const docJSONFile = fs.readFileSync(path.join(__dirname, '..', '..', 'docs', 'docs.json'), 'utf8'); 18 | const docJSON = JSON.parse(docJSONFile); 19 | const componentPaths = Object.keys(docJSON); 20 | 21 | for (let componentPath of componentPaths) { 22 | this.generateComponentFile(docJSON, componentPath); 23 | } 24 | 25 | console.log('Markdown is finish generating'); 26 | } 27 | } 28 | 29 | module.exports = MarkdownBuilder; 30 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/events/MapUserTrackingModeEvent.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.events; 2 | 3 | import android.view.View; 4 | 5 | import com.facebook.react.bridge.Arguments; 6 | import com.facebook.react.bridge.WritableMap; 7 | import com.mapbox.rctmgl.events.constants.EventKeys; 8 | import com.mapbox.rctmgl.events.constants.EventTypes; 9 | 10 | /** 11 | * Created by nickitaliano on 12/19/17. 12 | */ 13 | 14 | public class MapUserTrackingModeEvent extends AbstractEvent { 15 | private int mUserTrackingMode; 16 | 17 | public MapUserTrackingModeEvent(View view, int userTrackingMode) { 18 | super(view, EventTypes.MAP_USER_TRACKING_MODE_CHANGE); 19 | mUserTrackingMode = userTrackingMode; 20 | } 21 | 22 | @Override 23 | public String getKey() { 24 | return EventKeys.MAP_USER_TRACKING_MODE_CHANGE; 25 | } 26 | 27 | @Override 28 | public WritableMap getPayload() { 29 | WritableMap payload = Arguments.createMap(); 30 | payload.putInt("userTrackingMode", mUserTrackingMode); 31 | return payload; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLLineLayerManager.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLLineLayerManager.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/18/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLLineLayerManager.h" 10 | #import "RCTMGLLineLayer.h" 11 | 12 | @implementation RCTMGLLineLayerManager 13 | 14 | RCT_EXPORT_MODULE() 15 | 16 | // line layer props 17 | RCT_EXPORT_VIEW_PROPERTY(sourceLayerID, NSString); 18 | 19 | // standard layer props 20 | RCT_EXPORT_VIEW_PROPERTY(id, NSString); 21 | RCT_EXPORT_VIEW_PROPERTY(sourceID, NSString); 22 | RCT_EXPORT_VIEW_PROPERTY(filter, NSArray); 23 | 24 | RCT_EXPORT_VIEW_PROPERTY(aboveLayerID, NSString); 25 | RCT_EXPORT_VIEW_PROPERTY(belowLayerID, NSString); 26 | RCT_EXPORT_VIEW_PROPERTY(layerIndex, NSNumber); 27 | RCT_EXPORT_VIEW_PROPERTY(reactStyle, NSDictionary); 28 | 29 | RCT_EXPORT_VIEW_PROPERTY(maxZoomLevel, NSNumber); 30 | RCT_EXPORT_VIEW_PROPERTY(minZoomLevel, NSNumber); 31 | 32 | - (UIView*)view 33 | { 34 | RCTMGLLineLayer *layer = [RCTMGLLineLayer new]; 35 | layer.bridge = self.bridge; 36 | return layer; 37 | } 38 | 39 | 40 | @end 41 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLCircleLayerManager.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLCircleLayerManager.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/18/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLCircleLayerManager.h" 10 | #import "RCTMGLCircleLayer.h" 11 | 12 | @implementation RCTMGLCircleLayerManager 13 | 14 | RCT_EXPORT_MODULE() 15 | 16 | // circle layer props 17 | RCT_EXPORT_VIEW_PROPERTY(sourceLayerID, NSString); 18 | 19 | // standard layer props 20 | RCT_EXPORT_VIEW_PROPERTY(id, NSString); 21 | RCT_EXPORT_VIEW_PROPERTY(sourceID, NSString); 22 | RCT_EXPORT_VIEW_PROPERTY(filter, NSArray); 23 | 24 | RCT_EXPORT_VIEW_PROPERTY(aboveLayerID, NSString); 25 | RCT_EXPORT_VIEW_PROPERTY(belowLayerID, NSString); 26 | RCT_EXPORT_VIEW_PROPERTY(layerIndex, NSNumber); 27 | RCT_EXPORT_VIEW_PROPERTY(reactStyle, NSDictionary); 28 | 29 | RCT_EXPORT_VIEW_PROPERTY(maxZoomLevel, NSNumber); 30 | RCT_EXPORT_VIEW_PROPERTY(minZoomLevel, NSNumber); 31 | 32 | - (UIView*)view 33 | { 34 | RCTMGLCircleLayer *layer = [RCTMGLCircleLayer new]; 35 | layer.bridge = self.bridge; 36 | return layer; 37 | } 38 | 39 | @end 40 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLShapeSource.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLShapeSource.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/19/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | #import "RCTMGLSource.h" 11 | 12 | @import Mapbox; 13 | 14 | @interface RCTMGLShapeSource : RCTMGLSource 15 | 16 | @property (nonatomic, weak) RCTBridge *bridge; 17 | 18 | @property (nonatomic, copy) NSString *url; 19 | @property (nonatomic, copy) NSString *shape; 20 | @property (nonatomic, strong) NSDictionary *images; 21 | @property (nonatomic, strong) NSArray *nativeImages; 22 | 23 | @property (nonatomic, strong) NSNumber *cluster; 24 | @property (nonatomic, strong) NSNumber *clusterRadius; 25 | @property (nonatomic, strong) NSNumber *clusterMaxZoomLevel; 26 | 27 | @property (nonatomic, strong) NSNumber *maxZoomLevel; 28 | @property (nonatomic, strong) NSNumber *buffer; 29 | @property (nonatomic, strong) NSNumber *tolerence; 30 | 31 | @property (nonatomic, copy) RCTBubblingEventBlock onPress; 32 | @property (nonatomic, assign) BOOL hasPressListener; 33 | 34 | @end 35 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLSymbolLayerManager.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLSymbolLayerManager.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/19/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLSymbolLayerManager.h" 10 | #import "RCTMGLSymbolLayer.h" 11 | 12 | @implementation RCTMGLSymbolLayerManager 13 | 14 | RCT_EXPORT_MODULE() 15 | 16 | // circle layer props 17 | RCT_EXPORT_VIEW_PROPERTY(sourceLayerID, NSString); 18 | 19 | // standard layer props 20 | RCT_EXPORT_VIEW_PROPERTY(id, NSString); 21 | RCT_EXPORT_VIEW_PROPERTY(sourceID, NSString); 22 | RCT_EXPORT_VIEW_PROPERTY(filter, NSArray); 23 | 24 | RCT_EXPORT_VIEW_PROPERTY(aboveLayerID, NSString); 25 | RCT_EXPORT_VIEW_PROPERTY(belowLayerID, NSString); 26 | RCT_EXPORT_VIEW_PROPERTY(layerIndex, NSNumber); 27 | RCT_EXPORT_VIEW_PROPERTY(reactStyle, NSDictionary); 28 | 29 | RCT_EXPORT_VIEW_PROPERTY(maxZoomLevel, NSNumber); 30 | RCT_EXPORT_VIEW_PROPERTY(minZoomLevel, NSNumber); 31 | 32 | - (UIView*)view 33 | { 34 | RCTMGLSymbolLayer *layer = [RCTMGLSymbolLayer new]; 35 | layer.bridge = self.bridge; 36 | return layer; 37 | } 38 | 39 | @end 40 | -------------------------------------------------------------------------------- /example/ios/RNMapboxGLExample/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "20x20", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "20x20", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "29x29", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "29x29", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "40x40", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "40x40", 31 | "scale" : "3x" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "size" : "60x60", 36 | "scale" : "2x" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "size" : "60x60", 41 | "scale" : "3x" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "size" : "1024x1024", 46 | "scale" : "1x" 47 | } 48 | ], 49 | "info" : { 50 | "version" : 1, 51 | "author" : "xcode" 52 | } 53 | } -------------------------------------------------------------------------------- /example/src/styles/colors.js: -------------------------------------------------------------------------------- 1 | const colors = { 2 | primary: { 3 | blueDark: '#314ccd', 4 | blue: '#4264fb', 5 | blueLight: '#aab7ef', 6 | blueFaint: '#edf0fd', 7 | grayDark: '#273d56', 8 | gray: '#607d9c', 9 | grayLight: '#c6d2e1', 10 | grayFaint: '#f4f7fb', 11 | pinkDark: '#b43b71', 12 | pink: '#ee4e8b', 13 | pinkLight: '#f8c8da', 14 | pinkFaint: '#fbe5ee', 15 | }, 16 | 17 | secondary: { 18 | purpleDark: '#5a3fc0', 19 | purple: '#7753eb', 20 | purpleLight: '#c5b9eb', 21 | purpleFaint: '#f2effa', 22 | 23 | orangeDark: '#ba7334', 24 | orange: '#f79640', 25 | orangeLight: '#fbcea6', 26 | orangeFaint: '#feefe2', 27 | 28 | greenDark: '#269561', 29 | green: '#33c377', 30 | greenLight: '#afdec5', 31 | greenFaint: '#e8f5ee', 32 | 33 | yellowDark: '#a4a62d', 34 | yellow: '#d9d838', 35 | yellowLight: '#FFF5A0', 36 | yellowFaint: '#FCFCDF', 37 | 38 | redDark: '#ba3b3f', 39 | red: '#f74e4e', 40 | redLight: '#f6b7b7', 41 | redFaint: '#fbe5e5', 42 | 43 | white: '#ffffff', 44 | black: '#000000', 45 | }, 46 | }; 47 | 48 | export default colors; 49 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLFillExtrusionLayerManager.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLFillExtrusionLayerManager.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/15/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLFillExtrusionLayerManager.h" 10 | #import "RCTMGLFillExtrusionLayer.h" 11 | 12 | @implementation RCTMGLFillExtrusionLayerManager 13 | 14 | RCT_EXPORT_MODULE() 15 | 16 | // fill extrusion layer props 17 | RCT_EXPORT_VIEW_PROPERTY(sourceLayerID, NSString); 18 | 19 | // standard layer props 20 | RCT_EXPORT_VIEW_PROPERTY(id, NSString); 21 | RCT_EXPORT_VIEW_PROPERTY(sourceID, NSString); 22 | RCT_EXPORT_VIEW_PROPERTY(filter, NSArray); 23 | 24 | RCT_EXPORT_VIEW_PROPERTY(aboveLayerID, NSString); 25 | RCT_EXPORT_VIEW_PROPERTY(belowLayerID, NSString); 26 | RCT_EXPORT_VIEW_PROPERTY(layerIndex, NSNumber); 27 | RCT_EXPORT_VIEW_PROPERTY(reactStyle, NSDictionary); 28 | 29 | RCT_EXPORT_VIEW_PROPERTY(maxZoomLevel, NSNumber); 30 | RCT_EXPORT_VIEW_PROPERTY(minZoomLevel, NSNumber); 31 | 32 | - (UIView*)view 33 | { 34 | RCTMGLFillExtrusionLayer *layer = [RCTMGLFillExtrusionLayer new]; 35 | layer.bridge = self.bridge; 36 | return layer; 37 | } 38 | 39 | @end 40 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLPointAnnotation.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLPointAnnotation.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 10/12/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | #import 11 | #import 12 | #import "RCTMGLCallout.h" 13 | 14 | @import Mapbox; 15 | 16 | @interface RCTMGLPointAnnotation : MGLAnnotationView 17 | 18 | @property (nonatomic, weak) MGLMapView *map; 19 | @property (nonatomic, strong) RCTMGLCallout *calloutView; 20 | 21 | @property (nonatomic, copy) NSString *id; 22 | @property (nonatomic, copy) NSString *reactTitle; 23 | @property (nonatomic, copy) NSString *reactSnippet; 24 | 25 | @property (nonatomic, copy) NSString *reactCoordinate; 26 | @property (nonatomic, assign) CLLocationCoordinate2D coordinate; 27 | 28 | @property (nonatomic, copy) NSDictionary *anchor; 29 | 30 | @property (nonatomic, copy) RCTBubblingEventBlock onSelected; 31 | @property (nonatomic, copy) RCTBubblingEventBlock onDeselected; 32 | 33 | @property (nonatomic, assign) BOOL reactSelected; 34 | 35 | - (MGLAnnotationView *)getAnnotationView; 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /scripts/templates/RCTMGLStyle.h.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | const layers = locals.layers; 3 | -%> 4 | // DO NOT MODIFY 5 | // THIS FILE IS AUTOGENERATED 6 | 7 | #import "RCTMGLStyle.h" 8 | #import "RCTMGLStyleValue.h" 9 | #import 10 | 11 | @import Mapbox; 12 | 13 | @interface RCTMGLStyle : NSObject 14 | 15 | @property (nonatomic, weak) RCTBridge *bridge; 16 | @property (nonatomic, strong) MGLStyle *style; 17 | 18 | - (id)initWithMGLStyle:(MGLStyle*)mglStyle; 19 | 20 | <%_ for (const layer of layers) { _%> 21 | - (void)<%- setLayerMethodName(layer, 'ios') -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyle:(NSDictionary *)reactStyle; 22 | <%_ } _%> 23 | 24 | <%_ for (const layer of layers) { _%> 25 | <%_ for (const prop of layer.properties) { _%> 26 | - (void)set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue; 27 | <%_ if (prop.transition) { _%> 28 | - (void)set<%- iosPropMethodName(layer, pascelCase(prop.name)) -%>Transition:(<%- getLayerType(layer, 'ios') -%> *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue; 29 | <%_ } _%> 30 | <%_ } _%> 31 | <% } %> 32 | 33 | @end 34 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLUtils.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTConvert+Mapbox.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 8/23/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | #import 11 | #import 12 | #import 13 | 14 | @import Mapbox; 15 | 16 | @interface RCTMGLUtils: NSObject 17 | 18 | + (CLLocationCoordinate2D)fromFeature:(NSString*)json; 19 | + (MGLShape*)shapeFromGeoJSON:(NSString*)json; 20 | + (MGLCoordinateBounds)fromFeatureCollection:(NSString*)json; 21 | + (NSArray *)fromCoordinateBounds:(MGLCoordinateBounds)bounds; 22 | + (NSTimeInterval)fromMS:(NSNumber*)number; 23 | + (NSNumber*)clamp:(NSNumber*)value min:(NSNumber*)min max:(NSNumber*)max; 24 | + (UIColor*)toColor:(id)value; 25 | + (void)fetchImage:(RCTBridge*)bridge url:(NSString*)url callback:(RCTImageLoaderCompletionBlock)callback; 26 | + (void)fetchImages:(RCTBridge *)bridge style:(MGLStyle *)style objects:(NSDictionary*)objects callback:(void (^)())callback; 27 | + (CGVector)toCGVector:(NSArray*)arr; 28 | + (UIEdgeInsets)toUIEdgeInsets:(NSArray *)arr; 29 | 30 | @end 31 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/location/UserTrackingMode.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.location; 2 | 3 | import com.mapbox.mapboxsdk.plugins.locationlayer.LocationLayerMode; 4 | 5 | /** 6 | * Created by nickitaliano on 12/13/17. 7 | */ 8 | 9 | public class UserTrackingMode { 10 | public static final int NONE = 0; 11 | public static final int FOLLOW = 1; 12 | public static final int FollowWithCourse = 2; 13 | public static final int FollowWithHeading = 3; 14 | 15 | public static int getMapLayerMode(int mode, boolean isShowUserLocation) { 16 | if (!isShowUserLocation) { 17 | return LocationLayerMode.NONE; 18 | } else if (mode == NONE) { 19 | return LocationLayerMode.TRACKING; 20 | } else if (mode == FollowWithCourse) { 21 | return LocationLayerMode.NAVIGATION; 22 | } else if (mode == FollowWithHeading) { 23 | return LocationLayerMode.COMPASS; 24 | } else { 25 | return LocationLayerMode.TRACKING; 26 | } 27 | } 28 | 29 | public static boolean isUserGesture(int reason) { 30 | return reason == 1 || reason == 2; // user gesture or animation 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/sources/RCTMGLVectorSource.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.components.styles.sources; 2 | 3 | import android.content.Context; 4 | 5 | import com.mapbox.mapboxsdk.style.sources.VectorSource; 6 | import com.mapbox.rctmgl.events.FeatureClickEvent; 7 | import com.mapbox.services.commons.geojson.Feature; 8 | 9 | /** 10 | * Created by nickitaliano on 9/8/17. 11 | */ 12 | 13 | public class RCTMGLVectorSource extends RCTSource { 14 | private String mURL; 15 | private RCTMGLVectorSourceManager mManager; 16 | 17 | public RCTMGLVectorSource(Context context, RCTMGLVectorSourceManager manager) { 18 | super(context); 19 | mManager = manager; 20 | } 21 | 22 | public void setURL(String url) { 23 | mURL = url; 24 | } 25 | 26 | public void onPress(Feature feature) { 27 | mManager.handleEvent(FeatureClickEvent.makeVectorSourceEvent(this, feature)); 28 | } 29 | 30 | @Override 31 | public VectorSource makeSource() { 32 | if (isDefaultSource(mID)) { 33 | return (VectorSource)mMap.getSource(DEFAULT_ID); 34 | } 35 | return new VectorSource(mID, mURL); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/events/PointAnnotationClickEvent.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.events; 2 | 3 | import android.graphics.PointF; 4 | import android.support.annotation.NonNull; 5 | import android.view.View; 6 | 7 | import com.facebook.react.bridge.WritableMap; 8 | import com.facebook.react.bridge.WritableNativeMap; 9 | import com.mapbox.mapboxsdk.annotations.MarkerView; 10 | import com.mapbox.mapboxsdk.geometry.LatLng; 11 | import com.mapbox.rctmgl.components.annotation.RCTMGLPointAnnotation; 12 | import com.mapbox.rctmgl.events.constants.EventKeys; 13 | import com.mapbox.rctmgl.events.constants.EventTypes; 14 | import com.mapbox.rctmgl.utils.ConvertUtils; 15 | 16 | /** 17 | * Created by nickitaliano on 10/11/17. 18 | */ 19 | 20 | public class PointAnnotationClickEvent extends MapClickEvent { 21 | public PointAnnotationClickEvent(View view, @NonNull LatLng latLng, @NonNull PointF screenPoint, String eventType) { 22 | super(view, latLng, screenPoint, eventType); 23 | } 24 | 25 | @Override 26 | public String getKey() { 27 | return getType().equals(EventTypes.ANNOTATION_SELECTED) ? EventKeys.POINT_ANNOTATION_SELECTED : EventKeys.POINT_ANNOTATION_DESELECTED; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/components/mapview/helpers/CameraChangeTracker.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.components.mapview.helpers; 2 | 3 | import android.util.Log; 4 | 5 | /** 6 | * Created by nickitaliano on 12/12/17. 7 | */ 8 | 9 | public class CameraChangeTracker { 10 | public static final int USER_GESTURE = 1; 11 | public static final int DEVELOPER_ANIMATION = 2; 12 | public static final int SDK_ANIMATION = 3; 13 | public static final int EMPTY = -1; 14 | 15 | private int reason = EMPTY; 16 | private boolean isAnimating; 17 | 18 | public void setReason(int reason) { 19 | this.reason = reason; 20 | } 21 | 22 | public void setIsAnimating(boolean isAnimating) { 23 | this.isAnimating = isAnimating; 24 | } 25 | 26 | public boolean isUserInteraction() { 27 | return reason == USER_GESTURE || reason == DEVELOPER_ANIMATION; 28 | } 29 | 30 | public boolean isAnimated() { 31 | return reason == DEVELOPER_ANIMATION || reason == SDK_ANIMATION; 32 | } 33 | 34 | public boolean isAnimating() { 35 | return this.isAnimating; 36 | } 37 | 38 | public boolean isEmpty() { 39 | return reason == EMPTY; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /example/ios/Podfile: -------------------------------------------------------------------------------- 1 | platform :ios, '9.0' 2 | 3 | target 'RNMapboxGLExample' do 4 | inhibit_all_warnings! 5 | 6 | rn_path = '../node_modules/react-native' 7 | 8 | # Pods for RNMapboxGLExample 9 | 10 | pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec" 11 | pod 'React', path: rn_path, subspecs: [ 12 | 'Core', 13 | 'CxxBridge', 14 | 'DevSupport', 15 | 'RCTActionSheet', 16 | 'RCTAnimation', 17 | 'RCTGeolocation', 18 | 'RCTImage', 19 | 'RCTLinkingIOS', 20 | 'RCTNetwork', 21 | 'RCTSettings', 22 | 'RCTText', 23 | 'RCTVibration', 24 | 'RCTWebSocket', 25 | ] 26 | 27 | # React Native third party dependencies podspecs 28 | pod 'DoubleConversion', :podspec => "#{rn_path}/third-party-podspecs/DoubleConversion.podspec" 29 | pod 'glog', :podspec => "#{rn_path}/third-party-podspecs/glog.podspec" 30 | pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec" 31 | 32 | # Mapbox 33 | pod 'react-native-mapbox-gl', :path => '../node_modules/@mapbox/react-native-mapbox-gl' 34 | 35 | # RN-Vector-Icons 36 | pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons' 37 | 38 | target 'RNMapboxGLExampleTests' do 39 | inherit! :search_paths 40 | # Pods for testing 41 | end 42 | 43 | end 44 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLShapeSourceManager.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLShapeSourceManager.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/19/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLShapeSourceManager.h" 10 | #import "RCTMGLShapeSource.h" 11 | 12 | @implementation RCTMGLShapeSourceManager 13 | 14 | RCT_EXPORT_MODULE() 15 | 16 | RCT_EXPORT_VIEW_PROPERTY(id, NSString) 17 | RCT_EXPORT_VIEW_PROPERTY(url, NSString) 18 | RCT_EXPORT_VIEW_PROPERTY(shape, NSString) 19 | 20 | RCT_EXPORT_VIEW_PROPERTY(cluster, NSNumber) 21 | RCT_EXPORT_VIEW_PROPERTY(clusterRadius, NSNumber) 22 | RCT_EXPORT_VIEW_PROPERTY(clusterMaxZoomLevel, NSNumber) 23 | RCT_EXPORT_VIEW_PROPERTY(maxZoomLevel, NSNumber) 24 | RCT_EXPORT_VIEW_PROPERTY(buffer, NSNumber) 25 | RCT_EXPORT_VIEW_PROPERTY(tolerance, NSNumber) 26 | RCT_EXPORT_VIEW_PROPERTY(images, NSDictionary) 27 | RCT_EXPORT_VIEW_PROPERTY(nativeImages, NSArray) 28 | RCT_EXPORT_VIEW_PROPERTY(hasPressListener, BOOL) 29 | RCT_EXPORT_VIEW_PROPERTY(hitbox, NSDictionary) 30 | RCT_REMAP_VIEW_PROPERTY(onMapboxShapeSourcePress, onPress, RCTBubblingEventBlock) 31 | 32 | - (UIView*)view 33 | { 34 | RCTMGLShapeSource *source = [RCTMGLShapeSource new]; 35 | source.bridge = self.bridge; 36 | return source; 37 | } 38 | 39 | @end 40 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/components/mapview/RCTMGLAndroidTextureMapViewManager.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.components.mapview; 2 | 3 | import com.facebook.react.bridge.ReactApplicationContext; 4 | import com.mapbox.mapboxsdk.maps.MapboxMapOptions; 5 | import com.facebook.react.uimanager.ThemedReactContext; 6 | import com.facebook.react.uimanager.annotations.ReactProp; 7 | 8 | /** 9 | * Created by hernanmateo on 12/11/18. 10 | */ 11 | 12 | public class RCTMGLAndroidTextureMapViewManager extends RCTMGLMapViewManager { 13 | public static final String LOG_TAG = RCTMGLAndroidTextureMapViewManager.class.getSimpleName(); 14 | public static final String REACT_CLASS = RCTMGLAndroidTextureMapView.class.getSimpleName(); 15 | 16 | public RCTMGLAndroidTextureMapViewManager(ReactApplicationContext context) { 17 | super(context); 18 | } 19 | 20 | @Override 21 | public String getName() { 22 | return REACT_CLASS; 23 | } 24 | 25 | @Override 26 | protected RCTMGLAndroidTextureMapView createViewInstance(ThemedReactContext themedReactContext) { 27 | MapboxMapOptions options = new MapboxMapOptions(); 28 | options.textureMode(true); 29 | return new RCTMGLAndroidTextureMapView(themedReactContext, this, options); 30 | } 31 | } -------------------------------------------------------------------------------- /example/src/components/GetZoom.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Text} from 'react-native'; 3 | import MapboxGL from '@mapbox/react-native-mapbox-gl'; 4 | 5 | import BaseExamplePropTypes from './common/BaseExamplePropTypes'; 6 | import Page from './common/Page'; 7 | import Bubble from './common/Bubble'; 8 | 9 | class GetZoom extends React.Component { 10 | static propTypes = { 11 | ...BaseExamplePropTypes, 12 | }; 13 | 14 | constructor(props) { 15 | super(props); 16 | 17 | this.state = { 18 | zoom: 9, 19 | }; 20 | 21 | this.onRegionDidChange = this.onRegionDidChange.bind(this); 22 | } 23 | 24 | async onRegionDidChange() { 25 | const zoom = await this._map.getZoom(); 26 | this.setState({zoom}); 27 | } 28 | 29 | render() { 30 | return ( 31 | 32 | (this._map = c)} 36 | onPress={this.onPress} 37 | centerCoordinate={[-73.970895, 40.723279]} 38 | style={{flex: 1}} 39 | /> 40 | 41 | 42 | Current zoom: {this.state.zoom} 43 | 44 | 45 | ); 46 | } 47 | } 48 | 49 | export default GetZoom; 50 | -------------------------------------------------------------------------------- /example/src/components/SetPitch.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MapboxGL from '@mapbox/react-native-mapbox-gl'; 3 | 4 | import sheet from '../styles/sheet'; 5 | 6 | import BaseExamplePropTypes from './common/BaseExamplePropTypes'; 7 | import TabBarPage from './common/TabBarPage'; 8 | 9 | class SetPitch extends React.Component { 10 | static propTypes = { 11 | ...BaseExamplePropTypes, 12 | }; 13 | 14 | constructor(props) { 15 | super(props); 16 | 17 | this._pitchOptions = [ 18 | {label: '15', data: 15}, 19 | {label: '45', data: 45}, 20 | {label: '60', data: 60}, 21 | ]; 22 | 23 | this.onUpdatePitch = this.onUpdatePitch.bind(this); 24 | } 25 | 26 | onUpdatePitch(index, pitch) { 27 | this.map.setCamera({pitch, duration: 300}); 28 | } 29 | 30 | render() { 31 | return ( 32 | 37 | (this.map = ref)} 39 | pitch={15} 40 | showUserLocation={true} 41 | userTrackingMode={MapboxGL.UserTrackingModes.Follow} 42 | style={sheet.matchParent} 43 | /> 44 | 45 | ); 46 | } 47 | } 48 | 49 | export default SetPitch; 50 | -------------------------------------------------------------------------------- /scripts/download-mapbox-gl-native-ios.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | cd ios/ 4 | 5 | VERSION=$1 6 | if type /usr/libexec/PlistBuddy &> /dev/null; then 7 | CURRENT_VERSION=$(/usr/libexec/PlistBuddy -c "Print :MGLSemanticVersionString" Mapbox.framework/Info.plist) 8 | else 9 | CURRENT_VERSION=$(cat .framework_version) 10 | fi 11 | 12 | if [ "$VERSION" == "$CURRENT_VERSION" ]; then 13 | echo "The newest version is already installed. Exiting." 14 | exit 0 15 | fi 16 | 17 | echo "Downloading Mapbox GL iOS $VERSION, this may take a minute." 18 | 19 | if ! which curl > /dev/null; then echo "curl command not found. Please install curl"; exit 1; fi; 20 | if ! which unzip > /dev/null; then echo "unzip command not found. Please install unzip"; exit 1; fi; 21 | 22 | if [ -d ./Mapbox.framework ]; then 23 | echo "Old Mapbox.framework found. Removing it and installing a $VERSION" 24 | rm -rf ./Mapbox.framework 25 | fi 26 | 27 | curl -sS https://mapbox.s3.amazonaws.com/mapbox-gl-native/ios/builds/mapbox-ios-sdk-$VERSION-dynamic.zip > temp.zip 28 | unzip -o temp.zip -d temp 29 | mv temp/dynamic/Mapbox.framework ./Mapbox.framework 30 | rm -r temp 31 | rm temp.zip 32 | 33 | if ! [ -d ./Mapbox.framework ]; then 34 | echo "Mapbox.framework not found. Please reinstall react-native-mapbox-gl"; exit 1; 35 | fi; 36 | 37 | echo "$VERSION" > .framework_version 38 | -------------------------------------------------------------------------------- /example/src/components/SetBearing.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MapboxGL from '@mapbox/react-native-mapbox-gl'; 3 | 4 | import sheet from '../styles/sheet'; 5 | 6 | import BaseExamplePropTypes from './common/BaseExamplePropTypes'; 7 | import TabBarPage from './common/TabBarPage'; 8 | 9 | class SetBearing extends React.Component { 10 | static propTypes = { 11 | ...BaseExamplePropTypes, 12 | }; 13 | 14 | constructor(props) { 15 | super(props); 16 | 17 | this._bearingOptions = [ 18 | {label: '0', data: 0}, 19 | {label: '90', data: 90}, 20 | {label: '180', data: 180}, 21 | ]; 22 | 23 | this.onBearingChange = this.onBearingChange.bind(this); 24 | } 25 | 26 | onBearingChange(index, bearing) { 27 | this.map.setCamera({heading: bearing, duration: 150}); 28 | } 29 | 30 | render() { 31 | return ( 32 | 37 | (this.map = ref)} 39 | heading={0} 40 | showUserLocation={true} 41 | userTrackingMode={MapboxGL.UserTrackingModes.Follow} 42 | style={sheet.matchParent} 43 | /> 44 | 45 | ); 46 | } 47 | } 48 | 49 | export default SetBearing; 50 | -------------------------------------------------------------------------------- /javascript/modules/offline/OfflineCreatePackOptions.js: -------------------------------------------------------------------------------- 1 | import {makeLatLngBounds} from '../../utils/geoUtils'; 2 | import {toJSONString} from '../../utils'; 3 | 4 | class OfflineCreatePackOptions { 5 | constructor(options = {}) { 6 | this._assert(options); 7 | 8 | this.name = options.name; 9 | this.styleURL = options.styleURL; 10 | this.bounds = this._makeLatLngBounds(options.bounds); 11 | this.minZoom = options.minZoom; 12 | this.maxZoom = options.maxZoom; 13 | this.metadata = this._makeMetadata(options.metadata); 14 | } 15 | 16 | _assert(options) { 17 | if (!options.styleURL) { 18 | throw new Error( 19 | 'Style URL must be provided for creating an offline pack', 20 | ); 21 | } 22 | 23 | if (!options.name) { 24 | throw new Error('Name must be provided for creating an offline pack'); 25 | } 26 | 27 | if (!options.bounds) { 28 | throw new Error('Bounds must be provided for creating an offline pack'); 29 | } 30 | } 31 | 32 | _makeLatLngBounds(bounds) { 33 | const ne = bounds[0]; 34 | const sw = bounds[1]; 35 | return toJSONString(makeLatLngBounds(ne, sw)); 36 | } 37 | 38 | _makeMetadata(metadata) { 39 | return JSON.stringify({ 40 | ...metadata, 41 | name: this.name, 42 | }); 43 | } 44 | } 45 | 46 | export default OfflineCreatePackOptions; 47 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 17 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLRasterSource.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLRasterSource.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/25/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLRasterSource.h" 10 | 11 | @implementation RCTMGLRasterSource 12 | 13 | - (MGLSource*)makeSource 14 | { 15 | return [[MGLRasterSource alloc] initWithIdentifier:self.id 16 | tileURLTemplates:@[_url] 17 | options:[self _getOptions]]; 18 | } 19 | 20 | - (NSDictionary*)_getOptions 21 | { 22 | NSMutableDictionary *options = [[NSMutableDictionary alloc] init]; 23 | 24 | if (_maxZoomLevel != nil) { 25 | options[MGLTileSourceOptionMaximumZoomLevel] = _maxZoomLevel; 26 | } 27 | 28 | if (_minZoomLevel != nil) { 29 | options[MGLTileSourceOptionMinimumZoomLevel] = _minZoomLevel; 30 | } 31 | 32 | if (_tileSize != nil) { 33 | options[MGLTileSourceOptionTileSize] = _tileSize; 34 | } 35 | 36 | if (_tms) { 37 | options[MGLTileSourceOptionTileCoordinateSystem] = [NSNumber numberWithUnsignedInteger:MGLTileCoordinateSystemTMS]; 38 | } 39 | 40 | if (_attribution != nil) { 41 | options[MGLTileSourceOptionAttributionHTMLString] = _attribution; 42 | } 43 | 44 | return options; 45 | } 46 | 47 | @end 48 | -------------------------------------------------------------------------------- /example/scripts/watch_rngl.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs-extra'); 3 | 4 | const RNGL_DIR = path.join('..'); 5 | const RNGL_EXAMPLE_DIR = path.join('node_modules', '@mapbox', 'react-native-mapbox-gl'); 6 | 7 | function copyFile(source, dest) { 8 | return new Promise((resolve, reject) => { 9 | fs.copy(source, dest, (err) => { 10 | if (err) { 11 | return reject(err); 12 | } 13 | return resolve(); 14 | }); 15 | }); 16 | } 17 | 18 | async function main () { 19 | try { 20 | console.log('Copying javascript'); 21 | await copyFile(path.join(RNGL_EXAMPLE_DIR, 'javascript'), path.join(RNGL_DIR, 'javascript')); 22 | 23 | console.log('Copying java'); 24 | await copyFile(path.join(RNGL_EXAMPLE_DIR, 'android', 'rctmgl', 'src'), path.join(RNGL_DIR, 'android', 'rctmgl', 'src')); 25 | 26 | console.log('Copying gradle file'); 27 | await copyFile(path.join(RNGL_EXAMPLE_DIR, 'android', 'rctmgl', 'build.gradle'), path.join(RNGL_DIR, 'android', 'rctmgl', 'build.gradle')); 28 | 29 | console.log('Copying objc'); 30 | await copyFile(path.join(RNGL_EXAMPLE_DIR, 'ios', 'RCTMGL'), path.join(RNGL_DIR, 'ios', 'RCTMGL')); 31 | 32 | console.log('Copying xcode project'); 33 | await copyFile(path.join(RNGL_EXAMPLE_DIR, 'ios', 'RCTMGL.xcodeproj'), path.join(RNGL_DIR, 'ios', 'RCTMGL.xcodeproj')); 34 | } catch (e) { 35 | console.log(e); 36 | } 37 | } 38 | 39 | main(); 40 | -------------------------------------------------------------------------------- /scripts/templates/index.d.ts.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | const layers = locals.layers; 3 | -%> 4 | /* eslint-disable */ 5 | // DO NOT MODIFY 6 | // THIS FILE IS AUTOGENERATED 7 | 8 | export interface ConstantProps { 9 | styletype: string 10 | payload: { 11 | value: any, 12 | }, 13 | }; 14 | 15 | export interface StyleFunctionProps { 16 | styletype: string 17 | payload: { 18 | fn: string, 19 | attributeName: string, 20 | stops: any[], 21 | mode: any, 22 | } 23 | } 24 | 25 | export interface TransitionProps { 26 | duration: number 27 | delay: number, 28 | } 29 | 30 | export type TranslationProps = { x: number, y: number } | number[] 31 | 32 | <%_ for (let layer of layers) { _%> 33 | export interface <%- camelCase(layer.name) _%>LayerStyleProps { 34 | <%_ for (let prop of layer.properties) { %> 35 | /** 36 | * <%- prop.doc.description %> 37 | <%_ if (prop.doc.requires.length) { _%> 38 | * 39 | * @requires <%- prop.doc.requires.join(', ') %> 40 | <%_ } _%> 41 | <%_ if (prop.doc.disabledBy.length) { _%> 42 | * 43 | * @disabledBy <%- prop.doc.disabledBy.join(', ') %> 44 | <%_ } _%> 45 | */ 46 | <%= prop.name %>: <%- dtsInterfaceType(prop) %> 47 | <%_ if (prop.transition) { %> 48 | /** 49 | * The transition affecting any changes to this layer’s <%= prop.name %> property. 50 | */ 51 | <%= prop.name %>Transition: TransitionProps, 52 | <%_ } _%> 53 | <%_ } _%> 54 | }; 55 | 56 | <%_ } _%> 57 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/events/constants/EventKeys.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.events.constants; 2 | 3 | /** 4 | * Created by nickitaliano on 8/27/17. 5 | */ 6 | 7 | public class EventKeys { 8 | public static final String NAMESPACE = "rct.mapbox"; 9 | 10 | // map events 11 | public static final String MAP_CLICK = ns("map.press"); 12 | public static final String MAP_LONG_CLICK = ns("map.longpress"); 13 | public static final String MAP_ONCHANGE = ns("map.change"); 14 | public static final String MAP_ON_LOCATION_CHANGE = ns("map.location.change"); 15 | public static final String MAP_ANDROID_CALLBACK = ns("map.androidcallback"); 16 | public static final String MAP_USER_TRACKING_MODE_CHANGE = ns("map.usertrackingmodechange"); 17 | 18 | // point annotation events 19 | public static final String POINT_ANNOTATION_SELECTED = ns("pointannotation.selected"); 20 | public static final String POINT_ANNOTATION_DESELECTED = ns("pointannotation.deselected"); 21 | 22 | // source events 23 | public static final String SHAPE_SOURCE_LAYER_CLICK = ns("shapesource.layer.pressed"); 24 | public static final String VECTOR_SOURCE_LAYER_CLICK = ns("vectorsource.layer.pressed"); 25 | public static final String RASTER_SOURCE_LAYER_CLICK = ns("rastersource.layer.pressed"); 26 | 27 | private static String ns(String name) { 28 | return String.format("%s.%s", NAMESPACE, name); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/rnmapboxglexample/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.rnmapboxglexample; 2 | 3 | import android.app.Application; 4 | import com.mapbox.rctmgl.RCTMGLPackage; 5 | import com.oblador.vectoricons.VectorIconsPackage; 6 | 7 | import com.facebook.react.ReactApplication; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.react.shell.MainReactPackage; 11 | import com.facebook.soloader.SoLoader; 12 | 13 | import java.util.Arrays; 14 | import java.util.List; 15 | 16 | public class MainApplication extends Application implements ReactApplication { 17 | 18 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 19 | @Override 20 | public boolean getUseDeveloperSupport() { 21 | return BuildConfig.DEBUG; 22 | } 23 | 24 | @Override 25 | protected List getPackages() { 26 | return Arrays.asList( 27 | new MainReactPackage(), 28 | new RCTMGLPackage(), 29 | new VectorIconsPackage() 30 | ); 31 | } 32 | 33 | @Override 34 | protected String getJSMainModuleName() { 35 | return "index"; 36 | } 37 | }; 38 | 39 | @Override 40 | public ReactNativeHost getReactNativeHost() { 41 | return mReactNativeHost; 42 | } 43 | 44 | @Override 45 | public void onCreate() { 46 | super.onCreate(); 47 | SoLoader.init(this, /* native exopackage */ false); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLLayer.h: -------------------------------------------------------------------------------- 1 | // 2 | // BaseLayer.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/8/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | #import 11 | 12 | @import Mapbox; 13 | 14 | @interface RCTMGLLayer : UIView 15 | 16 | @property (nonatomic, weak) RCTBridge *bridge; 17 | 18 | @property (nonatomic, strong) MGLStyleLayer *styleLayer; 19 | @property (nonatomic, strong) MGLStyle *style; 20 | @property (nonatomic, strong) NSDictionary *reactStyle; 21 | @property (nonatomic, strong) NSArray *> *filter; 22 | 23 | @property (nonatomic, copy) NSString *id; 24 | @property (nonatomic, copy) NSString *sourceID; 25 | 26 | @property (nonatomic, copy) NSString *aboveLayerID; 27 | @property (nonatomic, copy) NSString *belowLayerID; 28 | @property (nonatomic, copy) NSNumber *layerIndex; 29 | 30 | @property (nonatomic, copy) NSNumber *maxZoomLevel; 31 | @property (nonatomic, copy) NSNumber *minZoomLevel; 32 | 33 | - (void)addToMap:(MGLStyle*)style; 34 | - (void)removeFromMap:(MGLStyle*)style; 35 | - (T)makeLayer:(MGLStyle*)style; 36 | - (void)addStyles; 37 | - (void)insertAbove:(MGLStyleLayer*)layer; 38 | - (void)insertBelow:(MGLStyleLayer*)layer; 39 | - (void)insertAtIndex:(NSUInteger)index; 40 | - (void)insertLayer; 41 | - (void)setZoomBounds; 42 | - (void)addImage:(NSString*)url; 43 | - (NSPredicate*)buildFilters; 44 | - (void)updateFilter:(NSPredicate *)predicate; 45 | 46 | @end 47 | -------------------------------------------------------------------------------- /example/src/components/FitBounds.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MapboxGL from '@mapbox/react-native-mapbox-gl'; 3 | 4 | import sheet from '../styles/sheet'; 5 | 6 | import BaseExamplePropTypes from './common/BaseExamplePropTypes'; 7 | import TabBarPage from './common/TabBarPage'; 8 | 9 | class FitBounds extends React.Component { 10 | static propTypes = {...BaseExamplePropTypes}; 11 | 12 | houseBounds = [[-74.135379, 40.795909], [-74.135449, 40.795578]]; 13 | 14 | townBounds = [[-74.12641, 40.797968], [-74.143727, 40.772177]]; 15 | 16 | constructor(props) { 17 | super(props); 18 | 19 | this._bounds = [ 20 | {label: 'Fit House', data: this.houseBounds}, 21 | {label: 'Fit Town', data: this.townBounds}, 22 | ]; 23 | 24 | this.onFitBounds = this.onFitBounds.bind(this); 25 | } 26 | 27 | onFitBounds(i, bounds) { 28 | this.map.fitBounds(bounds[0], bounds[1], 0, 200); // ne sw 29 | } 30 | 31 | render() { 32 | return ( 33 | 38 | (this.map = ref)} 40 | contentInset={10} 41 | visibleCoordinateBounds={this.houseBounds} 42 | maxZoomLevel={19} 43 | styleURL={MapboxGL.StyleURL.Satellite} 44 | style={sheet.matchParent} 45 | /> 46 | 47 | ); 48 | } 49 | } 50 | 51 | export default FitBounds; 52 | -------------------------------------------------------------------------------- /javascript/components/AbstractLayer.js: -------------------------------------------------------------------------------- 1 | /* eslint react/prop-types:0 */ 2 | import React from 'react'; 3 | 4 | import MapboxStyleSheet from '../utils/MapboxStyleSheet'; 5 | import {getFilter} from '../utils/filterUtils'; 6 | 7 | class AbstractLayer extends React.Component { 8 | get baseProps() { 9 | return { 10 | ...this.props, 11 | id: this.props.id, 12 | sourceID: this.props.sourceID, 13 | reactStyle: this.getStyle(), 14 | minZoomLevel: this.props.minZoomLevel, 15 | maxZoomLevel: this.props.maxZoomLevel, 16 | aboveLayerID: this.props.aboveLayerID, 17 | belowLayerID: this.props.belowLayerID, 18 | layerIndex: this.props.layerIndex, 19 | filter: getFilter(this.props.filter), 20 | style: undefined, 21 | }; 22 | } 23 | 24 | getStyle() { 25 | if (!this.props.style) { 26 | return; 27 | } 28 | 29 | if (!Array.isArray(this.props.style)) { 30 | return this._getMapboxStyleSheet(this.props.style); 31 | } 32 | 33 | const styles = this.props.style; 34 | let flattenStyle = {}; 35 | 36 | for (const style of styles) { 37 | if (!style) { 38 | continue; 39 | } 40 | const mapboxStyle = this._getMapboxStyleSheet(style); 41 | flattenStyle = Object.assign(flattenStyle, mapboxStyle); 42 | } 43 | 44 | return flattenStyle; 45 | } 46 | 47 | _getMapboxStyleSheet(style) { 48 | return MapboxStyleSheet.create(style); 49 | } 50 | } 51 | 52 | export default AbstractLayer; 53 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLFillLayer.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLFillLayer.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/8/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLFillLayer.h" 10 | #import "RCTMGLStyle.h" 11 | 12 | @implementation RCTMGLFillLayer 13 | 14 | - (void)updateFilter:(NSPredicate *)predicate 15 | { 16 | ((MGLFillStyleLayer *) self.styleLayer).predicate = predicate; 17 | } 18 | 19 | - (void)setSourceLayerID:(NSString *)sourceLayerID 20 | { 21 | _sourceLayerID = sourceLayerID; 22 | 23 | if (self.styleLayer != nil) { 24 | ((MGLFillStyleLayer *) self.styleLayer).sourceLayerIdentifier = _sourceLayerID; 25 | } 26 | } 27 | 28 | - (void)addToMap:(MGLStyle *)style 29 | { 30 | [super addToMap:style]; 31 | 32 | NSPredicate *filter = [self buildFilters]; 33 | if (filter != nil) { 34 | [self updateFilter:filter]; 35 | } 36 | } 37 | 38 | - (MGLStyleLayer*)makeLayer:(MGLStyle*)style 39 | { 40 | MGLSource *source = [style sourceWithIdentifier:self.sourceID]; 41 | MGLFillStyleLayer *layer = [[MGLFillStyleLayer alloc] initWithIdentifier:self.id source:source]; 42 | layer.sourceLayerIdentifier = _sourceLayerID; 43 | return layer; 44 | } 45 | 46 | - (void)addStyles 47 | { 48 | RCTMGLStyle *style = [[RCTMGLStyle alloc] initWithMGLStyle:self.style]; 49 | style.bridge = self.bridge; 50 | [style fillLayer:(MGLFillStyleLayer*)self.styleLayer withReactStyle:self.reactStyle]; 51 | } 52 | 53 | @end 54 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLLineLayer.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLLineLayer.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/18/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLLineLayer.h" 10 | #import "RCTMGLStyle.h" 11 | 12 | @implementation RCTMGLLineLayer 13 | 14 | - (void)updateFilter:(NSPredicate *)predicate 15 | { 16 | ((MGLLineStyleLayer *) self.styleLayer).predicate = predicate; 17 | } 18 | 19 | - (void)setSourceLayerID:(NSString *)sourceLayerID 20 | { 21 | _sourceLayerID = sourceLayerID; 22 | 23 | if (self.styleLayer != nil) { 24 | ((MGLLineStyleLayer*) self.styleLayer).sourceLayerIdentifier = _sourceLayerID; 25 | } 26 | } 27 | 28 | - (void)addToMap:(MGLStyle *)style 29 | { 30 | [super addToMap:style]; 31 | 32 | NSPredicate *filter = [self buildFilters]; 33 | if (filter != nil) { 34 | [self updateFilter:filter]; 35 | } 36 | } 37 | 38 | - (MGLLineStyleLayer*)makeLayer:(MGLStyle*)style 39 | { 40 | MGLSource *source = [style sourceWithIdentifier:self.sourceID]; 41 | MGLLineStyleLayer *layer = [[MGLLineStyleLayer alloc] initWithIdentifier:self.id source:source]; 42 | layer.sourceLayerIdentifier = _sourceLayerID; 43 | return layer; 44 | } 45 | 46 | - (void)addStyles 47 | { 48 | RCTMGLStyle *style = [[RCTMGLStyle alloc] initWithMGLStyle:self.style]; 49 | style.bridge = self.bridge; 50 | [style lineLayer:(MGLLineStyleLayer *)self.styleLayer withReactStyle:self.reactStyle]; 51 | } 52 | 53 | @end 54 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLImageQueue.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLImageQueue.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 10/23/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLImageQueue.h" 10 | #import "RCTMGLImageQueueOperation.h" 11 | #import "RCTMGLUtils.h" 12 | 13 | @implementation RCTMGLImageQueue 14 | { 15 | NSOperationQueue *imageQueue; 16 | } 17 | 18 | - (id)init 19 | { 20 | if (self = [super init]) { 21 | imageQueue = [[NSOperationQueue alloc] init]; 22 | imageQueue.name = @"com.mapbox.rctmgl.DownloadImageQueue"; 23 | } 24 | return self; 25 | } 26 | 27 | - (void)dealloc 28 | { 29 | [self cancelAllOperations]; 30 | } 31 | 32 | + (instancetype)sharedInstance 33 | { 34 | static RCTMGLImageQueue *sharedInstance = nil; 35 | static dispatch_once_t onceToken; 36 | dispatch_once(&onceToken, ^{ 37 | sharedInstance = [[RCTMGLImageQueue alloc] init]; 38 | }); 39 | return sharedInstance; 40 | } 41 | 42 | - (void)cancelAllOperations 43 | { 44 | [imageQueue cancelAllOperations]; 45 | } 46 | 47 | - (void)addImage:(NSString *)imageURL bridge:(RCTBridge *)bridge completionHandler:(RCTImageLoaderCompletionBlock)handler 48 | { 49 | RCTMGLImageQueueOperation *operation = [[RCTMGLImageQueueOperation alloc] init]; 50 | operation.bridge = bridge; 51 | operation.urlRequest = [RCTConvert NSURLRequest:imageURL]; 52 | operation.completionHandler = handler; 53 | [imageQueue addOperation:operation]; 54 | } 55 | 56 | @end 57 | -------------------------------------------------------------------------------- /example/src/components/CustomVectorSource.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MapboxGL from '@mapbox/react-native-mapbox-gl'; 3 | 4 | import sheet from '../styles/sheet'; 5 | 6 | import BaseExamplePropTypes from './common/BaseExamplePropTypes'; 7 | import Page from './common/Page'; 8 | 9 | const styles = MapboxGL.StyleSheet.create({ 10 | boxFill: { 11 | fillColor: MapboxGL.StyleSheet.source( 12 | [[0, 'green'], [1, 'blue']], 13 | 'box', 14 | MapboxGL.InterpolationMode.Categorial, 15 | ), 16 | fillAntialias: true, 17 | }, 18 | }); 19 | 20 | const VECTOR_SOURCE_URL = 21 | 'mapbox://nickitaliano.cj94go8xl18fl2qp92v8bdivv-4kgl9'; 22 | 23 | class CustomVectorSource extends React.PureComponent { 24 | static propTypes = { 25 | ...BaseExamplePropTypes, 26 | }; 27 | 28 | render() { 29 | return ( 30 | 31 | 36 | 40 | 45 | 46 | 47 | 48 | ); 49 | } 50 | } 51 | 52 | export default CustomVectorSource; 53 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLCircleLayer.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLCircleLayer.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/18/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLCircleLayer.h" 10 | #import "RCTMGLStyle.h" 11 | 12 | @implementation RCTMGLCircleLayer 13 | 14 | - (void)updateFilter:(NSPredicate *)predicate 15 | { 16 | ((MGLCircleStyleLayer *) self.styleLayer).predicate = predicate; 17 | } 18 | 19 | - (void)setSourceLayerID:(NSString *)sourceLayerID 20 | { 21 | _sourceLayerID = sourceLayerID; 22 | 23 | if (self.styleLayer != nil) { 24 | ((MGLCircleStyleLayer*) self.styleLayer).sourceLayerIdentifier = _sourceLayerID; 25 | } 26 | } 27 | 28 | - (void)addToMap:(MGLStyle *)style 29 | { 30 | [super addToMap:style]; 31 | 32 | NSPredicate *filter = [self buildFilters]; 33 | if (filter != nil) { 34 | [self updateFilter:filter]; 35 | } 36 | } 37 | 38 | - (MGLCircleStyleLayer*)makeLayer:(MGLStyle*)style 39 | { 40 | MGLSource *source = [style sourceWithIdentifier:self.sourceID]; 41 | MGLCircleStyleLayer *layer = [[MGLCircleStyleLayer alloc] initWithIdentifier:self.id source:source]; 42 | layer.sourceLayerIdentifier = _sourceLayerID; 43 | return layer; 44 | } 45 | 46 | - (void)addStyles 47 | { 48 | RCTMGLStyle *style = [[RCTMGLStyle alloc] initWithMGLStyle:self.style]; 49 | style.bridge = self.bridge; 50 | [style circleLayer:(MGLCircleStyleLayer*)self.styleLayer withReactStyle:self.reactStyle]; 51 | } 52 | 53 | @end 54 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLSymbolLayer.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLSymbolLayer.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/19/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLSymbolLayer.h" 10 | #import "RCTMGLStyle.h" 11 | 12 | @implementation RCTMGLSymbolLayer 13 | 14 | - (void)updateFilter:(NSPredicate *)predicate 15 | { 16 | ((MGLSymbolStyleLayer *) self.styleLayer).predicate = predicate; 17 | } 18 | 19 | - (void)setSourceLayerID:(NSString *)sourceLayerID 20 | { 21 | _sourceLayerID = sourceLayerID; 22 | 23 | if (self.styleLayer != nil) { 24 | ((MGLSymbolStyleLayer*) self.styleLayer).sourceLayerIdentifier = _sourceLayerID; 25 | } 26 | } 27 | 28 | - (void)addToMap:(MGLStyle *)style 29 | { 30 | [super addToMap:style]; 31 | 32 | NSPredicate *filter = [self buildFilters]; 33 | if (filter != nil) { 34 | [self updateFilter:filter]; 35 | } 36 | } 37 | 38 | - (MGLSymbolStyleLayer*)makeLayer:(MGLStyle*)style 39 | { 40 | MGLSource *source = [style sourceWithIdentifier:self.sourceID]; 41 | MGLSymbolStyleLayer *layer = [[MGLSymbolStyleLayer alloc] initWithIdentifier:self.id source:source]; 42 | layer.sourceLayerIdentifier = _sourceLayerID; 43 | return layer; 44 | } 45 | 46 | - (void)addStyles 47 | { 48 | RCTMGLStyle *style = [[RCTMGLStyle alloc] initWithMGLStyle:self.style]; 49 | style.bridge = self.bridge; 50 | [style symbolLayer:(MGLSymbolStyleLayer*)self.styleLayer withReactStyle:self.reactStyle]; 51 | } 52 | 53 | @end 54 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/utils/GeoViewport.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.utils; 2 | 3 | import android.graphics.PointF; 4 | 5 | import com.mapbox.mapboxsdk.geometry.LatLng; 6 | import com.mapbox.mapboxsdk.geometry.LatLngBounds; 7 | import com.mapbox.mapboxsdk.geometry.VisibleRegion; 8 | 9 | /** 10 | * Created by nickitaliano on 1/5/18. 11 | * Ported from https://github.com/mapbox/geo-viewport/blob/master/index.js 12 | * This port only assumes we will have 512 vector tile sizes 13 | */ 14 | 15 | public class GeoViewport { 16 | private static SphericalMercator sphericalMercator = new SphericalMercator(); 17 | 18 | public static VisibleRegion getRegion(LatLng centerCoord, int zoomLevel, int viewportWidth, int viewportHeight) { 19 | PointF px = sphericalMercator.getPX(centerCoord, zoomLevel); 20 | 21 | LatLng tl = sphericalMercator.getLatLng(new PointF( 22 | px.x - (viewportWidth / 2), 23 | px.y - (viewportHeight / 2) 24 | ), zoomLevel); 25 | 26 | LatLng br = sphericalMercator.getLatLng(new PointF( 27 | px.x + (viewportWidth / 2), 28 | px.y + (viewportHeight / 2) 29 | ), zoomLevel); 30 | 31 | LatLng farLeft = tl; 32 | LatLng farRight = new LatLng(tl.getLatitude(), br.getLongitude()); 33 | LatLng nearLeft = new LatLng(br.getLatitude(), tl.getLongitude()); 34 | LatLng nearRight = br; 35 | 36 | return new VisibleRegion(farLeft, farRight, nearLeft, nearRight, null); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /example/src/components/ShowMap.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MapboxGL from '@mapbox/react-native-mapbox-gl'; 3 | 4 | import sheet from '../styles/sheet'; 5 | import {onSortOptions} from '../utils'; 6 | 7 | import BaseExamplePropTypes from './common/BaseExamplePropTypes'; 8 | import TabBarPage from './common/TabBarPage'; 9 | 10 | class ShowMap extends React.Component { 11 | static propTypes = { 12 | ...BaseExamplePropTypes, 13 | }; 14 | 15 | constructor(props) { 16 | super(props); 17 | 18 | this._mapOptions = Object.keys(MapboxGL.StyleURL) 19 | .map(key => { 20 | return { 21 | label: key, 22 | data: MapboxGL.StyleURL[key], 23 | }; 24 | }) 25 | .sort(onSortOptions); 26 | 27 | this.state = { 28 | styleURL: this._mapOptions[0].data, 29 | }; 30 | 31 | this.onMapChange = this.onMapChange.bind(this); 32 | } 33 | 34 | onMapChange(index, styleURL) { 35 | this.setState({styleURL}); 36 | } 37 | 38 | render() { 39 | return ( 40 | 46 | 53 | 54 | ); 55 | } 56 | } 57 | 58 | export default ShowMap; 59 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/events/AbstractEvent.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.events; 2 | 3 | import android.view.View; 4 | 5 | import com.facebook.react.bridge.Arguments; 6 | import com.facebook.react.bridge.WritableMap; 7 | 8 | /** 9 | * Created by nickitaliano on 8/27/17. 10 | */ 11 | 12 | abstract public class AbstractEvent implements IEvent { 13 | private int mTagID; 14 | private String mEventType; 15 | private long mTimestamp; 16 | 17 | public AbstractEvent(String eventType) { 18 | this(null, eventType); 19 | } 20 | 21 | public AbstractEvent(View view, String eventType) { 22 | mEventType = eventType; 23 | 24 | if (view != null) { 25 | mTagID = view.getId(); 26 | } 27 | 28 | mTimestamp = System.currentTimeMillis(); 29 | } 30 | 31 | public int getID() { 32 | return mTagID; 33 | } 34 | 35 | public String getType() { 36 | return mEventType; 37 | } 38 | 39 | public boolean equals(IEvent event) { 40 | return getKey().equals(event.getKey()) && mEventType.equals(event.getType()); 41 | } 42 | 43 | public WritableMap getPayload() { 44 | return Arguments.createMap(); 45 | } 46 | 47 | public long getTimestamp() { 48 | return mTimestamp; 49 | } 50 | 51 | public WritableMap toJSON() { 52 | WritableMap map = Arguments.createMap(); 53 | map.putString("type", getType()); 54 | map.putMap("payload", getPayload()); 55 | return map; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /docs/PointAnnotation.md: -------------------------------------------------------------------------------- 1 | ## 2 | ### PointAnnotation represents a one-dimensional shape located at a single geographical coordinate. 3 | 4 | ### props 5 | | Prop | Type | Default | Required | Description | 6 | | ---- | :--: | :-----: | :------: | :----------: | 7 | | id | `string` | `none` | `true` | A string that uniquely identifies the annotation | 8 | | title | `string` | `none` | `false` | The string containing the annotation’s title. Note this is required to be set if you want to see a callout appear on iOS. | 9 | | snippet | `string` | `none` | `false` | The string containing the annotation’s snippet(subtitle). Not displayed in the default callout. | 10 | | selected | `bool` | `none` | `false` | Manually selects/deselects annotation
@type {[type]} | 11 | | coordinate | `arrayOf` | `none` | `true` | The center point (specified as a map coordinate) of the annotation. | 12 | | anchor | `shape` | `{x: 0.5, y: 0.5}` | `false` | Specifies the anchor being set on a particular point of the annotation.
The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],
where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.
Note this is only for custom annotations not the default pin view.
Defaults to the center of the view. | 13 | | onSelected | `func` | `none` | `false` | This callback is fired once this annotation is selected. Returns a Feature as the first param. | 14 | | onDeselected | `func` | `none` | `false` | This callback is fired once this annotation is deselected. | 15 | 16 | 17 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLImageQueueOperation.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLImageQueueOperation.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 2/28/18. 6 | // Copyright © 2018 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLImageQueueOperation.h" 10 | 11 | @implementation RCTMGLImageQueueOperation 12 | { 13 | RCTImageLoaderCancellationBlock cancellationBlock; 14 | } 15 | 16 | - (void)start 17 | { 18 | if (self.isCancelled) { 19 | return; 20 | } 21 | 22 | __weak RCTMGLImageQueueOperation *weakSelf = self; 23 | dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{ 24 | cancellationBlock = [weakSelf.bridge.imageLoader loadImageWithURLRequest:weakSelf.urlRequest 25 | size:CGSizeZero 26 | scale:UIScreen.mainScreen.scale 27 | clipped:YES 28 | resizeMode:RCTResizeModeStretch 29 | progressBlock:nil 30 | partialLoadBlock:nil 31 | completionBlock:weakSelf.completionHandler]; 32 | }); 33 | } 34 | 35 | - (void)cancel 36 | { 37 | if (cancellationBlock != nil) { 38 | cancellationBlock(); 39 | } 40 | } 41 | 42 | @end 43 | -------------------------------------------------------------------------------- /example/android/app/BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") 12 | 13 | lib_deps = [] 14 | 15 | create_aar_targets(glob(["libs/*.aar"])) 16 | 17 | create_jar_targets(glob(["libs/*.jar"])) 18 | 19 | android_library( 20 | name = "all-libs", 21 | exported_deps = lib_deps, 22 | ) 23 | 24 | android_library( 25 | name = "app-code", 26 | srcs = glob([ 27 | "src/main/java/**/*.java", 28 | ]), 29 | deps = [ 30 | ":all-libs", 31 | ":build_config", 32 | ":res", 33 | ], 34 | ) 35 | 36 | android_build_config( 37 | name = "build_config", 38 | package = "com.rnmapboxglexample", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.rnmapboxglexample", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /example/src/components/PointInMapView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Text} from 'react-native'; 3 | import MapboxGL from '@mapbox/react-native-mapbox-gl'; 4 | 5 | import BaseExamplePropTypes from './common/BaseExamplePropTypes'; 6 | import Page from './common/Page'; 7 | import Bubble from './common/Bubble'; 8 | 9 | class PointInMapView extends React.Component { 10 | static propTypes = { 11 | ...BaseExamplePropTypes, 12 | }; 13 | 14 | constructor(props) { 15 | super(props); 16 | 17 | this.state = { 18 | pointInView: null, 19 | }; 20 | 21 | this.onPress = this.onPress.bind(this); 22 | } 23 | 24 | async onPress(e) { 25 | const pointInView = await this._map.getPointInView(e.geometry.coordinates); 26 | this.setState({pointInView}); 27 | } 28 | 29 | renderPointInView() { 30 | if (!this.state.pointInView) { 31 | return Touch map to see xy pixel location; 32 | } 33 | 34 | return [ 35 | x: {this.state.pointInView[0]}, 36 | y: {this.state.pointInView[1]}, 37 | ]; 38 | } 39 | 40 | render() { 41 | return ( 42 | 43 | (this._map = c)} 46 | onPress={this.onPress} 47 | centerCoordinate={[-73.970895, 40.723279]} 48 | style={{flex: 1}} 49 | /> 50 | 51 | {this.renderPointInView()} 52 | 53 | ); 54 | } 55 | } 56 | 57 | export default PointInMapView; 58 | -------------------------------------------------------------------------------- /__tests__/modules/offline/OfflinePack.test.js: -------------------------------------------------------------------------------- 1 | import {NativeModules} from 'react-native'; 2 | 3 | import OfflinePack from '../../../javascript/modules/offline/OfflinePack'; 4 | 5 | describe('OfflinePack', () => { 6 | const fakeNativePack = { 7 | bounds: [[0, 1], [2, 3]], 8 | metadata: '{"name":"test"}', 9 | }; 10 | 11 | it('should contain a valid pack', () => { 12 | const offlinePack = new OfflinePack(fakeNativePack); 13 | expect(offlinePack.bounds).toEqual(fakeNativePack.bounds); 14 | expect(offlinePack.name).toEqual('test'); 15 | expect(offlinePack.metadata).toEqual(JSON.parse(fakeNativePack.metadata)); 16 | }); 17 | 18 | it('should resume pack download', () => { 19 | const spy = jest.spyOn( 20 | NativeModules.MGLOfflineModule, 21 | 'resumePackDownload', 22 | ); 23 | const offlinePack = new OfflinePack(fakeNativePack); 24 | offlinePack.resume(); 25 | expect(spy).toHaveBeenCalled(); 26 | spy.mockRestore(); 27 | }); 28 | 29 | it('should pause pack download', () => { 30 | const spy = jest.spyOn(NativeModules.MGLOfflineModule, 'pausePackDownload'); 31 | const offlinePack = new OfflinePack(fakeNativePack); 32 | offlinePack.pause(); 33 | expect(spy).toHaveBeenCalled(); 34 | spy.mockRestore(); 35 | }); 36 | 37 | it('should get pack status', () => { 38 | const spy = jest.spyOn(NativeModules.MGLOfflineModule, 'getPackStatus'); 39 | const offlinePack = new OfflinePack(fakeNativePack); 40 | offlinePack.status(); 41 | expect(spy).toHaveBeenCalled(); 42 | spy.mockRestore(); 43 | }); 44 | }); 45 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/components/annotation/RCTMGLCalloutAdapter.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.components.annotation; 2 | 3 | import android.support.annotation.NonNull; 4 | import android.support.annotation.Nullable; 5 | import android.view.View; 6 | import android.view.ViewGroup; 7 | 8 | import com.mapbox.mapboxsdk.annotations.Marker; 9 | import com.mapbox.mapboxsdk.maps.MapboxMap; 10 | import com.mapbox.rctmgl.components.mapview.RCTMGLMapView; 11 | 12 | /** 13 | * Created by nickitaliano on 10/11/17. 14 | */ 15 | 16 | public class RCTMGLCalloutAdapter implements MapboxMap.InfoWindowAdapter { 17 | private RCTMGLMapView mMapView; 18 | 19 | public RCTMGLCalloutAdapter(RCTMGLMapView mapView) { 20 | mMapView = mapView; 21 | } 22 | 23 | @Nullable 24 | @Override 25 | public View getInfoWindow(@NonNull Marker marker) { 26 | if (mMapView == null) { 27 | return null; 28 | } 29 | 30 | RCTMGLPointAnnotation annotation = mMapView.getPointAnnotationByMarkerID(marker.getId()); 31 | if (annotation == null) { 32 | return null; 33 | } 34 | 35 | RCTMGLCallout calloutView = annotation.getCalloutView(); 36 | if (calloutView == null) { 37 | return null; 38 | } 39 | 40 | if (calloutView.getLayoutParams() == null) { 41 | calloutView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, 42 | ViewGroup.LayoutParams.WRAP_CONTENT)); 43 | } 44 | 45 | return calloutView; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLFillExtrusionLayer.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLFillExtrusionLayer.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/15/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLFillExtrusionLayer.h" 10 | #import "RCTMGLStyle.h" 11 | 12 | @implementation RCTMGLFillExtrusionLayer 13 | 14 | - (void)updateFilter:(NSPredicate *)predicate 15 | { 16 | ((MGLFillExtrusionStyleLayer *) self.styleLayer).predicate = predicate; 17 | } 18 | 19 | - (void)setSourceLayerID:(NSString *)sourceLayerID 20 | { 21 | _sourceLayerID = sourceLayerID; 22 | 23 | if (self.styleLayer != nil) { 24 | ((MGLFillExtrusionStyleLayer*) self.styleLayer).sourceLayerIdentifier = _sourceLayerID; 25 | } 26 | } 27 | 28 | - (void)addToMap:(MGLStyle *)style 29 | { 30 | [super addToMap:style]; 31 | 32 | NSPredicate *filter = [self buildFilters]; 33 | if (filter != nil) { 34 | [self updateFilter:filter]; 35 | } 36 | } 37 | 38 | - (MGLFillExtrusionStyleLayer*)makeLayer:(MGLStyle*)style 39 | { 40 | MGLSource *source = [style sourceWithIdentifier:self.sourceID]; 41 | MGLFillExtrusionStyleLayer *layer = [[MGLFillExtrusionStyleLayer alloc] initWithIdentifier:self.id source:source]; 42 | layer.sourceLayerIdentifier = _sourceLayerID; 43 | return layer; 44 | } 45 | 46 | - (void)addStyles 47 | { 48 | RCTMGLStyle *style = [[RCTMGLStyle alloc] initWithMGLStyle:self.style]; 49 | style.bridge = self.bridge; 50 | [style fillExtrusionLayer:(MGLFillExtrusionStyleLayer*)self.styleLayer withReactStyle:self.reactStyle]; 51 | } 52 | 53 | @end 54 | -------------------------------------------------------------------------------- /example/ios/RNMapboxGLExample/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import "AppDelegate.h" 9 | 10 | #import 11 | #import 12 | #import 13 | 14 | @implementation AppDelegate 15 | 16 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 17 | { 18 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 19 | RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge 20 | moduleName:@"RNMapboxGLExample" 21 | initialProperties:nil]; 22 | 23 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 24 | 25 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 26 | UIViewController *rootViewController = [UIViewController new]; 27 | rootViewController.view = rootView; 28 | self.window.rootViewController = rootViewController; 29 | [self.window makeKeyAndVisible]; 30 | return YES; 31 | } 32 | 33 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 34 | { 35 | #if DEBUG 36 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 37 | #else 38 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 39 | #endif 40 | } 41 | 42 | @end 43 | -------------------------------------------------------------------------------- /docs/snapshotManager.md: -------------------------------------------------------------------------------- 1 | ## 2 | ### The snapshotManager generates static raster images of the map.
Each snapshot image depicts a portion of a map defined by an SnapshotOptions object you provide.
The snapshotter generates the snapshot asynchronous. 3 | 4 | 5 | ### methods 6 | #### takeSnap(options) 7 | 8 | Takes a snapshot of the base map using the provided Snapshot options. NOTE pitch, heading, zoomLevel only works when centerCoordinate is set! 9 | 10 | ##### arguments 11 | | Name | Type | Required | Description | 12 | | ---- | :--: | :------: | :----------: | 13 | | `options` | `SnapshotOptions` | `Yes` | Snapshot options for create a static image of the base map | 14 | 15 | 16 | 17 | ```javascript 18 | // creates a temp file png of base map 19 | const uri = await MapboxGL.snapshotManager.takeSnap({ 20 | centerCoordinate: [-74.126410, 40.797968], 21 | width: width, 22 | height: height, 23 | zoomLevel: 12, 24 | pitch: 30, 25 | heading: 20, 26 | styleURL: MapboxGL.StyleURL.Dark, 27 | writeToDisk: true, // creates a temp file 28 | }); 29 | 30 | // creates base64 png of base map 31 | const uri = await MapboxGL.snapshotManager.takeSnap({ 32 | centerCoordinate: [-74.126410, 40.797968], 33 | width: width, 34 | height: height, 35 | zoomLevel: 12, 36 | pitch: 30, 37 | heading: 20, 38 | styleURL: MapboxGL.StyleURL.Dark, 39 | }); 40 | 41 | // creates snapshot with bounds 42 | const uri = await MapboxGL.snapshotManager.takeSnap({ 43 | bounds: [[-74.126410, 40.797968], [-74.143727, 40.772177]], 44 | width: width, 45 | height: height, 46 | styleURL: MapboxGL.StyleURL.Dark, 47 | }); 48 | ``` 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /example/src/components/common/MapHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import {StyleSheet} from 'react-native'; 4 | import {Header} from 'react-native-elements'; 5 | 6 | import colors from '../../styles/colors'; 7 | 8 | const styles = StyleSheet.create({ 9 | label: { 10 | fontSize: 24, 11 | color: colors.secondary.white, 12 | }, 13 | container: { 14 | borderBottomWidth: 0, 15 | }, 16 | }); 17 | 18 | class MapHeader extends React.PureComponent { 19 | static propTypes = { 20 | label: PropTypes.string.isRequired, 21 | backgroundColor: PropTypes.string, 22 | statusBarColor: PropTypes.string, 23 | statusBarTextTheme: PropTypes.string, 24 | onBack: PropTypes.func, 25 | }; 26 | 27 | static defaultProps = { 28 | statusBarTextTheme: 'light-content', 29 | statusBarColor: colors.primary.blueDark, 30 | backgroundColor: colors.primary.blue, 31 | }; 32 | 33 | render() { 34 | const statusBarProps = { 35 | barStyle: this.props.statusBarTextTheme, 36 | backgroundColor: this.props.statusBarColor, 37 | }; 38 | 39 | return ( 40 |
52 | ); 53 | } 54 | } 55 | 56 | export default MapHeader; 57 | -------------------------------------------------------------------------------- /ios/RCTMGL/CameraUpdateQueue.m: -------------------------------------------------------------------------------- 1 | // 2 | // CameraUpdateQueue.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 9/6/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "CameraUpdateQueue.h" 10 | 11 | @implementation CameraUpdateQueue 12 | { 13 | NSMutableArray *queue; 14 | } 15 | 16 | - (instancetype)init 17 | { 18 | if (self = [super init]) { 19 | queue = [[NSMutableArray alloc] init]; 20 | } 21 | 22 | return self; 23 | } 24 | 25 | - (void)enqueue:(CameraStop*)cameraUpdateItem 26 | { 27 | [queue addObject:cameraUpdateItem]; 28 | } 29 | 30 | - (CameraStop*)dequeue 31 | { 32 | if ([self isEmpty]) { 33 | return nil; 34 | } 35 | CameraStop *stop = queue.firstObject; 36 | [queue removeObjectAtIndex:0]; 37 | return stop; 38 | } 39 | 40 | - (void)flush 41 | { 42 | [queue removeAllObjects]; 43 | } 44 | 45 | - (BOOL)isEmpty 46 | { 47 | return queue.count == 0; 48 | } 49 | 50 | - (void)execute:(RCTMGLMapView*)mapView withCompletionHandler:(nullable void (^)(void))completeAllHandler 51 | { 52 | if ([self isEmpty]) { 53 | if (completeAllHandler != nil) { 54 | completeAllHandler(); 55 | } 56 | return; 57 | } 58 | 59 | CameraStop *stop = [self dequeue]; 60 | if (stop == nil) { 61 | return; 62 | } 63 | 64 | CameraUpdateItem *item = [[CameraUpdateItem alloc] init]; 65 | item.cameraStop = stop; 66 | 67 | __weak CameraUpdateQueue *weakSelf = self; 68 | [item execute:mapView withCompletionHandler:^{ [weakSelf execute:mapView withCompletionHandler:completeAllHandler]; }]; 69 | } 70 | 71 | @end 72 | -------------------------------------------------------------------------------- /ios/RCTMGL/ViewManager.m: -------------------------------------------------------------------------------- 1 | // 2 | // ViewManager.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 8/31/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "ViewManager.h" 10 | 11 | @implementation ViewManager 12 | { 13 | NSMutableDictionary *eventTimestampCache; 14 | } 15 | 16 | + (BOOL)requiresMainQueueSetup 17 | { 18 | return YES; 19 | } 20 | 21 | + (NSString *)moduleName 22 | { 23 | // Hack, to prevent JS from throwing a useless warning 24 | return @"RCTViewManager"; 25 | } 26 | 27 | static NSTimeInterval EVENT_THROTTLE_S = 0.01; 28 | 29 | - (instancetype)init 30 | { 31 | if (self = [super init]) { 32 | eventTimestampCache = [[NSMutableDictionary alloc] init]; 33 | } 34 | 35 | return self; 36 | } 37 | 38 | - (void)fireEvent:(RCTMGLEvent*)event withCallback:(RCTBubblingEventBlock)callback 39 | { 40 | if (![self _shouldDropEvent:event]) { 41 | NSString *cacheKey = [self _getCacheKey:event]; 42 | NSTimeInterval now = [[NSDate date] timeIntervalSince1970]; 43 | [eventTimestampCache setObject:[NSNumber numberWithDouble:now] forKey:cacheKey]; 44 | 45 | if (callback != nil) { 46 | callback([event toJSON]); 47 | } 48 | } 49 | } 50 | 51 | - (BOOL)_shouldDropEvent:(RCTMGLEvent *)event 52 | { 53 | NSString *cacheKey = [self _getCacheKey:event]; 54 | NSNumber *lastTimestamp = [eventTimestampCache objectForKey:cacheKey]; 55 | return lastTimestamp != nil && (event.timestamp - [lastTimestamp doubleValue]) <= EVENT_THROTTLE_S; 56 | } 57 | 58 | - (NSString*)_getCacheKey:(RCTMGLEvent*)event 59 | { 60 | return event.type; 61 | } 62 | 63 | @end 64 | -------------------------------------------------------------------------------- /example/src/components/TwoByTwo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MapboxGL from '@mapbox/react-native-mapbox-gl'; 3 | 4 | import sheet from '../styles/sheet'; 5 | import smileyFaceGeoJSON from '../assets/smiley_face.json'; 6 | 7 | import BaseExamplePropTypes from './common/BaseExamplePropTypes'; 8 | import Page from './common/Page'; 9 | 10 | const layerStyles = MapboxGL.StyleSheet.create({ 11 | smileyFaceLight: { 12 | fillAntialias: true, 13 | fillColor: 'white', 14 | fillOutlineColor: 'rgba(255, 255, 255, 0.84)', 15 | }, 16 | smileyFaceDark: { 17 | fillAntialias: true, 18 | fillColor: 'black', 19 | fillOutlineColor: 'rgba(0, 0, 0, 0.84)', 20 | }, 21 | }); 22 | 23 | class TwoByTwo extends React.Component { 24 | static propTypes = { 25 | ...BaseExamplePropTypes, 26 | }; 27 | 28 | renderMap(styleURL, layerStyle) { 29 | return ( 30 | (this.map = ref)} 35 | style={sheet.matchParent} 36 | styleURL={styleURL} 37 | > 38 | 39 | 40 | 41 | 42 | ); 43 | } 44 | 45 | render() { 46 | return ( 47 | 48 | {this.renderMap(MapboxGL.StyleURL.Light, layerStyles.smileyFaceDark)} 49 | {this.renderMap(MapboxGL.StyleURL.Dark, layerStyles.smileyFaceLight)} 50 | 51 | ); 52 | } 53 | } 54 | 55 | export default TwoByTwo; 56 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLEventTypes.h: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLEventTypes.h 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 8/27/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import 10 | 11 | @interface RCTMGLEventTypes : NSObject 12 | 13 | extern NSString *const RCT_MAPBOX_EVENT_TAP; 14 | extern NSString *const RCT_MAPBOX_EVENT_LONGPRESS; 15 | 16 | extern NSString *const RCT_MAPBOX_USER_LOCATION_UPDATE; 17 | extern NSString *const RCT_MAPBOX_USER_TRACKING_MODE_CHANGE; 18 | 19 | extern NSString *const RCT_MAPBOX_REGION_WILL_CHANGE_EVENT; 20 | extern NSString *const RCT_MAPBOX_REGION_IS_CHANGING; 21 | extern NSString *const RCT_MAPBOX_REGION_DID_CHANGE; 22 | 23 | extern NSString *const RCT_MAPBOX_WILL_START_LOADING_MAP; 24 | extern NSString *const RCT_MAPBOX_DID_FINISH_LOADING_MAP; 25 | extern NSString *const RCT_MAPBOX_DID_FAIL_LOADING_MAP; 26 | 27 | extern NSString *const RCT_MAPBOX_WILL_START_RENDERING_FRAME; 28 | extern NSString *const RCT_MAPBOX_DID_FINSIH_RENDERING_FRAME; 29 | extern NSString *const RCT_MAPBOX_DID_FINISH_RENDERING_FRAME_FULLY; 30 | 31 | extern NSString *const RCT_MAPBOX_WILL_START_RENDERING_MAP; 32 | extern NSString *const RCT_MAPBOX_DID_FINISH_RENDERING_MAP; 33 | extern NSString *const RCT_MAPBOX_DID_FINISH_RENDERING_MAP_FULLY; 34 | 35 | extern NSString *const RCT_MAPBOX_DID_FINISH_LOADING_STYLE; 36 | 37 | extern NSString *const RCT_MAPBOX_ANNOTATION_TAP; 38 | 39 | extern NSString *const RCT_MAPBOX_OFFLINE_PROGRESS; 40 | extern NSString *const RCT_MAPBOX_OFFLINE_ERROR; 41 | extern NSString *const RCT_MAPBOX_OFFLINE_TILE_LIMIT; 42 | 43 | extern NSString *const RCT_MAPBOX_SHAPE_SOURCE_LAYER_PRESS; 44 | extern NSString *const RCT_MAPBOX_VECTOR_SOURCE_LAYER_PRESS; 45 | @end 46 | -------------------------------------------------------------------------------- /docs/RasterSource.md: -------------------------------------------------------------------------------- 1 | ## 2 | ### RasterSource is a map content source that supplies raster image tiles to be shown on the map.
The location of and metadata about the tiles are defined either by an option dictionary
or by an external file that conforms to the TileJSON specification. 3 | 4 | ### props 5 | | Prop | Type | Default | Required | Description | 6 | | ---- | :--: | :-----: | :------: | :----------: | 7 | | id | `string` | `MapboxGL.StyleSource.DefaultSourceID` | `false` | A string that uniquely identifies the source. | 8 | | url | `string` | `none` | `false` | A URL to a TileJSON configuration file describing the source’s contents and other metadata. | 9 | | minZoomLevel | `number` | `none` | `false` | An unsigned integer that specifies the minimum zoom level at which to display tiles from the source.
The value should be between 0 and 22, inclusive, and less than
maxZoomLevel, if specified. The default value for this option is 0. | 10 | | maxZoomLevel | `number` | `none` | `false` | An unsigned integer that specifies the maximum zoom level at which to display tiles from the source.
The value should be between 0 and 22, inclusive, and less than
minZoomLevel, if specified. The default value for this option is 22. | 11 | | tileSize | `number` | `none` | `false` | Size of the map tiles.
Mapbox urls default to 256, all others default to 512. | 12 | | tms | `bool` | `none` | `false` | Influences the y direction of the tile coordinates. (tms inverts y axis) | 13 | | attribution | `string` | `none` | `false` | An HTML or literal text string defining the buttons to be displayed in an action sheet when the
source is part of a map view’s style and the map view’s attribution button is pressed. | 14 | 15 | 16 | -------------------------------------------------------------------------------- /example/src/components/SetUserLocationVerticalAlignment.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MapboxGL from '@mapbox/react-native-mapbox-gl'; 3 | 4 | import sheet from '../styles/sheet'; 5 | import {onSortOptions} from '../utils'; 6 | 7 | import BaseExamplePropTypes from './common/BaseExamplePropTypes'; 8 | import TabBarPage from './common/TabBarPage'; 9 | 10 | class SetUserLocationVerticalAlignment extends React.Component { 11 | static propTypes = { 12 | ...BaseExamplePropTypes, 13 | }; 14 | 15 | constructor(props) { 16 | super(props); 17 | 18 | this._alignmentOptions = Object.keys(MapboxGL.UserLocationVerticalAlignment) 19 | .map(key => { 20 | return { 21 | label: key, 22 | data: MapboxGL.UserLocationVerticalAlignment[key], 23 | }; 24 | }) 25 | .sort(onSortOptions); 26 | 27 | this.state = { 28 | currentAlignmentMode: this._alignmentOptions[0].data, 29 | }; 30 | 31 | this.onAlignmentChange = this.onAlignmentChange.bind(this); 32 | } 33 | 34 | onAlignmentChange(index, userLocationVerticalAlignment) { 35 | this.setState({currentAlignmentMode: userLocationVerticalAlignment}); 36 | } 37 | 38 | render() { 39 | return ( 40 | 45 | 51 | 52 | ); 53 | } 54 | } 55 | 56 | export default SetUserLocationVerticalAlignment; 57 | -------------------------------------------------------------------------------- /android/rctmgl/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.library' 2 | 3 | def safeExtGet(prop, fallback) { 4 | rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback 5 | } 6 | 7 | android { 8 | compileSdkVersion safeExtGet("compileSdkVersion", 28) 9 | buildToolsVersion safeExtGet("buildToolsVersion", '28.0.3') 10 | 11 | defaultConfig { 12 | minSdkVersion safeExtGet('minSdkVersion', 16) 13 | targetSdkVersion safeExtGet('targetSdkVersion', 26) 14 | versionCode 1 15 | versionName "1.0" 16 | } 17 | 18 | buildTypes { 19 | release { 20 | minifyEnabled false 21 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' 22 | } 23 | } 24 | } 25 | 26 | dependencies { 27 | implementation fileTree(dir: 'libs', include: ['*.jar']) 28 | 29 | // React Native 30 | compileOnly "com.facebook.react:react-native:+" 31 | 32 | // Mapbox SDK 33 | implementation 'com.mapbox.mapboxsdk:mapbox-android-services:2.2.9' 34 | implementation 'com.mapbox.mapboxsdk:mapbox-android-sdk:5.5.3@aar' 35 | 36 | // Dependencies 37 | implementation "com.android.support:support-vector-drawable:${safeExtGet('supportLibVersion', '28.0.0')}" 38 | implementation "com.android.support:support-annotations:${safeExtGet('supportLibVersion', '28.0.0')}" 39 | implementation "com.android.support:appcompat-v7:${safeExtGet('supportLibVersion', '28.0.0')}" 40 | implementation "com.squareup.okhttp3:okhttp:${safeExtGet('okhttpVersion', '3.12.1')}" 41 | 42 | // Mapbox plugins 43 | implementation 'com.mapbox.mapboxsdk:mapbox-android-plugin-localization:0.1.0' 44 | implementation 'com.mapbox.mapboxsdk:mapbox-android-plugin-locationlayer:0.3.0' 45 | } 46 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/light/RCTMGLLight.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.components.styles.light; 2 | 3 | import android.content.Context; 4 | 5 | import com.facebook.react.bridge.ReadableMap; 6 | import com.mapbox.mapboxsdk.maps.MapboxMap; 7 | import com.mapbox.mapboxsdk.style.layers.TransitionOptions; 8 | import com.mapbox.mapboxsdk.style.light.Light; 9 | import com.mapbox.mapboxsdk.style.light.Position; 10 | import com.mapbox.rctmgl.components.AbstractMapFeature; 11 | import com.mapbox.rctmgl.components.mapview.RCTMGLMapView; 12 | import com.mapbox.rctmgl.components.styles.RCTMGLStyle; 13 | import com.mapbox.rctmgl.components.styles.RCTMGLStyleFactory; 14 | 15 | import java.util.HashMap; 16 | import java.util.Map; 17 | 18 | /** 19 | * Created by nickitaliano on 9/26/17. 20 | */ 21 | 22 | public class RCTMGLLight extends AbstractMapFeature { 23 | private MapboxMap mMap; 24 | private ReadableMap mReactStyle; 25 | 26 | public RCTMGLLight(Context context) { 27 | super(context); 28 | } 29 | 30 | @Override 31 | public void addToMap(RCTMGLMapView mapView) { 32 | mMap = mapView.getMapboxMap(); 33 | setLight(mMap.getLight()); 34 | } 35 | 36 | @Override 37 | public void removeFromMap(RCTMGLMapView mapView) { 38 | // ignore there's nothing to remove just update the light style 39 | } 40 | 41 | public void setReactStyle(ReadableMap reactStyle) { 42 | mReactStyle = reactStyle; 43 | 44 | if (mMap != null) { 45 | setLight(mMap.getLight()); 46 | } 47 | } 48 | 49 | private void setLight(Light light) { 50 | RCTMGLStyleFactory.setLightLayerStyle(light, new RCTMGLStyle(getContext(), mReactStyle, mMap)); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /example/src/components/GetCenter.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Text} from 'react-native'; 3 | import MapboxGL from '@mapbox/react-native-mapbox-gl'; 4 | 5 | import BaseExamplePropTypes from './common/BaseExamplePropTypes'; 6 | import Page from './common/Page'; 7 | import Bubble from './common/Bubble'; 8 | 9 | class GetCenter extends React.Component { 10 | static propTypes = { 11 | ...BaseExamplePropTypes, 12 | }; 13 | 14 | constructor(props) { 15 | super(props); 16 | 17 | this.state = { 18 | center: [], 19 | }; 20 | 21 | this.onRegionDidChange = this.onRegionDidChange.bind(this); 22 | this.getLat = this.getLat.bind(this); 23 | this.getLng = this.getLng.bind(this); 24 | } 25 | 26 | async onRegionDidChange() { 27 | const center = await this._map.getCenter(); 28 | this.setState({center}); 29 | } 30 | 31 | getLng() { 32 | const {center} = this.state; 33 | return center.length === 2 ? `Lng: ${center[0]}` : 'Not available'; 34 | } 35 | 36 | getLat() { 37 | const {center} = this.state; 38 | return center.length === 2 ? `Lat: ${center[1]}` : 'Not available'; 39 | } 40 | 41 | render() { 42 | return ( 43 | 44 | (this._map = c)} 48 | onPress={this.onPress} 49 | centerCoordinate={[-73.970895, 40.723279]} 50 | style={{flex: 1}} 51 | /> 52 | 53 | 54 | Center 55 | {this.getLng()} 56 | {this.getLat()} 57 | 58 | 59 | ); 60 | } 61 | } 62 | 63 | export default GetCenter; 64 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/events/MapClickEvent.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.events; 2 | 3 | import android.graphics.PointF; 4 | import android.support.annotation.NonNull; 5 | import android.view.View; 6 | 7 | import com.facebook.react.bridge.WritableMap; 8 | import com.facebook.react.bridge.WritableNativeMap; 9 | import com.mapbox.mapboxsdk.geometry.LatLng; 10 | 11 | import com.mapbox.rctmgl.events.constants.EventKeys; 12 | import com.mapbox.rctmgl.events.constants.EventTypes; 13 | import com.mapbox.rctmgl.utils.GeoJSONUtils; 14 | 15 | /** 16 | * Created by nickitaliano on 8/23/17. 17 | */ 18 | 19 | public class MapClickEvent extends AbstractEvent { 20 | private LatLng mTouchedLatLng; 21 | private PointF mScreenPoint; 22 | 23 | public MapClickEvent(View view, @NonNull LatLng latLng, @NonNull PointF screenPoint) { 24 | this(view, latLng, screenPoint, EventTypes.MAP_CLICK); 25 | } 26 | 27 | public MapClickEvent(View view, @NonNull LatLng latLng, @NonNull PointF screenPoint, String eventType) { 28 | super(view, eventType); 29 | mTouchedLatLng = latLng; 30 | mScreenPoint = screenPoint; 31 | } 32 | 33 | @Override 34 | public String getKey() { 35 | String eventType = getType(); 36 | 37 | if (eventType.equals(EventTypes.MAP_LONG_CLICK)) { 38 | return EventKeys.MAP_LONG_CLICK; 39 | } 40 | 41 | return EventKeys.MAP_CLICK; 42 | } 43 | 44 | @Override 45 | public WritableMap getPayload() { 46 | WritableMap properties = new WritableNativeMap(); 47 | properties.putDouble("screenPointX", mScreenPoint.x); 48 | properties.putDouble("screenPointY", mScreenPoint.y); 49 | return GeoJSONUtils.toPointFeature(mTouchedLatLng, properties); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /ios/RCTMGL/RCTMGLImageSource.m: -------------------------------------------------------------------------------- 1 | // 2 | // RCTMGLImageSource.m 3 | // RCTMGL 4 | // 5 | // Created by Nick Italiano on 11/29/17. 6 | // Copyright © 2017 Mapbox Inc. All rights reserved. 7 | // 8 | 9 | #import "RCTMGLImageSource.h" 10 | @import Mapbox; 11 | 12 | @implementation RCTMGLImageSource 13 | 14 | - (void)setUrl:(NSString *)url 15 | { 16 | _url = url; 17 | 18 | if (self.source != nil) { 19 | MGLImageSource *source = (MGLImageSource *)self.source; 20 | source.URL = [NSURL URLWithString:_url]; 21 | } 22 | } 23 | 24 | - (MGLSource *)makeSource 25 | { 26 | NSURL *myURL; 27 | 28 | if ([[_url substringToIndex:4] isEqualToString:@"http"]) { 29 | myURL = [NSURL URLWithString:_url]; 30 | } 31 | else 32 | { 33 | //Default consider it file url path 34 | myURL = [NSURL fileURLWithPath:_url]; 35 | } 36 | 37 | return [[MGLImageSource alloc] initWithIdentifier:self.id 38 | coordinateQuad:[self _makeCoordQuad] 39 | URL:myURL]; 40 | } 41 | 42 | - (MGLCoordinateQuad)_makeCoordQuad 43 | { 44 | CLLocationCoordinate2D topLeft = CLLocationCoordinate2DMake([self.coordinates[0][1] floatValue], [self.coordinates[0][0] floatValue]); 45 | CLLocationCoordinate2D topRight = CLLocationCoordinate2DMake([self.coordinates[1][1] floatValue], [self.coordinates[1][0] floatValue]); 46 | CLLocationCoordinate2D bottomRight = CLLocationCoordinate2DMake([self.coordinates[2][1] floatValue], [self.coordinates[2][0] floatValue]); 47 | CLLocationCoordinate2D bottomLeft = CLLocationCoordinate2DMake([self.coordinates[3][1] floatValue], [self.coordinates[3][0] floatValue]); 48 | return MGLCoordinateQuadMake(topLeft, bottomLeft, bottomRight, topRight); 49 | } 50 | 51 | @end 52 | -------------------------------------------------------------------------------- /example/src/components/GeoJSONSource.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MapboxGL from '@mapbox/react-native-mapbox-gl'; 3 | 4 | import sheet from '../styles/sheet'; 5 | import gridPattern from '../assets/grid_pattern.png'; 6 | import smileyFaceGeoJSON from '../assets/smiley_face.json'; 7 | 8 | import Page from './common/Page'; 9 | import BaseExamplePropTypes from './common/BaseExamplePropTypes'; 10 | 11 | const layerStyles = MapboxGL.StyleSheet.create({ 12 | background: { 13 | backgroundPattern: gridPattern, 14 | }, 15 | smileyFace: { 16 | fillAntialias: true, 17 | fillColor: 'white', 18 | fillOutlineColor: 'rgba(255, 255, 255, 0.84)', 19 | }, 20 | }); 21 | 22 | class GeoJSONSource extends React.Component { 23 | static propTypes = { 24 | ...BaseExamplePropTypes, 25 | }; 26 | 27 | render() { 28 | return ( 29 | 30 | (this.map = ref)} 35 | style={sheet.matchParent} 36 | styleURL={MapboxGL.StyleURL.Dark} 37 | > 38 | 39 | 43 | 44 | 45 | 46 | 50 | 51 | 52 | 53 | ); 54 | } 55 | } 56 | 57 | export default GeoJSONSource; 58 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/location/UserLocation.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.location; 2 | 3 | import android.location.Location; 4 | 5 | import com.mapbox.mapboxsdk.geometry.LatLng; 6 | 7 | /** 8 | * Created by nickitaliano on 12/13/17. 9 | */ 10 | 11 | public class UserLocation { 12 | private Location currentLocation; 13 | private Location previousLocation; 14 | 15 | private int userTrackingMode = UserTrackingMode.NONE; 16 | 17 | public UserLocation() { 18 | this(null); 19 | } 20 | 21 | public UserLocation(Location currentLocation) { 22 | this.currentLocation = currentLocation; 23 | } 24 | 25 | public Location getCurrentLocation() { 26 | return currentLocation; 27 | } 28 | 29 | public double getBearing() { 30 | if (currentLocation == null) { 31 | return 0.0; 32 | } 33 | return currentLocation.getBearing(); 34 | } 35 | 36 | public LatLng getCoordinate() { 37 | if (currentLocation == null) { 38 | return null; 39 | } 40 | 41 | return new LatLng(currentLocation.getLatitude(), currentLocation.getLongitude()); 42 | } 43 | 44 | public void setCurrentLocation(Location currentLocation) { 45 | this.previousLocation = this.currentLocation; 46 | this.currentLocation = currentLocation; 47 | } 48 | 49 | public void setTrackingMode(int userTrackingMode) { 50 | this.userTrackingMode = userTrackingMode; 51 | } 52 | 53 | public int getTrackingMode() { 54 | return userTrackingMode; 55 | } 56 | 57 | public float getDistance(Location location) { 58 | if (currentLocation == null) { 59 | return 0.0f; 60 | } 61 | return currentLocation.distanceTo(location); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/layers/RCTMGLCircleLayer.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.components.styles.layers; 2 | 3 | import android.content.Context; 4 | 5 | import com.mapbox.mapboxsdk.style.layers.CircleLayer; 6 | import com.mapbox.mapboxsdk.style.layers.Filter; 7 | import com.mapbox.rctmgl.components.mapview.RCTMGLMapView; 8 | import com.mapbox.rctmgl.components.styles.RCTMGLStyle; 9 | import com.mapbox.rctmgl.components.styles.RCTMGLStyleFactory; 10 | 11 | /** 12 | * Created by nickitaliano on 9/18/17. 13 | */ 14 | 15 | public class RCTMGLCircleLayer extends RCTLayer { 16 | private String mSourceLayerID; 17 | 18 | public RCTMGLCircleLayer(Context context) { 19 | super(context); 20 | } 21 | 22 | @Override 23 | protected void updateFilter(Filter.Statement statement) { 24 | mLayer.setFilter(statement); 25 | } 26 | 27 | @Override 28 | public void addToMap(RCTMGLMapView mapView) { 29 | super.addToMap(mapView); 30 | 31 | if (mFilter != null) { 32 | updateFilter(mFilter); 33 | } 34 | } 35 | 36 | @Override 37 | public CircleLayer makeLayer() { 38 | CircleLayer layer = new CircleLayer(mID, mSourceID); 39 | 40 | if (mSourceLayerID != null) { 41 | layer.setSourceLayer(mSourceLayerID); 42 | } 43 | 44 | return layer; 45 | } 46 | 47 | @Override 48 | public void addStyles() { 49 | RCTMGLStyleFactory.setCircleLayerStyle(mLayer, new RCTMGLStyle(getContext(), mReactStyle, mMap)); 50 | } 51 | 52 | public void setSourceLayerID(String sourceLayerID) { 53 | mSourceLayerID = sourceLayerID; 54 | 55 | if (mLayer != null) { 56 | mLayer.setSourceLayer(sourceLayerID); 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /example/src/components/DataDrivenCircleColors.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import MapboxGL from '@mapbox/react-native-mapbox-gl'; 3 | 4 | import sheet from '../styles/sheet'; 5 | 6 | import BaseExamplePropTypes from './common/BaseExamplePropTypes'; 7 | import Page from './common/Page'; 8 | 9 | const styles = MapboxGL.StyleSheet.create({ 10 | circles: { 11 | circleRadius: MapboxGL.StyleSheet.camera( 12 | { 13 | 12: 2, 14 | 22: 18, 15 | }, 16 | MapboxGL.InterpolationMode.Exponential, 17 | ), 18 | 19 | circleColor: MapboxGL.StyleSheet.source( 20 | [ 21 | ['White', '#fbb03b'], 22 | ['Black', '#223b53'], 23 | ['Hispanic', '#e55e5e'], 24 | ['Asian', '#3bb2d0'], 25 | ['Other', '#ccc'], 26 | ], 27 | 'ethnicity', 28 | MapboxGL.InterpolationMode.Categorical, 29 | ), 30 | }, 31 | }); 32 | 33 | class DataDrivenCircleColors extends React.PureComponent { 34 | static propTypes = { 35 | ...BaseExamplePropTypes, 36 | }; 37 | 38 | render() { 39 | return ( 40 | 41 | 48 | 52 | 57 | 58 | 59 | 60 | ); 61 | } 62 | } 63 | 64 | export default DataDrivenCircleColors; 65 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/layers/RCTMGLLineLayer.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.components.styles.layers; 2 | 3 | import android.content.Context; 4 | 5 | import com.facebook.react.uimanager.UIManagerModule; 6 | import com.mapbox.mapboxsdk.style.layers.Filter; 7 | import com.mapbox.mapboxsdk.style.layers.LineLayer; 8 | import com.mapbox.rctmgl.components.mapview.RCTMGLMapView; 9 | import com.mapbox.rctmgl.components.styles.RCTMGLStyle; 10 | import com.mapbox.rctmgl.components.styles.RCTMGLStyleFactory; 11 | 12 | /** 13 | * Created by nickitaliano on 9/18/17. 14 | */ 15 | 16 | public class RCTMGLLineLayer extends RCTLayer { 17 | private String mSourceLayerID; 18 | 19 | public RCTMGLLineLayer(Context context) { 20 | super(context); 21 | } 22 | 23 | @Override 24 | protected void updateFilter(Filter.Statement statement) { 25 | mLayer.setFilter(statement); 26 | } 27 | 28 | @Override 29 | public void addToMap(RCTMGLMapView mapView) { 30 | super.addToMap(mapView); 31 | 32 | if (mFilter != null) { 33 | updateFilter(mFilter); 34 | } 35 | } 36 | 37 | @Override 38 | public LineLayer makeLayer() { 39 | LineLayer layer = new LineLayer(mID, mSourceID); 40 | 41 | if (mSourceLayerID != null) { 42 | layer.setSourceLayer(mSourceLayerID); 43 | } 44 | 45 | return layer; 46 | } 47 | 48 | @Override 49 | public void addStyles() { 50 | RCTMGLStyleFactory.setLineLayerStyle(mLayer, new RCTMGLStyle(getContext(), mReactStyle, mMap)); 51 | } 52 | 53 | public void setSourceLayerID(String sourceLayerID) { 54 | mSourceLayerID = sourceLayerID; 55 | 56 | if (mLayer != null) { 57 | mLayer.setSourceLayer(mSourceLayerID); 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/layers/RCTMGLFillLayer.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.components.styles.layers; 2 | 3 | import android.content.Context; 4 | 5 | import com.mapbox.mapboxsdk.style.layers.FillLayer; 6 | import com.mapbox.mapboxsdk.style.layers.Filter; 7 | import com.mapbox.rctmgl.components.mapview.RCTMGLMapView; 8 | import com.mapbox.rctmgl.components.styles.RCTMGLStyle; 9 | import com.mapbox.rctmgl.components.styles.RCTMGLStyleFactory; 10 | import com.mapbox.rctmgl.components.styles.sources.RCTSource; 11 | 12 | /** 13 | * Created by nickitaliano on 9/8/17. 14 | */ 15 | 16 | public class RCTMGLFillLayer extends RCTLayer { 17 | private String mSourceLayerID; 18 | 19 | public RCTMGLFillLayer(Context context) { 20 | super(context); 21 | } 22 | 23 | @Override 24 | protected void updateFilter(Filter.Statement statement) { 25 | mLayer.setFilter(statement); 26 | } 27 | 28 | @Override 29 | public void addToMap(RCTMGLMapView mapView) { 30 | super.addToMap(mapView); 31 | 32 | if (mFilter != null) { 33 | updateFilter(mFilter); 34 | } 35 | } 36 | 37 | @Override 38 | public FillLayer makeLayer() { 39 | FillLayer layer = new FillLayer(mID, mSourceID); 40 | 41 | if (mSourceLayerID != null) { 42 | layer.setSourceLayer(mSourceLayerID); 43 | } 44 | 45 | return layer; 46 | } 47 | 48 | @Override 49 | public void addStyles() { 50 | RCTMGLStyleFactory.setFillLayerStyle(mLayer, new RCTMGLStyle(getContext(), mReactStyle, mMap)); 51 | } 52 | 53 | public void setSourceLayerID(String sourceLayerID) { 54 | mSourceLayerID = sourceLayerID; 55 | 56 | if (mLayer != null) { 57 | mLayer.setSourceLayer(mSourceLayerID); 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /example/ios/RNMapboxGLExample-tvOS/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIRequiredDeviceCapabilities 28 | 29 | armv7 30 | 31 | UISupportedInterfaceOrientations 32 | 33 | UIInterfaceOrientationPortrait 34 | UIInterfaceOrientationLandscapeLeft 35 | UIInterfaceOrientationLandscapeRight 36 | 37 | UIViewControllerBasedStatusBarAppearance 38 | 39 | NSLocationWhenInUseUsageDescription 40 | 41 | NSAppTransportSecurity 42 | 43 | 44 | NSExceptionDomains 45 | 46 | localhost 47 | 48 | NSExceptionAllowsInsecureHTTPLoads 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /android/rctmgl/src/main/java/com/mapbox/rctmgl/components/camera/CameraUpdateQueue.java: -------------------------------------------------------------------------------- 1 | package com.mapbox.rctmgl.components.camera; 2 | 3 | import com.mapbox.mapboxsdk.maps.MapboxMap; 4 | 5 | import java.util.Iterator; 6 | import java.util.LinkedList; 7 | import java.util.Queue; 8 | 9 | /** 10 | * Created by nickitaliano on 9/5/17. 11 | */ 12 | 13 | public class CameraUpdateQueue { 14 | private Queue mQueue; 15 | private OnCompleteAllListener mCompleteListener; 16 | 17 | public interface OnCompleteAllListener { 18 | void onCompleteAll(); 19 | } 20 | 21 | public CameraUpdateQueue() { 22 | mQueue = new LinkedList<>(); 23 | } 24 | 25 | public void offer(CameraStop item) { 26 | mQueue.offer(item); 27 | } 28 | 29 | public int size() { 30 | return mQueue.size(); 31 | } 32 | 33 | public boolean isEmpty() { 34 | return mQueue.isEmpty(); 35 | } 36 | 37 | public void flush() { 38 | while (!mQueue.isEmpty()) { 39 | mQueue.remove(); 40 | } 41 | } 42 | 43 | public void setOnCompleteAllListener(OnCompleteAllListener listener) { 44 | mCompleteListener = listener; 45 | } 46 | 47 | public void execute(final MapboxMap map) { 48 | if (mQueue.isEmpty()) { 49 | if (mCompleteListener != null) { 50 | mCompleteListener.onCompleteAll(); 51 | } 52 | return; 53 | } 54 | 55 | final CameraStop stop = mQueue.poll(); 56 | if (stop == null) { 57 | return; 58 | } 59 | 60 | final CameraUpdateItem item = stop.toCameraUpdate(); 61 | item.execute(map, new CameraUpdateItem.OnCameraCompleteListener() { 62 | @Override 63 | public void onComplete() { 64 | execute(map); 65 | } 66 | }); 67 | } 68 | } 69 | --------------------------------------------------------------------------------