Adds support for native assets as an iconImage

If you want to use any images in your geojson that are under your
drawables dir on Android and *.xcassets on iOS you now can provide
an assets key to the images prop for the ShapeSource and the native code
will add these images to the map style for you.
This commit is contained in:
Nick
2017-10-23 16:41:53 -07:00
parent 5bd1b5866a
commit 0ded5a54de
10 changed files with 172 additions and 42 deletions
+20 -6
View File
@@ -8,13 +8,17 @@ const MapboxGL = NativeModules.MGLModule;
export const NATIVE_MODULE_NAME = 'RCTMGLShapeSource';
const RCTMGLShapeSource = requireNativeComponent(NATIVE_MODULE_NAME, ShapeSource);
const RCTMGLShapeSource = requireNativeComponent(NATIVE_MODULE_NAME, ShapeSource, {
nativeOnly: { nativeImages: true },
});
/**
* ShapeSource is a map content source that supplies vector shapes to be shown on the map.
* The shape may be a url or a GeoJSON object
*/
class ShapeSource extends React.Component {
static NATIVE_ASSETS_KEY = 'assets';
static propTypes = {
/**
* A string that uniquely identifies the source.
@@ -73,8 +77,10 @@ class ShapeSource extends React.Component {
tolerance: PropTypes.number,
/**
- * Specifies the external images in key-value pairs required for the shape source.
- */
* Specifies the external images in key-value pairs required for the shape source.
* If you have an asset under Image.xcassets on iOS and the drawables directory on android
* you can specify an array of string names with assets as the key `{ assets: ['pin'] }`.
*/
images: PropTypes.object,
};
@@ -96,17 +102,25 @@ class ShapeSource extends React.Component {
}
let images = {};
let nativeImages = [];
const imageNames = Object.keys(this.props.images);
for (let imageName of imageNames) {
const res = resolveAssetSource(this.props.images[imageName]);
if (imageName === ShapeSource.NATIVE_ASSETS_KEY && Array.isArray(this.props.images[ShapeSource.NATIVE_ASSETS_KEY])) {
nativeImages = this.props.images[ShapeSource.NATIVE_ASSETS_KEY];
continue;
}
const res = resolveAssetSource(this.props.images[imageName]);
if (res && res.uri) {
images[imageName] = res.uri;
}
}
return images;
return {
images: images,
nativeImages: nativeImages,
};
}
render () {
@@ -120,7 +134,7 @@ class ShapeSource extends React.Component {
maxZoomLevel: this.props.maxZoomLevel,
buffer: this.props.buffer,
tolerance: this.props.tolerance,
images: this._getImages(),
...this._getImages(),
};
return (
<RCTMGLShapeSource {...props}>