diff --git a/GoogleStaticMap.js b/GoogleStaticMap.js index 83c8e14..084e977 100644 --- a/GoogleStaticMap.js +++ b/GoogleStaticMap.js @@ -113,13 +113,16 @@ class GoogleStaticMap extends Component { hasCenterMarker: PropTypes.bool, apiKey: PropTypes.string.isRequired, + + mapStyle: PropTypes.array, }; static defaultProps = { scale: defaultMapScale(), format: IMAGE_FORMATS.PNG, mapType: MAP_TYPES.ROADMAP, - hasCenterMarker: true + hasCenterMarker: true, + mapStyle: [] }; render() { @@ -166,6 +169,24 @@ class GoogleStaticMap extends Component { return apiKey ? `apiKey=${apiKey}` : ''; } + + get style(){ + var styleParams = ''; + const {mapStyle} = this.props; + mapStyle.forEach(function(style){ + var styleString = ''; + if(style.featureType && style.elementType && style.stylers){ + styleString += `&style=feature:${style.featureType}|element:${style.elementType}`; + for (const [key, value] of Object.entries(style.stylers)) { + for (const [key2, value2] of Object.entries(value)) { + styleString += `|${key2}:${value2}`; + } + } + } + styleParams += styleString; + }); + return styleParams; + } } diff --git a/README.md b/README.md index 00fe831..4ccdfbd 100644 --- a/README.md +++ b/README.md @@ -43,6 +43,7 @@ class MapExample extends Component { |**`mapType`**|`string`|'roadmap', 'satellite', 'terrain', 'hybrid'. use the `GoogleStaticMap.MapTypes` enum. default is `roadmap`.| |**`hasCenterMarker`**|`bool`|add a marker on the center. default is `true`.| |**`apiKey`**|`string`|Google API Key| +|**`mapStyle`**|`string`| JSON string containing map style elements, see https://snazzymaps.com/ | and also any `Image.propTypes`. see: http://facebook.github.io/react-native/docs/image.html#props