-
Notifications
You must be signed in to change notification settings - Fork 4.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add gradient/multi-color polyline support for iOS (MapKit) (#1911)
* Add multi/gradient polyline support for iOS (MapKit) * Fixed MapExplorer not building with RN51 * Renamed color/color2 to startColor & endColor for new Polyline renderer * Fixed gradient line sometimes not visible on certain zoom resolutions
- Loading branch information
1 parent
8b28c64
commit fef05cd
Showing
12 changed files
with
442 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import React from 'react'; | ||
| import { | ||
| StyleSheet, | ||
| Dimensions, | ||
| } from 'react-native'; | ||
|
|
||
| import MapView from 'react-native-maps'; | ||
|
|
||
| const { width, height } = Dimensions.get('window'); | ||
|
|
||
| const ASPECT_RATIO = width / height; | ||
| const LATITUDE = 37.78825; | ||
| const LONGITUDE = -122.4324; | ||
| const LATITUDE_DELTA = 0.0922; | ||
| const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; | ||
|
|
||
| const COORDINATES = [ | ||
| { latitude: 37.8025259, longitude: -122.4351431 }, | ||
| { latitude: 37.7896386, longitude: -122.421646 }, | ||
| { latitude: 37.7665248, longitude: -122.4161628 }, | ||
| { latitude: 37.7734153, longitude: -122.4577787 }, | ||
| { latitude: 37.7948605, longitude: -122.4596065 }, | ||
| { latitude: 37.8025259, longitude: -122.4351431 }, | ||
| ]; | ||
|
|
||
| const COLORS = [ | ||
| '#7F0000', | ||
| '#00000000', // no color, creates a "long" gradient between the previous and next coordinate | ||
| '#B24112', | ||
| '#E5845C', | ||
| '#238C23', | ||
| '#7F0000', | ||
| ]; | ||
|
|
||
| class GradientPolylines extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| region: { | ||
| latitude: LATITUDE, | ||
| longitude: LONGITUDE, | ||
| latitudeDelta: LATITUDE_DELTA, | ||
| longitudeDelta: LONGITUDE_DELTA, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <MapView | ||
| provider={this.props.provider} | ||
| style={styles.container} | ||
| initialRegion={this.state.region} | ||
| > | ||
| <MapView.Polyline | ||
| coordinates={COORDINATES} | ||
| strokeColor="#000" | ||
| strokeColors={COLORS} | ||
| strokeWidth={6} | ||
| /> | ||
| </MapView> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| GradientPolylines.propTypes = { | ||
| provider: MapView.ProviderPropType, | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| ...StyleSheet.absoluteFillObject, | ||
| }, | ||
| }); | ||
|
|
||
| module.exports = GradientPolylines; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| // | ||
| // AIRMapPolylineRenderer.h | ||
| // mapDemo | ||
| // | ||
| // Created by IjzerenHein on 13-11-21. | ||
| // Copyright (c) 2017 IjzerenHein. All rights reserved. | ||
| // | ||
|
|
||
| #import <MapKit/MapKit.h> | ||
|
|
||
| @interface AIRMapPolylineRenderer : MKOverlayPathRenderer | ||
|
|
||
| -(id)initWithOverlay:(id<MKOverlay>)overlay polyline:(MKPolyline*)polyline; | ||
| -(id)initWithSnapshot:(MKMapSnapshot*)snapshot overlay:(id<MKOverlay>)overlay polyline:(MKPolyline*)polyline; | ||
| -(void)drawWithZoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context; | ||
|
|
||
| @property (nonatomic, strong) NSArray<UIColor *> *strokeColors; | ||
|
|
||
| @end |
Oops, something went wrong.