mirror of
https://github.com/status-im/react-native-mapbox-gl.git
synced 2026-08-30 20:41:08 +00:00
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:
@@ -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}>
|
||||
|
||||
Reference in New Issue
Block a user