diff --git a/__tests__/utils/MapboxStyleSheet.test.js b/__tests__/utils/MapboxStyleSheet.test.js index 771177a..05814a6 100644 --- a/__tests__/utils/MapboxStyleSheet.test.js +++ b/__tests__/utils/MapboxStyleSheet.test.js @@ -214,6 +214,30 @@ describe('MapboxStyleSheet', () => { }, }); }); + + it('should add overrides to special case styles', () => { + expect(MapboxGL.StyleSheet.create({ textOffset: [2, 2] } )).toEqual({ + __MAPBOX_STYLESHEET__: true, + textOffset: { + type: 'constant', + payload: { + value: [2, 2], + iosType: 'vector', + }, + }, + }); + + expect(MapboxGL.StyleSheet.create({ iconOffset: [2, 2] } )).toEqual({ + __MAPBOX_STYLESHEET__: true, + iconOffset: { + type: 'constant', + payload: { + value: [2, 2], + iosType: 'vector', + }, + }, + }); + }); }); function verifyStyleSheetsMatch (styles, expectedStyleSheet) { diff --git a/docs/ShapeSource.md b/docs/ShapeSource.md index a382808..b55e6b5 100644 --- a/docs/ShapeSource.md +++ b/docs/ShapeSource.md @@ -13,5 +13,6 @@ | maxZoomLevel | `number` | `none` | `false` | Specifies the maximum zoom level at which to create vector tiles.
A greater value produces greater detail at high zoom levels.
The default value is 18. | | buffer | `number` | `none` | `false` | Specifies the size of the tile buffer on each side.
A value of 0 produces no buffer. A value of 512 produces a buffer as wide as the tile itself.
Larger values produce fewer rendering artifacts near tile edges and slower performance.
The default value is 128. | | tolerance | `number` | `none` | `false` | Specifies the Douglas-Peucker simplification tolerance.
A greater value produces simpler geometries and improves performance.
The default value is 0.375. | +| images | `object` | `none` | `false` | - * Specifies the external images in key-value pairs required for the shape source.
- | diff --git a/docs/docs.json b/docs/docs.json index 3b4384c..295ce1a 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -1485,6 +1485,13 @@ "type": "number", "default": "none", "description": "Specifies the Douglas-Peucker simplification tolerance.\nA greater value produces simpler geometries and improves performance.\nThe default value is 0.375." + }, + { + "name": "images", + "required": false, + "type": "object", + "default": "none", + "description": "- * Specifies the external images in key-value pairs required for the shape source.\n-" } ], "name": "ShapeSource" diff --git a/ios/RCTMGL/RCTMGLStyleValue.m b/ios/RCTMGL/RCTMGLStyleValue.m index 9529aa9..b1081a2 100644 --- a/ios/RCTMGL/RCTMGLStyleValue.m +++ b/ios/RCTMGL/RCTMGLStyleValue.m @@ -47,6 +47,14 @@ rawValue = [NSValue valueWithCGVector:[RCTMGLUtils toCGVector:rawValue]]; } + // check for overrides that handle special cases like NSArray vs CGVector + NSDictionary *iosTypeOverride = self.payload[@"iosType"]; + if (iosTypeOverride != nil) { + if ([iosTypeOverride isEqual:@"vector"]) { + rawValue = [NSValue valueWithCGVector:[RCTMGLUtils toCGVector:rawValue]]; + } + } + id propertyValue = self.payload[@"propertyValue"]; if (propertyValue != nil) { return @{ propertyValue: [MGLStyleValue valueWithRawValue:rawValue] }; diff --git a/javascript/components/MapView.js b/javascript/components/MapView.js index ff59475..ba081b1 100644 --- a/javascript/components/MapView.js +++ b/javascript/components/MapView.js @@ -218,10 +218,14 @@ class MapView extends React.Component { } /** - * [queryRenderedFeaturesAtPoint description] - * @param {Array} coordinate - coordinate - * @param {Array} filter - filter - * @param {Array} layerIDs - layerIDs + * Returns an array of rendered map features that intersect with a given point. + * + * @example + * this._map.queryRenderedFeaturesAtPoint([30, 40], ['==', 'type', 'Point'], ['id1', 'id2']) + * + * @param {Array} coordinate - A point expressed in the map view’s coordinate system. + * @param {Array=} filter - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array. + * @param {Array=} layerIDs - A array of layer id's to filter the features by * @return {FeatureCollection} */ async queryRenderedFeaturesAtPoint (coordinate, filter = [], layerIDs = []) { @@ -243,10 +247,15 @@ class MapView extends React.Component { } /** - * [queryRenderedFeaturesInRect description] - * @param {Array} bbox [description] - * @param {Array} filters [description] - * @param {Array} layerIDs [description] + * Returns an array of rendered map features that intersect with the given rectangle, + * restricted to the given style layers and filtered by the given predicate. + * + * @example + * this._map.queryRenderedFeaturesInRect([30, 40, 20, 10], ['==', 'type', 'Point'], ['id1', 'id2']) + * + * @param {Array} bbox - A rectangle expressed in the map view’s coordinate system. + * @param {Array=} filter - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array. + * @param {Array=} layerIDs - A array of layer id's to filter the features by * @return {FeatureCollection} */ async queryRenderedFeaturesInRect (bbox, filter = [], layerIDs = []) { @@ -271,11 +280,13 @@ class MapView extends React.Component { * * @example * this.map.fitBounds([lng, lat], [lng, lat]) - * this.map.fitBounds([lng, lat], [lng, lat], 20, 1000) + * this.map.fitBounds([lng, lat], [lng, lat], 20, 1000) // padding for all sides + * this.map.fitBounds([lng, lat], [lng, lat], [verticalPadding, horizontalPadding], 1000) + * this.map.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000) * * @param {Array} northEastCoordinates - North east coordinate of bound * @param {Array} southWestCoordinates - South west coordinate of bound - * @param {(Number|Array)=} padding - Camera padding for bound + * @param {Number=} padding - Camera padding for bound * @param {Number=} duration - Duration of camera animation * @return {void} */ diff --git a/javascript/components/ShapeSource.js b/javascript/components/ShapeSource.js index fcaa5fd..d950782 100644 --- a/javascript/components/ShapeSource.js +++ b/javascript/components/ShapeSource.js @@ -73,8 +73,8 @@ 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. +- */ images: PropTypes.object, }; diff --git a/javascript/utils/MapboxStyleSheet.js b/javascript/utils/MapboxStyleSheet.js index 53ec4dd..e507657 100644 --- a/javascript/utils/MapboxStyleSheet.js +++ b/javascript/utils/MapboxStyleSheet.js @@ -1,7 +1,7 @@ import { isUndefined, isPrimitive } from './index'; import { processColor, NativeModules } from 'react-native'; import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; -import styleMap, { StyleTypes, StyleFunctionTypes } from './styleMap'; +import styleMap, { StyleTypes, StyleFunctionTypes, styleExtras } from './styleMap'; const MapboxGL = NativeModules.MGLModule; @@ -80,20 +80,23 @@ class MapStyleFunctionItem extends MapStyleItem { function makeStyleValue (prop, value, extras = {}) { let item; + // search for any extras + const extraData = Object.assign({}, styleExtras[prop], extras); + if (!isUndefined(value.type) && !isUndefined(value.payload)) { // function item = value; item.processStops(prop); } else if (styleMap[prop] === StyleTypes.Transition) { - item = new MapStyleTransitionItem(value.duration, value.delay, extras); + item = new MapStyleTransitionItem(value.duration, value.delay, extraData); } else if (styleMap[prop] === StyleTypes.Color) { - item = new MapStyleColorItem(processColor(value), extras); + item = new MapStyleColorItem(processColor(value), extraData); } else if (styleMap[prop] === StyleTypes.Translation) { - item = new MapStyleTranslationItem(value.x, value.y, extras); + item = new MapStyleTranslationItem(value.x, value.y, extraData); } else if (styleMap[prop] === StyleTypes.Image) { const res = resolveAssetSource(value) || {}; - item = new MapStyleConstantItem(res.uri || value, { image: true, ...extras }); + item = new MapStyleConstantItem(res.uri || value, { image: true, ...extraData }); } else { - item = new MapStyleConstantItem(value); + item = new MapStyleConstantItem(value, extraData); } return item.toJSON(); diff --git a/javascript/utils/styleMap.js b/javascript/utils/styleMap.js index 9b2afce..109f649 100644 --- a/javascript/utils/styleMap.js +++ b/javascript/utils/styleMap.js @@ -1425,4 +1425,13 @@ const styleMap = { visibility: StyleTypes.Constant, }; +export const styleExtras = { + iconOffset: { + iosType: 'vector', + }, + textOffset: { + iosType: 'vector', + }, +}; + export default styleMap; diff --git a/scripts/templates/styleMap.js.ejs b/scripts/templates/styleMap.js.ejs index c81b5eb..0c9c77a 100644 --- a/scripts/templates/styleMap.js.ejs +++ b/scripts/templates/styleMap.js.ejs @@ -83,4 +83,13 @@ const styleMap = { visibility: StyleTypes.Constant, }; +export const styleExtras = { + iconOffset: { + iosType: 'vector', + }, + textOffset: { + iosType: 'vector', + }, +}; + export default styleMap;