Merge pull request #151 from mfazekas/images-comp

Introduce Images, and deprecate ShapeSource#images

README.md

@@ -48,6 +48,7 @@ npm install @react-native-mapbox-gl/maps --save
 * [Callout](/docs/Callout.md)
 * [Camera](docs/Camera.md)
 * [UserLocation](docs/UserLocation.md)
+* [Images](docs/Images.md)
 
 ### Sources
 * [VectorSource](/docs/VectorSource.md)

__tests__/interface.test.js

@@ -34,6 +34,7 @@ describe('Public Interface', () => {
       'ShapeSource',
       'RasterSource',
       'ImageSource',
+      'Images',
 
       // constants
       'UserTrackingModes',

docs/ShapeSource.md

@@ -13,7 +13,7 @@
 | maxZoomLevel | `number` | `none` | `false` | Specifies the maximum zoom level at which to create vector tiles.<br/>A greater value produces greater detail at high zoom levels.<br/>The default value is 18. |
 | buffer | `number` | `none` | `false` | Specifies the size of the tile buffer on each side.<br/>A value of 0 produces no buffer. A value of 512 produces a buffer as wide as the tile itself.<br/>Larger values produce fewer rendering artifacts near tile edges and slower performance.<br/>The default value is 128. |
 | tolerance | `number` | `none` | `false` | Specifies the Douglas-Peucker simplification tolerance.<br/>A greater value produces simpler geometries and improves performance.<br/>The default value is 0.375. |
-| images | `object` | `none` | `false` | Specifies the external images in key-value pairs required for the shape source.<br/>If you have an asset under Image.xcassets on iOS and the drawables directory on android<br/>you can specify an array of string names with assets as the key `{ assets: ['pin'] }`. |
+| images | `object` | `none` | `false` | Specifies the external images in key-value pairs required for the shape source.<br/>If you have an asset under Image.xcassets on iOS and the drawables directory on android<br/>you can specify an array of string names with assets as the key `{ assets: ['pin'] }`.<br/><br/>Deprecated, please use Images#images. |
 | onPress | `func` | `none` | `false` | Source press listener, gets called when a user presses one of the children layers only<br/>if that layer has a higher z-index than another source layers |
 | hitbox | `shape` | `none` | `false` | Overrides the default touch hitbox(44x44 pixels) for the source layers |
 | &nbsp;&nbsp;width | `number` | `none` | `true` | FIX ME NO DESCRIPTION |

docs/docs.json

@@ -1482,6 +1482,7 @@
   },
   "HeatmapLayer": {
     "description": "HeatmapLayer is a style layer that renders one or more filled circles on the map.",
+    "displayName": "HeatmapLayer",
     "methods": [],
     "props": [
       {
@@ -1723,6 +1724,24 @@
     ],
     "name": "ImageSource"
   },
+  "Images": {
+    "description": "Images defines the images used in Symbol etc layers",
+    "displayName": "Images",
+    "methods": [],
+    "props": [
+      {
+        "name": "images",
+        "required": false,
+        "type": "object",
+        "default": "none",
+        "description": "Specifies the external images in key-value pairs required for the shape source.\nIf you have an asset under Image.xcassets on iOS and the drawables directory on android\nyou can specify an array of string names with assets as the key `{ assets: ['pin'] }`."
+      }
+    ],
+    "composes": [
+      "../utils"
+    ],
+    "name": "Images"
+  },
   "Light": {
     "description": "Light represents the light source for extruded geometries",
     "displayName": "Light",
@@ -3210,7 +3229,7 @@
         "required": false,
         "type": "object",
         "default": "none",
-        "description": "Specifies the external images in key-value pairs required for the shape source.\nIf you have an asset under Image.xcassets on iOS and the drawables directory on android\nyou can specify an array of string names with assets as the key `{ assets: ['pin'] }`."
+        "description": "Specifies the external images in key-value pairs required for the shape source.\nIf you have an asset under Image.xcassets on iOS and the drawables directory on android\nyou can specify an array of string names with assets as the key `{ assets: ['pin'] }`.\n\nDeprecated, please use Images#images."
       },
       {
         "name": "onPress",

example/src/examples/ShapeSourceIcon.js

@@ -75,11 +75,12 @@ class ShapeSourceIcon extends React.Component {
             zoomLevel={17}
             centerCoordinate={[-117.20611157485, 52.180961084261]}
           />
-
+          <MapboxGL.Images
+            images={{example: exampleIcon, assets: ['pin']}}
+          />
           <MapboxGL.ShapeSource
             id="exampleShapeSource"
             shape={featureCollection}
-            images={{example: exampleIcon, assets: ['pin']}}
           >
             <MapboxGL.SymbolLayer id="exampleIconName" style={styles.icon} />
           </MapboxGL.ShapeSource>

javascript/components/Images.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { viewPropTypes } from '../utils';
+import ShapeSource from './ShapeSource';
+
+/**
+ * Images defines the images used in Symbol etc layers
+ */
+class Images extends React.Component {
+  static propTypes = {
+    ...viewPropTypes,
+
+    /**
+     * 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,
+  };
+
+  _getID() {
+    if (!this.id) {
+      this.id = `${ShapeSource.imageSourcePrefix}-${Math.random().toString(36).substr(2,9)}`
+    }
+    return this.id;
+  }
+
+  render() {
+    const id = this._getID();
+
+    return (
+      <ShapeSource
+        images={this.props.images}
+        id={id}
+        shape={{
+          "type": "FeatureCollection",
+          "features": []
+        }}
+      >
+        {this.props.children}
+      </ShapeSource>
+    );
+  }
+}
+
+export default Images;

javascript/components/ShapeSource.js

@@ -23,6 +23,8 @@ export const NATIVE_MODULE_NAME = 'RCTMGLShapeSource';
 class ShapeSource extends AbstractSource {
   static NATIVE_ASSETS_KEY = 'assets';
 
+  static imageSourcePrefix = '__shape_source_images__';
+
   static propTypes = {
     ...viewPropTypes,
 
@@ -86,6 +88,8 @@ class ShapeSource extends AbstractSource {
      * 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'] }`.
+     * 
+     * Deprecated, please use Images#images.
      */
     images: PropTypes.object,
 
@@ -130,6 +134,9 @@ class ShapeSource extends AbstractSource {
     if (!this.props.images) {
       return;
     }
+    if (!this.props.id.startsWith(ShapeSource.imageSourcePrefix)) {
+      console.warn("ShapeSource#images is deprecated, please use Images#images")
+    }
 
     const images = {};
     let nativeImages = [];

javascript/index.js

@@ -16,6 +16,8 @@ import VectorSource from './components/VectorSource';
 import ShapeSource from './components/ShapeSource';
 import RasterSource from './components/RasterSource';
 import ImageSource from './components/ImageSource';
+import Images from './components/Images';
+
 // Layers
 import FillLayer from './components/FillLayer';
 import FillExtrusionLayer from './components/FillExtrusionLayer';
@@ -79,6 +81,7 @@ MapboxGL.VectorSource = VectorSource;
 MapboxGL.ShapeSource = ShapeSource;
 MapboxGL.RasterSource = RasterSource;
 MapboxGL.ImageSource = ImageSource;
+MapboxGL.Images = Images;
 
 // layers
 MapboxGL.FillLayer = FillLayer;